CSS
引入css样式的三种方法
行内式
通过标签的style属性来设置元素的样式 eg:<h1 style="属性1:属性值1;属性2:属性值2;"><hello word/h1> 不能实现样式和结构相分离
内部样式
可以使结构和样式相分离,但只能控制当前的页面 写法: <head> <style> 选择器{ 属性1:属性值1; 属性2:属性值2; 属性3:属性值3 } </style> </head> 选择器有:标签选择器
外部样式
实现结构和样式向分离,实现样式共享 是将所有的样式放在一个或多个以.css位扩展的外部样式表文件中,通过link标签将外部的样式表文件链接到html文档中 写法: <head> <link rel="stylesheet" type="text/css" href="css文件的路径"> </head> 注意: link是单标签 link标签需要放在head头部标签中,并且制定link标签的三个属性. rel属性:定义当前文档与被链接文档之间的关系,在这里需要指定为"stylesheet",表示被链接的文档是一个 样式文件 type属性:定义被链接文档的类型,在这里需要指定为"text/css"表示链接的外部文件为css样式表 href属性:定义所链接外部样式表文件的url,可以想第一路径,也可以绝对路径
三种样式的总结
CSS选择器
基础选择器
作用:可以把某一类标签全部选择出来,比如所有的div和span 优点:快速为页面中同类型的标签一样式 缺点:不能涉及差异化样式
类选择器:
优点:可以为元素对象定义单独或相同的样式,可以选择一个或者多个标签 注意: 类选择器使用"."进行表示后面紧跟类名 长名称或者词组可以使用中横线来为选择器命名 不要使用纯数字,中文等命名,尽量使用英文字母来表示
类选择器特殊用法-多类名:
多个类名用空格隔开 • 1
写法:#id名称 id选择器和类选择器的区别: 类选择器好比人的名字,是可以多次重复使用的比如:李伟,张伟,王伟.(一个类名可以加到多个标签上) id选择器好比人的身份证号.唯一的(一个id只能在一个标签上)
通配符选择器:
通配符选择器用*号表示,就是选择所有的标签 他是所有选择器中作用域最广的,能匹配页面中所有的元素 * { 属性1:属性值2; 属性2:属性值2; } 注意:会匹配页面的所有元素,会降低页面的响应速度,不建议随便使用
基础选择器的总结
复合选择器
• 1
字体
.class{ fint-size:200px; }
字体加粗font-weight:500
.class{ font-weight:200 不需要加单位 font-weight:normal 让字体不加粗也就是成为正常的(相当月font-weight:400的粗细) }
字体倾斜font-style:italic
.class{ font-style:normal 让字体不倾斜也就是成为正常的 }
字体的综合性写法
选择器{ font: font-style font-weight font-size/line-height font-family } eg: .title{ font:italic 700 20px "微软雅黑"; } font-style 和 font-weight可以省略不写 eg: .title{ font:20px "微软雅黑"; }
CSS的外观属性
作用:color属性用于定义文本的颜色 取值有三种:预定义的颜色值(red,blue...),十六进制(#FF6600),RGB代码(rgb(255,0,0)
line-height:行间距
作用:用于设置行间距,就是行与行之间的距离 单位:px,em,% 一般情况下行距比字号大7或者8像素就可以了
text-align:文本水平对齐方式
作用:设置文本内容的水平对齐方式 left 左对齐(默认) right 右对齐 center 居中对齐 注意:是让盒子的内容水平居中,而不是让盒子居中对齐
text-indent:首行缩进
作用:设置首行文本的缩进 属性值:可以为不同单位的数值,em字符宽度的倍数,或相对于浏览器窗口宽度的百分比%,允许使用负值 建议使用em作为设置单位,1em就是一个字的宽度,如果是汉字的段落,1em就是一个汉字的宽度
text-decoration文本的装饰:
text-decoration:通常我们用于给链接修改装饰效果
css外观属性的总结
