HTML5--CSS选择器-浮动--Day03

tech2024-12-05  9

选择器 选择器{属性:值;} 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 > active

5.选择器的权重

内联样式表(行内样式表)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 注:水平显示,不会自动换行,一行显示多个 内联元素不可以设置宽高 内联元素只能嵌套内联元素

个人笔记,自己理解,感谢观看,感谢大佬点评!!
最新回复(0)