CSS层叠样式表

1.CSS概述

CSS（层叠样式表）用于设置和布置网页 - 例如，更改内容的字体，颜色，大小和间距，将其拆分为多个列，或添加动画和其他装饰功能。

2.CSS语法结构

CSS的语法结构仅仅由三部分组成：选择符（Selector）、属性（property）、和值（value）
selector {Property:value;}

注释语法：/*内容*/
3.编写CSS的三种方式

    <head>
        <style>
            h1{
                color:red;
                }
        </style>
    </head>


    <head>
        <link rel="stylesheet" href="文件.css">
    </head>


    <body>
        <h1 style="color:read">内容</h1>
    </body>

CSS基本选择器

CSS 选择器用于“查找”（或选取）要设置样式的 HTML 元素

/*1.标签选择器:直接编写标签名来查找标签*/
    div {  
        color: green;  /*查找所有的div标签 并将内部的文本颜色变为绿色*/
    }

/*2.类选择器:通过编写class的值来查找标签*/
    .c1 {
        color:red;  /*查找所有class属性中含有c1的标签 并将内部的文本颜色变为红色*/
    }

/*3.id选择器:通过编写id的值来精准查找标签*/
    #d1 {
        color: aquamarine;  /*查找id值是d1的标签 并将内部的文本颜色改为天青色*/
    }

/*4.通用选择器:查找所有的标签*/
    * {
        color: blue;  /*查找所有的标签 并将内部的文本颜色改为蓝色*/
    }

CSS组合选择器

组合器是解释选择器之间关系的某种机制

1.后代选择器 (空格)

后代选择器匹配属于指定元素后代的所有元素。
div span {
    color:red;
}

理解：两个选择器用空格隔开 查找空格前面选择器内部所有符合空格后面选择器要求的标签
2.子选择器 (>)

子选择器匹配属于指定元素子元素的所有元素
div > p{
    color:red;
      };

理解：两个选择器之间用大于号隔开 查找符号前面选择器内部第一层符合大于号后面选择器要求的标签
3.相邻选择器 (+)

相邻选择器匹配所有作为指定元素的相邻同级的元素
div+span {
        color:red;
        }

理解：两个选择器用+好隔开 查找符号前标签同级别相邻下面紧挨着的符合符号后面的标签
4.兄弟选择器 (~)

兄弟（同级）元素必须具有相同的父元素
div~span {
        color:red;
}

理解：两个选择器用～隔开 查询符号左边标签同级别下所有符合符号右边的标签

CSS属性选择器

具有特定属性的HTML元素样式不仅仅是class和id，所有的标签除了有自己默认的属性之外还可以拥有自定义的任意属性，可以通过这些特有的属性来查找特定的标签
/*1.查找属性名含有name的标签*/
[name] {
    background-color: red;
}
/*2.查找属性名含有name并且值是username的标签*/
[name='username'] {
    background-color: orange;
}
/*3.查找input标签并且 属性名含有name值是username的*/
input[name='username'] {
    background-color: aqua;
}
/*前面的选择器可以是任意类型的 标签、id、class*/

CSS选择器之分组与嵌套

当多个选择器查找到的标签需要调整相同的样式那么可以合并统一设置，并且合并的选择器彼此不干扰和类型的限制
div,p,span {
     color: red;
}
可以在选择器基础之上添加额外的选择使得查找更精确
 div#d1,.c1,span.a1 {
        color: red;
    }  

CSS选择器之伪类选择器

伪类选择器一般适用在a标签能更好的突出效果

$\bullet$ a:active 匹配被点击的链接

$\bullet$ a:hover 匹配鼠标悬停其上的链接

$\bullet$ a:link 匹配所有未被访问的链接

$\bullet$ a:visited 匹配所有已经被访问过的链接

a:hover {
    color:red;
};

a:active {
    color:yellow;
};

a:link {
    color:blue;
};

a:visited {
    color:grey;
};

CSS选择器之伪元素选择器

伪元素用于向文本的首行设置特殊样式，伪元素只能用于块级元素
p:first-letter {
        font-size: 48px;
        color: red;
	}
p:before {
    content:"文本1";
    color:red;
    }
p:after {
    content:"文本2";
    color:blue;
    }
ps：伪元素选择器可以用在解决标签浮动所带来的的负面影响也可以用来做数据的防爬

CSS选择器优先级

        当多个选择器查找到相同的标签修改不同的样式那么这时候选择器也是有优先级的
1.选择器相同引入位置不同
   就近原则
2.选择器不同的情况
   行内 > id选择器 > 类选择器 > 标签选择器
ps:自行查阅强制修改标签样式的操作 !important

body样式设置

1.字体样式

可以设置字体的颜色、大小、字体格式等等....
    font-family:  "微软雅黑";
}
p {
    font-size: 16px;
}
p {
    font-weight:lighter;
}
p {
    color:red;
    color:rgb();
    color:#3e3e3e;
    color:rgba(1,1,1,0.5)
}
p {
    text-align:center;
}
a {
    text-decoration: none;
}
p {
    text-indent: 32px;
}
2.背景属性

background背景可以设置下面属性

$\bullet$ background-color：背景颜色

$\bullet$ background-position：背景图像的位置

$\bullet$ background-size：背景图片的尺寸

$\bullet$ background-repeat：重复背景图像

$\bullet$ background-origin：背景图片的定位区域

$\bullet$ background-clip：背景的绘制区域

$\bullet$ background-attachment：背景图像是否固定或者随着页面的其余部分滚动

$\bullet$ background-image：使用的背景图像

3.边框属性

border 简写属性在一个声明设置所有的边框属性

$\bullet$ border-width：规定边框的宽度

$\bullet$ border-style ：规定边框的样式

$\bullet$ border-color ：规定边框的颜色

4.display属性（隐藏）

display 属性规定元素应该生成的框的类型
p {
  display:none;
  }

ps：当值等于none时，可以用来隐藏某个元素，且隐藏的元素不会占用任何空间。

盒子模型

1.什么是盒子模型

HTML的所有标签都可以看成是一个个的盒子，盒子与盒子之间是有一些联系的这些因素又是可以通过代码进行修改的

这些因素有：

         $\bullet$ 外边距(margin)：设置标签与标签间的距离

         $\bullet$ 边框(border)：设置标签的边框

         $\bullet$ 内边距(padding)：设置内部文本与边框的距离

         $\bullet$ 具体内容(content)：标签内的内容显示文本与图像

2.盒子模型用法

body标签自带有margin并且默认为8px，所以当我们要让body顶边展示的时候得把这默认值改为0
margin-top: 20px; 
margin-left: 20px; 
margin-right: 20px; 
margin-bottom: 20px; 


margin:0; 
margin: 上 右 下 左; 
margin: 0px auto; 

padding-top: 20px; 
padding-left: 20px; 
padding-right: 20px; 
padding-bottom: 20px; 
3.盒子模型注意点

$\bullet$ padding使用方式与margin一样

$\bullet$ 简写margin设置四周距离时顺序为：上、右、下、左

$\bullet$ margin只能设置水平居中

浮动布局

1.什么是浮动布局

在CSS中任何元素都可以浮动，浮动就是让元素“漂浮”起来从而解决多个快共存于一行的问题，浮动虽然可以解决多个块共存的问题但也会出现一些别的现象如：父类标签坍塌

浮动的特点：

$\bullet$ 浮动的框可以向左或向右移动，直到框的外边缘碰到包含框或另一个浮动框的边框为止

$\bullet$ 浮动框会脱离文档流，所以文档流中的块框表现得就像浮动框不存在一样

2.如何使用浮动
float:left   
float:right  
float:none   
3.浮动布局注意点

         $\bullet$ 当浮动框下面有被遮住的文本时浏览器会针对文本优先展示(还是能看见文本)

         $\bullet$ 解决父标签坍塌有三种方法：固定高度、伪元素清除法、overflow:hidden

         $\bullet$ 通过clear属性可以规定元素的哪一侧不允许其他浮动元素

溢出属性

1.溢出属性作用

溢出属性设置一个盒子内部的内容如果超出了该盒子设定大小的时候怎么显示超出的内容

2.overflow溢出属性

         $\bullet$ visible：默认值，超出的内容不会消失而是呈现在元素框之外

         $\bullet$ hidden：超出内容会被修剪，并且其余内容是不可见的

         $\bullet$ scroll：超出内容会被修剪，但是浏览器会显示滚动条以便查看其余内容

         $\bullet$ auto：如果内容被修剪，超出内容浏览器会以滚动条的形式显示

         $\bullet$ inherit：规定应该从父元素继承overflow属性的值

定位属性

1.定位属性作用

定位就是设置盒子到指定的位置上

2.定位position属性的用法

         $\bullet$ static(静态)：

        所有的标签默认都不能直接通过定位修改位置需要切换成下面三种

         $\bullet$ relative(相对定位)：

        相对于标签原来的位置做定位

         $\bullet$ absolute(绝对定位)：

        基于已经定位过的父标签做定位(如果没有父标签则以body为参照)

         $\bullet$ fixed(固定定位)：

        相对于浏览器窗口做定位

css层叠样式设置

CSS层叠样式表

1.CSS概述

2.CSS语法结构

3.编写CSS的三种方式

CSS基本选择器

CSS组合选择器

1.后代选择器 (空格)

2.子选择器 (`>`)

3.相邻选择器 (`+`)

4.兄弟选择器 (`~`)

CSS属性选择器

CSS选择器之分组与嵌套

CSS选择器之伪类选择器

CSS选择器之伪元素选择器

CSS选择器优先级

body样式设置

1.字体样式

2.背景属性

3.边框属性

4.display属性（隐藏）

盒子模型

1.什么是盒子模型

2.盒子模型用法

3.盒子模型注意点

浮动布局

1.什么是浮动布局

2.如何使用浮动

3.浮动布局注意点

溢出属性

1.溢出属性作用

2.overflow溢出属性

定位属性

1.定位属性作用

2.定位position属性的用法

相关推荐

css层叠样式设置

CSS层叠样式表

1.CSS概述

2.CSS语法结构

3.编写CSS的三种方式

CSS基本选择器

CSS组合选择器

1.后代选择器 (空格)

2.子选择器 (>)

3.相邻选择器 (+)

4.兄弟选择器 (~)

CSS属性选择器

CSS选择器之分组与嵌套

CSS选择器之伪类选择器

CSS选择器之伪元素选择器

CSS选择器优先级

body样式设置

1.字体样式

2.背景属性

3.边框属性

4.display属性（隐藏）

盒子模型

1.什么是盒子模型

2.盒子模型用法

3.盒子模型注意点

浮动布局

1.什么是浮动布局

2.如何使用浮动

3.浮动布局注意点

溢出属性

1.溢出属性作用

2.overflow溢出属性

定位属性

1.定位属性作用

2.定位position属性的用法

相关推荐

2.子选择器 (`>`)

3.相邻选择器 (`+`)

4.兄弟选择器 (`~`)