No.1.3

CSS层叠样式表

/* css注释 */

CSS引入方式

内嵌式：CSS写在style标签中

　　提示：style标签虽然可以写在页面任意位置，但是通常约定写在 head 标签中（作用范围：当前页面；使用场景：小案例）

外联式：CSS写在一个单独的.css 文件中

　　提示：需要通过link标签在网页中引用（作用范围：多个页面；使用场景：项目中）

行内式：CSS写在标签的style属性中

　　提示：配合js使用（作用范围：当前标签；使用场景：配合js使用）

基础选择器

标签选择器：标签名{css属性名: 属性值;}（标签选择器选择的是一类标签，而不是单独某一个；标签选择器无论嵌套关系有多深，都能找到对应的标签）

类选择器：.类名{css属性名：属性值;}（所有标签上都有class属性，class属性的属性值称为类名（类似于名字）；一个标签可以同时有多个类名，类名之间以空格隔开）

id选择器：#id属性值{css属性名：属性值;}（id属性值类似于身份证号码，在一个页面中是唯一的,不可重复的；一个标签上只能有一个id属性值；一个id选择器只能选中一个标签）

通配符选择器：*{css属性名：属性值;}（很少用，可能用于去除默认的margin和padding值）

字体和文本样式

字体大小：属性名font-size取值数字+px

字体粗细：属性名font-weight取值【关键字】正常normal加粗bold【纯数字】100~900的整百数：正常400加粗700

字体样式（是否倾斜）：属性名font-style【取值】正常normal倾斜italic

字体系列font-family取值：具体字体...

系统　　　　　默认字体

Windows　　　微软雅黑

macOS 　　　苹方

样式的层叠问题：层叠性：后面的覆盖前面的属性

font相关属性的连写

属性名： font（复合属性）取值：font: style weight size family;

只能省略前两个，省略相当于默认值

一个属性冒号后面多个值的写法 --- 复合属性

文本样式

文本缩进：属性名text-indent 取值：数字+px 数字+em（1em = 当前标签的font-size的大小）

文本水平对其方式：属性名text-align【取值】left左对齐center居中对齐right右对齐

text-align: center;能让哪些元素居中

（1）文本

（2）span标签，a标签

（3）input标签，img标签

给父元素设置才能居中对齐

文本修饰：属性名：text-decoration【取值】underline下划线（常用）line-through删除线（不常用）overline上划线（几乎不用）none无装饰线（常用）

开发时经常使用text-decoration: none;清除a标签默认的下划线

行高：属性名：line-height取值：数字+px 倍数（当前标签font-size的倍数）

垂直居中技巧：文字单行的时候：设置行高属性值 = 自身高度属性值

谷歌中样式带删除线就是不生效（可能被层叠掉了，也可能自己注释的），黄色感叹号就是语法有错误

颜色取值

属性名：文字颜色color；背景颜色background-color

属性值：
颜色表示方式　　　　　　　　表示含义　　　　　　　　　　　　　　　　属性值

关键词　　　　　　　　　　预定义的颜色名　　　　　　　　　　　　　　red、green、blue、yellow

rgb表示法　　　　　　　　红绿蓝三原色。每项取值范围：0~255　　　　rgb(0,0,0)、rgb(255,255,255)

rgba表示法　　　　　　　　红绿蓝三原色+a表示透明度，取值范围是0-1 rgba(255,255,255,0.5)

十六进制表示法　　　　　　#开头，将数字转换成十六进制表示　　　　　 #000000、#ff0000、简写：#000、#f00

巴特西

No.1.3

最新文章

热门文章