css怎样使用
1.css的作用:美化网页,页面布局
css的引入方式:
内部样式表:理论上可以放在HTML的任何地方
推荐放在hade标签中,需要先建一个style标签
外部样式表 (常用):新建外部的css文件并编写样式
在HTML中使用link属性调用
行内样式表:写在元素的style属性中
适用于简单快速临时修改样式
在style中,使用键值对的形式,不需要{ }
写在那个元素中就控制那个元素,对其他元素没有效果
2.css选择器分为两种:基础选择器和复合选择器
基础选择器:
1)标签选择器:就是使用HTML标签名称作为选择器
结果:把某一种类标签选择出来,统一修改样式
优点:快速、统一设置同类标签的样式
缺点:没有差异化
2)类选择器:先找到需要修改样式的标签,在给标签增加class属性,属性值是选择器的类 名(在起类名时不能以数字开头,并且标签内的类名不能加**.**)
类选择器口绝:
1.样式点定义;
2.结构类调用;
3.一个或多个;
4.开发最常用
类选择器的特殊使用:多类名(下方xmind导图中有应用场景和使用方法)
3)id选择器:专门定义HTML中某个元素的样式,因为id属性是唯一的
id选择器的前缀是#
使用方法跟类选择器相差不大(xmind导图中有详细介绍)
id选择器口诀:
1.样式#定义;
2.结构id调用;
3.只能用一次
4.别人勿使用
4)通配符选择器:通配符选择器使用*定义,表示选取页面中的所有元素,例如
*{
color: red;
}
这就是将页面中的字体颜色都改成红色
复合选择器
复合选择器就是由多个选择器组成的选择器
3.css的字体属性
1)font-family设置字体
当使用font-family设置字体是最好使用英文写,例如:
font-family: Microsft yahei;
以上代码就将字体设置成微软雅黑
2)font-size设置字号大小(必须加单位(px))
3)font-weight字体粗细
设置字体粗细时不需要单位
取值范围:100-900(按100递增)
normal:正常粗细,与400等值
bold:加粗,与700等值
4)font-style字体样式
主要将倾斜的字体改为不倾斜显示,例如:
em{font-style: normal;}
5)font复合属性
这个属性不会经常使用下方xmind导图中有介绍
4.文本属性
1)颜色:color
预定的颜色名:red,green,blue
十六进制:#ffffff (最常用)
rgb代码:rgb(255.0.0)
2)文本对齐:text-align
只能给独占一行的元素设置文本对齐,例如:
div { text-align: center;}
这就将div中的内容水平居中
3)文本装饰:text-decoration
none:没有装饰线(最常用)
underline:下划线
line-through:删除线
overline:上划线
a { text-docoration: none ;}
最常将a标签的下划线去除
4)文本缩进:text-index
通常给段落设置2em;
只对独占一行的元素生效
p { text-index: 2em;}
5)行间距:line-height
控制文本行与行之间的距离
行间距由上间距、文本高度和下间距组成
行间距与盒子高度相同时可实现垂直居中
p { line-height: 26px;}
下方是本章的xmind导图: