Java小白从入门到入土Day06

1、通配符选择器

用于选中body中所有的html元素

语法：*{css样式}

2、类选择器

通过html元素所携带的class属性来查找

页面上一组元素，不同的标签可以有相同的class，

一个标签也可以有不同的class，中间使用空格隔开

语法：.class名称{css样式}

 

分类选择器：通过元素标签名称和类名组合来选中页面上的元素

语法：标签名.类名{css样式}

3、标签选择器

通过元素标签的名称来找页面上一组元素

语法：标签名{css样式}

4、id选择器

通过元素标签的id属性值来精确查找页面上的唯一元素，不同的标签id不能相同

语法：#id值{css样式}

5、分组选择器

通过多个选择器的组合来找页面上一组元素

语法：祖安择期1，选择器2，...{css样式}

6、派生选择器

1）子代选择器

通过父元素查找直接子元素

语法：父元素选择器>子元素选择器{CSS样式}

2）后代选择器

通过父元素查找所有子孙元素

语法：父元素选择器 子孙元素选择器{css样式}

7伪类选择器

用于查找页面上正处于某一特定状态的状态

1>:link          超链接被访问前状态

2>:visited     超链接被访问后状态

3>:hover            鼠标悬停状态

4>:active           元素被激活状态

5>:focus           输入框获取焦点时状态

8、伪元素选择器

 用于匹配html元素中文本内容

1>::selection

  用于匹配元素中被选中的文本，只能添加颜色背景两个样式

2>内容生成

2.1>::before 

在文本前生成内容

2.2>::after

在文本后生成内容

2.3>content

具体生成的内容，文本或图片

9、选择器优先级

标签选择器：1

类型选择器（伪类、伪元素）：10

id选择器：100

行内样式：1000

 

 

优先级顺序

1 !important

2 行内样式

3 ID选择器

4 类选择器

5 标签选择器

6 通配符选择器

7继承的样式

8 浏览器默认的样式

六、css样式

1、光标属性

鼠标悬停在元素上时箭头的形状

语法:cursor

取值  none  隐藏

         pointer 手

         help  帮助  问号

         move/all-scroll  拖拽

         progress   加载

         crosshair   十字箭头

         wait   等待

文本字体属性

2>字体大小

属性 font-size

取值  带单位的整数值（px/cm/mm/in/em）

关键字

xx-small/xx

3>字体

1)font-family

2)取值 电脑已安装字体

3)特点 

  字体可以写多个，中间用逗号隔开，按顺序依次加在字体，前面的不存在使用后面的

  字体名称中间如果有空格，需要带引号

4>字体粗细

font-weight

取值：1，关键字：

lighter 字体变细

lighter

  bold 字体加粗

  bolder 更粗

  normal 正常

   

100~900不带单位的整百数字

 5>字体倾斜

 font-style

取值：

 italic 倾斜

 normal 正常

6>文本阴影

1)属性：text-shadow

2)取值：x轴距离 y轴距离 模糊半径  阴影颜色

7>文本摆放

1)属性text-align

2)取值：

left     左

center  中

right   右

8> 行高

1)属性：line-height

9>文本修饰 

1)属性:text-decor

3、围绕在元素四周的线条，所有的html元素都可以有边框

1>四周边框设置

属性：border

取值 width         边框线宽度

       STYLE   边框线宽度

       SOLID    实线

    dotted      点状虚线

         dashed    线条虚线

       color     边框线颜色

2>单向边框设置

1>属性   boder ----方向

   方向   top/right/bottom

left

4)单边单属性

，单边单属性设置

属性; border-方向-属性

5 边框阴影

 

属性;box-shadow

取值：x轴距离y轴距离 模糊半径 阴影颜色

 6 溢出

属性：overflow

取值：auto 超出显示滚动条 hidden 隐藏 scroll 无论有没有超出都显示滚动条 visible显示（默认）

7 边框倒角

属性：border-radius:

取值：一个值表示四周

 俩个值 坐上/右下 右上左下

 三个值 左上 右上/左下 右下

四个值 左上 右上 左下 右下

4、盒模型

外边距 围绕在元素边框四周的空白距离

     通过外边距可以改变元素的位置

内边距元素中内容和元素边框之间的距离

    通过内边距可以改变元素的大小

元素实际所占页面空间大小

水平：左右外边距+左右边框+左右内边距+元素宽

垂直：上下外边距+上下边框+上下内边距+元素高

四周内外边距设置

属性：margin/padding

取值  px或者%的整数值

单项内外边距设置

属性：margin-方向/paddi-方向

取值  px或者%的整数值

 

5、列表属性

1>列表项标识

属性 list-style-type

取值 disc

 circle

square

 none

decimal

 lower-roman

 upper-roman

 low-alpha

 upper-alpha

2>列表项图像

属性 list-style-image: url(img/2233娘.png)

3>列表项位置

属性 list-style-position: inside

取值 inside/outside

4>简写

属性list-style: 

属性：image/possition/type

最常见用法

list-style: none  去掉列表项标识