选择器 选择器{属性:值;} 1.群组选择器(并集选择器) 语法格式:
<style> #box,.box1,.box2{ } </style>注:可以给多个不同内容设置相同的样式 选择器与选择器中间用英文逗号隔开;
2.包含选择器(子代选择器) 语法格式:
<style> div>p{ } </style>父标签(元素)>子标签(元素) 注:只能选择一层,即通过父元素选择子元素 选择器中间用英文>表示;
3.后代选择器 语法格式:
<style> div p{ } </style>注:只要是后代关系均可选择 选择器中间用空格隔开;
4.伪类选择器(多用于超链接) 伪类选择器指的是内容的某个状态 语法格式:
<style> a:link{ } 内容访问前的状态 a:visited{ } 内容访问后的状态 a:hover{ } 鼠标滑过的状态 a:active{ } 鼠标按下,激活的状态 </style> 注:如果所有伪类同时使用,则必须按照一定顺序编写。 link > visited > hover > active5.选择器的权重
内联样式表(行内样式表)1000 > ID选择器 0100 > class选择器(类选择器) 0010 > 标记选择器(标签选择器)0001 > 通配符选择器0000
包含选择器(子代选择器)的权重是计算所有选择器的权重值;
群组选择器(并集选择器)不会造成权重冲突;(理解含义)
伪类选择器的权重值为0010
字体属性 1.字体大小
font-size: ; 单位:px / pt / em 注:如果em 的内容没有设置字体大小,则相对于父元素的 font-size 的值设置; 如果自己设置了大小,em 则相对于自己的 font-size 值2.字体颜色 color 四种表达方式: 单词颜色: 例如:blue yellow red 等 色值少
16进制 0123456789 abcdef 例如:#E5E5E5 #B1AFBA 色值多
RGB 例如:rgb:50,50,136; R:红色 G:绿色 B:蓝色 RGBA 例如:rgb:50,50,136,0.5; R:红色 G:绿色 B:蓝色 A代表透明度,取值为0-1,0为完全透明;
3.字体的粗细 font-weight: ; normal 取消加粗 bold 加粗 bolder 更粗 100-900 500为正常粗细
4.字体倾斜 font-style: ; italic 倾斜 oblique 更倾斜 normal 取消倾斜
font-variant:small-caps; 转换小型大写字母
font-family 设置文字字体 在windows中文版操作系统下,中文默认字体为宋体或新宋体,英文默认为Arial。
font的连写模式:加粗 倾斜 小型大写字母 字体大小 字体样式; 注:如果连写模式后两位内容固定,顺序固定且必须书写;
设置大小写转换: text-transform: capitalize;首字母大写,空格来区分单词; uppercase 大写 lowercase 小写 none 默认值
线条修饰 text-decoration none 取消下划线 overline 上划线 udderline 下划线 line-through 删除线
首行缩进 text-indent:2em; 可以设置负数
字间距 letter-spacing
词间距 word-spacing
内容的水平对齐 text-alingn 四个值:left right center justify 注:text-align只能给块元素设置,一般对父元素设置 justify 设置两端对齐,对文本内容有要求(中英混合的内容)
line-height 行高 1.可以设置多行文本的行间距(行高包含字体大小) 2.可以取消内容自带的行间距(字体大小多少,行高就多少) 3.单行文本垂直居中 (盒子高度多少,行高就多少)
浮动 1.float的三个值: left right none(不浮动) 注:浮动的元素不占位置,脱离文档流,但盒子会重叠,内容不会重叠。 浮动的元素会受父元素的影响,如果内容宽度大于父元素宽度,则内容换行显示; 同级之间浮动下面的元素,会受浮动不占位的影响,补齐浮动,那我们就要清除浮动。
清除浮动: clear: left right both none 需要用父元素(设置高度)来把浮动和普通元素隔开
元素类型 1.块元素(自占一行) h1–h6 p div ol ul li dl dt dd form 注;上下显示内容独占一行,可以自动换行 块元素可以设置宽高 块元素可以嵌套内联元素,块元素可以嵌套块元素(p h1—h6 dt 只能嵌套内联)
2.内联元素(不会自动换行,一行可以显示多个内容) span a b strong i em u 注:水平显示,不会自动换行,一行显示多个 内联元素不可以设置宽高 内联元素只能嵌套内联元素
个人笔记,自己理解,感谢观看,感谢大佬点评!!