CSS

sixkey2022年1月12日大约 12 分钟

CSS

2、选择器

id选择器
元素选择器
class（类）选择器

2.1、id选择器

<h1 id="title">id选择器</h1>

样式

#title{
            background-color: green;
            color: red;
            align-content: center;
            font: 200;
}

2.2、元素选择器

<h2>你好</h2>
<h2>你好</h2>
<h2>你好</h2>

样式

h2{
    text-align: center;
    color: royalblue;
}

2.3、class（类）选择器

3种用法

①、直接用

<p class="cla">段落1</p>
<p class="cla">段落2</p>
<p class="cla">段落3</p>

.cla{
     background-color: palevioletred;
}

②、当只想变化其中一个元素时

让h3元素的文字居中

<h3 class="cl_center">你好</h3>
<h4 class="cl_center">你好</h4>
<h5 class="cl_center">你好</h5>

可以通过元素.类选择器名

h3.cl_center{
            color: aqua;
            text-align: center;
        }

③、class(类)选择器多个别名

需求：让这三个标签的字体都为16px,但是最后一个p标签的背景颜色为黑色

<span class="cl_size">16px</span>
<p class="cl_size">16px</p>
/*
	给类选择器取多个别名
*/
<p class="cl_size cl_bg">16px,背景黑色</p>

.cl_size{
            font-size: 16px;
}
.cl_bg{
            background-color: black;
}

2.4、通用选择器

*{
    background-color: pink;
}

效果

分组选择器

格式
选择器1,选择器2,选择器3{
样式内容
}

h2,.cl_p,#spa {
        color: red;
        background-color: pink;
        text-align: center;
        font-size: 18px;
}

<h2>年后</h2>
<p class="cl_p">鸟</p>
<span id="spa">你好</span>

2.5、CSS属性选择器

2.5.1、属性名选择器

格式:
标签名[目标属性名]{
   样式列表
}

<div>
	<a href="www.mi.com">小米</a>
	<a href="www.taobao.com" target="_blank">淘宝</a>
	<a href="www.jd.com" target="_top">京东</a></a>
</div>

a[target]{
        background-color: pink;
}

2.5.2、属性值选择器

格式：
格式: 标签名[目标属性名 = “属性值”]{ 样式列表 }

<div>
        <a href="www.mi.com">小米</a>
        <a href="www.taobao.com" target="_blank">淘宝</a>
        <a href="www.jd.com" target="_top">京东</a></a>
</div>

a[target = "_blank"]{
        background-color: pink;
}

2.6、层次选择器

2.6.1 后代选择器

选择器：E F

功能描述：选择匹配的F元素，则匹配F元素下的所有E元素(子孙后代)

<body>
    <p>段落1</p>
    <div>
        <p>段落2</p>
        <p>段落3</p>
        <h1><p>
            段落4
        </p></h1>
        <p>段落5</p>
    </div>
    <p>段落6</p>
</body>

/* 
 需求：将body下的div下的所有p元素的子体设置成红色
实现：使用后代选择器(子孙后代)
*/
body div p {
     color: red;
}

2.6.2子选择器

选择器：E>F

功能描述：选择匹配的F元素，且匹配F元素下的所有子元素E(子元素)

<body>
    <p>段落1</p>
    <div>
        <p>段落2</p>
        <p>段落3</p>
        <h1><p>
            段落4
        </p></h1>
        <p>段落5</p>
    </div>
    <p>段落6</p>
</body>

/* 
需求：将div下的一级p元素的子体设置成红色，不包括h1下的p元素
实现：使用子选择器(子元素)
*/
div>p {
  color: red;
}

2.7、伪类选择器

浏览器超链接默认

未点击：蓝色 + 下划线
点击：红色 + 下划线
已点击：紫色 + 下划线

2.7.1、E:link

<a href="www.baidu.com">超链接1</a></a>
    <a href="www.mi.com">超链接2</a></a>
    <a href="www.jd.com">超链接3</a></a>
    <a href="www.taobao.com">超链接4</a></a>

<!-- 选中未点击的超链接添加样式 -->
    <style>
        a:link{
            color: yellow;
        }
    </style>

2.7.2、E:active

<a href="www.baidu.com">超链接1</a></a>
    <a href="www.mi.com">超链接2</a></a>
    <a href="www.jd.com">超链接3</a></a>
    <a href="www.taobao.com">超链接4</a></a>

/* 
选择所有被点击的超链接
 */
a:active {
    color: red;
}

2.7.3、E:visited

/* 
            选择所有被点击过的超链接
        */
        a:visited {
            color: green;
        }

<a href="www.baidu.com">超链接1</a></a>
    <a href="www.mi.com">超链接2</a></a>
    <a href="www.jd.com">超链接3</a></a>
    <a href="www.taobao.com">超链接4</a></a>

2.7.4、E:hover

<a href="http://www.baidu.com">超链接1</a></a>
    <a href="http://www.mi.com">超链接2</a></a>
    <a href="http://www.jd.com">超链接3</a></a>
    <a href="http://www.taobao.com">超链接4</a></a>

/* 
            当鼠标悬停时呈现样式
        */
        a:hover {
            background-color: darkblue;
        }

2.7.5、E:focus

/* 
            选择具有焦点的元素
        */
        input:focus {
            color: blue;
        }

<a href="http://www.baidu.com">超链接1</a></a>
    <a href="http://www.mi.com">超链接2</a></a>
    <a href="http://www.jd.com">超链接3</a></a>
    <a href="http://www.taobao.com">超链接4</a></a>
    用户名：<input type="text">

3、颜色设置

3.1、css设置颜色方式：

颜色名称：（blue,red,green）
RGB
RGBA
HEX(16进制)
HSL
HSLA

3.2、颜色名称

①、背景颜色：background-color
②、文本颜色：color
③、边框颜色：border

实战

<h1 style="background-color: blueviolet;">标题</h1>
<p style="color: red;">段落</p>
<h3 style="border: 2px solid green;">边框</h3>

3.3、颜色值

采用颜色值，初始化颜色

RGB
RGBA
HEX(16进制)
HSL
HSLA

3.3.1、HEX(16进制)

注意：如果是数字：范围0-9；字母：a-f

#aa23df  随便组合，只要满足范围。

<h2 style="color: #aabcdf;">HEX颜色设置</h2>
<h3 style="color: #23ed78">年后</h3>

3.3.2、RGB)

光的三原色

格式：rgb(red,green,blue)

两种表达方式：

①、数值：范围：0-255

②、百分比：范围：0%-100%

实战

<h2 style="color: rgb(123, 180, 254);">RGB测试</h2>
<h2 style="color: rgb(23%, 45%, 80%);">rgb测试</h2>

3.3.3、RGBA

添加一个参数，表示颜色的透明度

格式：rgb(red,green,blue,alpha)

两种表达方式：

①、数值：范围：0-255

②、百分比：范围：0%-100%

③、alpha: 0.0(颜色完全透明) - 1.0(颜色完全不透明)

实战

<h3 style="background-color: rgb(253, 180, 254,0.0);">rgba测试</h3>
<h3 style="background-color: rgb(253, 180, 254,0.2);">rgba测试</h3>
<h3 style="background-color: rgb(253, 180, 254,0.4);">rgba测试</h3>
<h3 style="background-color: rgb(253, 180, 254,0.6);">rgba测试</h3>
<h3 style="background-color: rgb(253, 180, 254,0.8);">rgba测试</h3>
<h3 style="background-color: rgb(253, 180, 254,1.0);">rgba测试</h3>

效果图

3.3.4、HSL

色相：范围：0-360，0表示红色，120表示绿色，240表示蓝色

饱和度：范围：0%-100%：百分比,0%(灰色)，100%（全彩、全色）

明亮：范围：0%-100%：百分比，0%（黑色），50%（不黑不暗），100%（全白）

hsl(色相，饱和度，明亮)

实战

<h4 style="background-color: hsl(0,23%,46%);">hsl测试</h4>
    <h4 style="background-color: hsl(60,23%,46%);">hsl测试</h4>
    <h4 style="background-color: hsl(120,23%,46%);">hsl测试</h4>
    <h4 style="background-color: hsl(180,23%,46%);">hsl测试</h4>
    <h4 style="background-color: hsl(240,23%,46%);">hsl测试</h4>
    <h4 style="background-color: hsl(300,23%,46%);">hsl测试</h4>
    <h4 style="background-color: hsl(360,23%,46%);">hsl测试</h4>

效果图

3.3.5、HSLA

色相：范围：0-360，0表示红色，120表示绿色，240表示蓝色

饱和度：范围：0%-100%：百分比,0%(灰色)，100%（全彩、全色）

明亮：范围：0%-100%：百分比，0%（黑色），50%（不黑不暗），100%（全白）

alpha: 0.0(颜色完全透明) - 1.0(颜色完全不透明)

hsl(色相，饱和度，明亮，alpha)

实战

<h4 style="background-color: hsla(0,23%,46%,0.1);">hsla测试</h4>
    <h4 style="background-color: hsla(60,23%,46%,0.2);">hsla测试</h4>
    <h4 style="background-color: hsla(120,23%,46%,0.3);">hsla测试</h4>
    <h4 style="background-color: hsla(180,23%,46%,0.4);">hsla测试</h4>
    <h4 style="background-color: hsla(240,23%,46%,0.5);">hsla测试</h4>
    <h4 style="background-color: hsla(300,23%,46%,0.6);">hsla测试</h4>
    <h4 style="background-color: hsla(360,23%,46%,0.7);">hsla测试</h4>
    <h4 style="background-color: hsla(360,23%,46%,0.8);">hsla测试</h4>
    <h4 style="background-color: hsla(360,23%,46%,0.9);">hsla测试</h4>
    <h4 style="background-color: hsla(360,50%,46%,1.0);">hsla测试</h4>

效果图

4、CSS背景

4.1、CSS背景属性

背景的属性主要控制CSS元素的背景样式。

background-color
background-image
background-repeat
background-position
background-attachement
background

4.2、背景属性

4.2.1、background-color

设置颜色的背景颜色使用

4.2.2、background-image

设置元素的背景图片

参数：url(“image的路径”)

如果背景较大，图片会在水平方向和垂直方向进行平铺。

实战

* {
            background-image: url(../img/tp.jpg);
        }

4.2.3、background-repeat

可以设置背景图片是否水平或者垂直方向进行平铺

属性值	功能描述
repeat-x	图像仅在水平方向重复(平铺)
repeat-y	图像仅在垂直方向重复(平铺)
no-repeat	指定只显示一次背景图像(图像不平衡)

repeat-x效果图

repeat-y效果图

no-repeat效果图

图片的默认显示方式采用左上角作为平铺的起点进行平铺

4.2.4、background-position

可以用来控制背景图片的显示坐标位置

属性值	功能描述
left top、left center、left bottom、right top、right center、right bottom、center top、center center、center bottom	如果仅指定一个关键字，其他值将会是“center”
x% y%	第一个值是水平值，第二个值是垂直，左上角是0% 0%。右下角是100% 100%。如果仅指定了一个值，其他值将是50%。默认值是：0% 0%
xpos ypos	第一个值是水平值，第二个值是垂直，左上角是0。单位可以是像素：（0px 0px）或任何其他CSS单位右下角是100% 100%。如果仅指定了一个值，其他值将是50%。可以混合使用%和positions
inherit	指定background-position属性设置应该从父元素继承

4.2.5、background-attachement

设置背景图片是否应该滚动或者固定。

参数：

fixed：固定
scroll：背景滚动默认值

实战

.cl_id {
            width: 1000px;
            height: 800px;
            border: 1px solid red;
            background-image: url(../img/dontu.gif);
            background-repeat: no-repeat;
        }
        body {
            background-image: url(../img/tp.jpg);
            background-position: right top;
            background-attachment: scroll;
        }

4.2.6、background

设置背景使用属性，用来简化以上所有的属性声明，可以通过background进行替换以上所有的属性。

格式

background:值1,值2….

background属性中，属性值含义：

background-color
background-image
background-repeat
background-attachement
background-position

实战

.cl_id {
            width: 1000px;
            height: 800px;
            border: 1px solid red;
            background: url(../img/tp.jpg) no-repeat fixed center center;
        }

5、display属性

5.1、block

是块级元素的默认值，特点：独占一行，可以设置宽高，包括：h1-h6、p、div…

5.2、inline：

行内元素的默认值，特点：共占一行，不能修改宽高，包括：span、b、i、em、strong…

5.3、inline-block：

行内块，特点：既能修改宽高，也能共占一行，包括：img

实战

<div>div1</div>
    <div>div2</div>
    <div>div3</div>
    <span>span1</span>
    <span>span2</span>
    <span>span3</span>
    <img src="../img/dontu.gif" alt="">
    <img src="../img/dontu.gif" alt="">

div {
            width: 100px;
            height: 100px;
            border: 1px solid green;
            display: inline-block;
        }
        span {
            width: 100px;
            height: 100px;
            border: 1px solid green;
            display: block;
        }
        img {
            width: 100px;
            height: 100px;
            border: 1px solid green;
            display: block;
        }

6、盒子模型

6.1、介绍

盒子模型 = 宽高 + 外边距 + 边框 + 内边距

**宽高：**负责控制元素的显示大小

**外边距：**负责元素的位置

**边框：**负责元素的边框宽度和高度

**内边距：**负责控制元素的内容显示位置

6.2、宽高

①、属性

width
height

②、属性取值

像素
百分比

**③、使用场景：**块级元素、行内元素、用来修改元素的宽度和高度。

6.3、边框

①、语法：border

border：边框粗细样式颜色

②、某一个边框进行单独设置

border-left：边框粗细样式颜色
border-right边框粗细样式颜色
border-top 边框粗细样式颜色
border-bottom 边框粗细样式颜色

6.4、内边距

①、内边距：元素的内容距离元素的边框的距离

②、padding属性：

padding：10px：4个方向
padding：10px 20px：上下左右
padding：10px 20px 30px 40px：上右下左

③、单边内边距设置：

padding-left/right/top/bottom

实战

#d2 {
            width: 300px;
            height: 150px;
            border: 1px solid pink;
            border-radius: 15px;
            padding-left: 150px;
            padding-top: 75px;
        }

6.5、外边距

①、外边距：元素距离上级元素或者同级元素对应的距离

②、margin属性：

margin：10px：4个方向
margin：10px 20px：上下左右
margin：10px 20px 30px 40px：上右下左

③、单边内边距设置：

margin-left/right/top/bottom

实战

<div id="d2">d2</div>
    <div id="d3">d3</div>
    <div id="d4">
        <div id="d5">你好</div>
    </div></div>
    <div id="d6">年后</div>

#d2 {
            width: 100px;
            height: 100px;
            border: 1px solid pink;
            margin-top: 0px;
        }
        #d3 {
            width: 100px;
            height: 100px;
            border: 1px solid pink;
            margin-top: 10px;
            margin-bottom: 5px;
            margin-left: 20px;
        }
        #d4 {
            width: 100px;
            height: 100px;
            border: 1px solid blue;
            margin-top: 25px;
            margin-left: 23px;
        }
        #d5 {
            width: 50px;
            height: 50px;
            border: 1px solid green;
            margin-top: 25px;
            margin-left: 25px;
        }
        #d6 {
            width: 200px;
            height: 300px;
            border: 1px solid red;
            margin-left: 150px;
            margin-top: 20px;
        }

效果展示

7、CSS定位

吴幽讲CSS

1、尺寸练习

<div class="box">
        <h1>1、css学习</h1>
        <p>
            层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。 [1]
            CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。
        </p>
        <span>sikey学习css</span>
</div>

/* *通配符对全部html有效 */

 * {
    padding: 0;
    margin: 0;
}


/* 尺寸练习 */
.box {
    /* 高度和宽度 */
    width: 800px;
    height: 200px;
    /* 边框和圆角 */
    border: 3px double pink;
    border-radius: 15px;
    /* padding: 10px; */   /* padding值如果只设置一个，即上下左右内边距都是一样 */
    padding: 10px 20px;    /* padding值如果设置两个个，即上下为第一个值，左右内边距为第二个值 */
    /* width: 100%; */
    box-sizing: border-box;  /* 解决溢出问题 */
    /* 外边距 */
    /* 如果是一个参数，则上下左右都是一样 */
    margin: 20px;  
    /* margin-bottom: 50px;   底部外边距 */
    /* margin-left: auto;
    margin-right: auto;     此时垂直居中 */
    margin: 60px auto;      /* 最常用垂直居中方式：第一个参数即为上下距离，左右自适应 */
}

效果展示

2、背景处理

<div class="box">
        <h1>1、css学习</h1>
        <p>
            层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。 [1]
            CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。
        </p>
        <span>sikey学习css</span>
</div>

.box {
     /* 背景处理 */
    /* 背景颜色和背景图片不能同时使用 */
    background-color: rgb(34, 93, 182);
    /* background-image: url('../image/2.png');  有图颜色就不生效 */
    /* 阴影效果 */
    /* 参数解释：水平偏移量，上下偏移量，晕染范围，颜色 */
    box-shadow: 15px 15px 10px grey;
}

效果展示