HTML css_lafer伪类选择器-CSDN博客

本文链接：https://blog.csdn.net/lyy523_600/article/details/105582171

HTML css

css指层叠样式表，渲染html到网页。
作用：该html标签写表现形式的。
样式写法规则：属性：值；
css的颜色值
1、单词值 red
2、十六进制颜色值 #000000
3、rgb(125,145,168) rgba(125,145,168,0.5)（带有透明度值）
网页里面的像素值
1、px 固定像素值相对屏幕的分辨率的单位值
2、% 百分比像素值
3、rem 相对单位只相对于网页的html根元素的字体大小
4、em 相对单位相对当前元素文本字体大小若没有设置字体默认浏览器默认字体大小 1em=16px
css里面设置宽高属性：当前元素必须是块级元素, 如果要给行级元素设置宽和高必须转化为块级元素
css在网页中的分类
1、行内样式
2、内嵌样式
3、外部样式

1、行内样式

行内样式,写在元素的行内,写在元素style属性上
基础样式
1、color:red; 设置字体颜色
2、font-size:20px; 默认属性值 lager x-lafer small x-small 通常使用px
3、font-family:self; 设置字体样式的
4、width: 200px;设置宽
5、height: 200px;设置高
6、border:1px solid #00:设置边框
7、border-left:1px solid #000; 复合写法
border-left-color:#000;色织左边边框颜色
border-left-style:solid;设置左边边框性质
border-left-width:1px;设置左边边框宽度
border-top:1px solid #000; 上边
…
border-right:1px solid #000; 右边
…
border-bottom:1px solid #000; 底边 …
font:italic bold 30px self ;复合写法
font-style:italic;
font-weight:bold;
font-size:30px;
font-family:self;

2、内嵌样式

内嵌的位置：使用style标签内嵌在head标签里面或者内嵌到body里面。
通过css选择器来匹配样式。
css选择器：
*代表所有元素匹配网页里面的所有元素 *{}
element 代表元素元素{}
class 代表类名称 .（点）类名称{}
id 代表id
空格或者 > 子父选择器空格
复合选择器使用逗号分割
注：
命名class id 的时候，不要使用纯数字或数字不要开头。
命名规则：可以驼峰命名 BlockSmall 或者帕斯卡命名 blockSmall。

        *号选择器  匹配所有元素
        *{
           border: 2px solid blueviolet;
        }

        元素选择器 元素{}   匹配是网页里面所有的同名元素
         p{
          color: bisque;
         }
        类名称选择器（class选择器）使用点 . 来匹配   class 可以多个元素共有
         .BlockSmall{
            color: red;
            font-size: 12px;
        }

        id选择器 使用#匹配  建议id只能有一个,不能同名
        #idBlock{
            color: red;
            font-size: 30px;
        }

        子父选择器
        空格  指的是匹配当前元素的所有后代元素
        ul li{
            color: chartreuse;
            border-bottom: 1.5px solid #000;
        }
        > 匹配的是当前元素的直接子元素
         ul>li{
            color: chartreuse;
            border-bottom: 1.5px solid #000;
        }
        多个不同的元素具有相同的类名称  怎么区分
        根据元素区分   选择类
         div.BlockSmall{
            color: red;
        }
        复合选择器 使用逗号分割
         div.BlockSmall,#idBlock{
            border-left: 1px solid red;
        }
        <div class="sblock">
        </div>
        <span>我是span标签</span>
        <style>
     		.sblock>span{
      			 color: red;
              }
        </style>
        /*sblock里面的span

3、外部样式

写外部样式表，外部样式和内嵌样式写法一致，选择器都可已使用，相当于把内嵌样式拿到外部文件。
外部样式:在外部写样式表或网页内部引入
外部样式的引入：使用link 标签
可以引入在 head 或者body 标签里，还可以在内嵌样式里面引入。
使用@import ‘./css/index.css’

4、样式优先级

三大样式：行内内嵌外部

如果样式之间没有冲突：则样式的优先级是：样式进行叠加；
行内> 内嵌 > 外部（内嵌样式在外部样式加载之后）
行内> 外部 >内嵌（内嵌样式在外部样式之前加载）

如果样式之间存在冲突，则样式的优先级是：样式就近原则选取；
行内> 内嵌 > 外部（内嵌样式在外部样式加载之后）
行内> 外部 >内嵌（内嵌样式在外部样式之前加载）

内嵌样式和外部样式也存在优先级：指的是元素选择器之间的优先级
外部样式里面选择器的优先级和内嵌样式选择器优先级一致

1、内嵌样式选择器优先级：id选择器>class类选择器>元素选择器>*选择器
2、子父元素选择器优先级：根据父元素的选择器来判断

css如何提高样式的优先级？
!important 可提高样式的优先级，直接到达最高优先级

5、元素浮动

float ：只可左右浮动，浮动之后的元素的元素将围绕它，浮动之后将脱离文档流，不占位置
clear ：清除浮动，属性：指定元素两侧不能出项浮动元素

子元素浮动，父元素撑不开，怎么处理？
1、给父元素设置固定高
2、给父元素设置超出部分隐藏 overflow：hidden
3、给父元素内部设置空div

子元素浮动导致的父元素的问题，如父元素底下的兄弟元素里面的内容受到上边浮动的影响，这种情况可以直接处理：
1、设置一个空div
2、在兄弟元素样式里写清除浮动

6、行元素与块元素相互转化

块元素转换为行元素：display：inline；
块元素转换为行级块：display：inline-block；
行元素转换为块元素：display：block；
块元素转换为行级块：display：inline-block；

元素在转化为行级块的时候默认有间隙，处理方法：给父元素设置字体大小为0font-size：0；

7、css里面的显示隐藏

display：block；显示，同时元素也是块元素
display：none；隐藏，且隐藏的元素不会占用任何空间
visibility：hidden；隐藏，但隐藏的元素依旧占用与未隐藏之前一样的空间，影响布局

8、css伪类

类似于鼠标操作
：hover鼠标悬停伪类（鼠标划过链接）
：active激活伪类（已选中的链接）
：visited访问之后的伪类
：link访问之前的伪类

9、css元素的定位

是指元素默认在文档流上占位置
absolute ：绝对定位，元素脱离文档不占位置，默认对于浏览器左上右下移动
relative：相对定位，相对于自身的位置进行左上右下移动及分层
fixed：固定定位，元素脱离文档流，设置上下之后，滑动流动条报纸位置不变

元素在定位之后可以重用5个属性index分层left左right右top上bottom底层
文档流默认层为0
如果让绝对元素相对于父元素定位，给父元素设置相对定位，子元素在父元素的内部上下左右及分层
元素在绝对定位或者固定定位没有宽和高，得设置
元素在绝对定位或者固定定位之后的初始位置，得看前面有没有元素占位，默认位置在这个元素的下边

10、css盒子模型

在这里插入图片描述

magin外边距
borden边框
padding内边距
content内容

元素设置行级块的时候：水平和垂直的元素之间的外边距都是累加的
元素水平放置：两个元素之间的外边距是累加的
子元素全部浮动的时候：元素之间外边距也是累加的
正常默认情况元素上下外边距不会累加，而是走最大值
给元素设置内间距值，默认会把元素撑开。如果想设置内间距，又不想被撑开，可使用以下方法设置1、box-sizing：boder-box；是让元素边框和内间距向盒子内部走2、box-sizing ：conter-box；相当于默认情况

怎么处理盒模型塌陷？
1、给父元素设置边框
2、给父元素设置超出部分隐藏
3、给父元素设置内间距

11、css布局水平&垂直对齐

margin：auto；元素居中对齐，图片居中对齐
text-alight：center；文本居中对齐
position：absolute；左右对齐-使用定位方式
float：right；左右对齐-使用float方式
padding：20px 0；垂直居中对齐-使用padding
line-height：20px；垂直居中-使用line-height
padding：center；
text-alight：center；水平和垂直都居中,使用padding和text-alight

让父元素里面的子元素垂直对齐
1、使用padding让元素垂直对齐，子元素大小一致
如果子元素大小不一致
2、使用行高让文本垂直对齐，水平对齐
设置text-alight：center；文本水平对齐
设置line-height：100px；行高设置和高度设置一致，单行文本垂直对齐