css

最新推荐文章于 2022-08-21 14:41:08 发布

一条自学的python狗

最新推荐文章于 2022-08-21 14:41:08 发布

阅读量275

点赞数

分类专栏： web原理与应用文章标签： css

本文链接：https://blog.csdn.net/qq_45883412/article/details/106078325

版权

web原理与应用专栏收录该内容

2 篇文章 0 订阅

订阅专栏

文章目录

1. CSS层叠样式表
2. id

1. CSS层叠样式表

美化网页
也是一种标记语言

1.1. 语法规范

选择器｛属性:值｝
属性与属性值之间用 ：
属性后面加 ;

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        p {
            color: red;
            font-size: 24px;
        }
    </style>
</head>

<body>
    <p>你哄啊</p>
</body>

</html>

1.2. 代码风格

1.2.1. 样式格式

h3 {
    color: red;
    font-size: 12px;
}

1.2.2. 样式大小写

用小写

1.2.3. 空格规范

属性：属性值
选择器｛

1.3. CSS选择器

1.3.1. 基础选择器

1.3.1.1. 标签选择器

标签名
选择某一类的标签
不能差异化选择

p {
    color: red;
}

1.3.1.2. 类选择器

在要调用的标签加入class属性

.类名 {}

样式点定义，结构类调用（开发常用）
类名自己取，不能是标签名
使用英文
多类名

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .divi {
            width: 200px;
            height: 200px;
        }

        .red {
            background-color: red;
        }

        .green {
            background-color: green;
        }
    </style>
</head>

<body>
    <div class="red divi"></div>
    <div class="green divi"></div>
    <div class="red divi"></div>
</body>

</html>

1.3.1.3. id选择器

#id名 {}

只能调用一次

1.3.1.4. 通配符选择器


* {}

* 选择所有元素


* {

    margin: 0;
    padding: 0;
}

1.4. css字体属性

font-family: 字体类型
font-size: 字体大小
标题标签文字的大小要单独设置
font-weight：字体粗细

p {
    font-weight: 700;
    /* 不加单位,700相当于bold，400相当于normal */
}

font-style: 倾斜与不倾斜
复合属性
顺序不能颠倒
必须有size和family
font：font-style font-weight font-size/ling-height font-family

1.5. CSS文本属性

文本的外观

1.5.1. 文本颜色

div {
    color: pink;
    /*预定义*/
    color: #fff000
        /*16进制*/
        color: rgb(255, 0, 0);
    rgb(100%, 0%, 0%)
    /*rgb*/
}

1.5.2. 对齐文本

水平方向对齐
text-align: center left right

1.5.3. 装饰文本

text-decoration:

1.5.4. 文本缩进

text-indent：
首行缩进
em 相当于一个字的大小

1.5.5. 行间距

line-height:
行间距：文本高度、上间距、下间距

1.6. css的引入方式

1.6.1. 内部样式表

放在 <style></style> 中
一般放在 <head></head> 中

1.6.2. 行内样式表

在标签中加入style属性用于简单的样式

1.6.3. 外部样式表

单独建一个.css文件
使用 <link rel="stylesheet" href="">

1.7. emmet语法

1.7.1. 快速生成HTML

标签名+tab键
便签名*数字
.class

2. id

$排序
{内容}

2.0.2. 快速生成CSS

属性、属性值首字母+tab键

2.1. 复合选择器

2.1.1. 后代选择器

父亲后代 {样式}
更改的是后代元素的样式

2.1.2. 子选择器

父亲>儿子 {样式}
更改的是儿子的样式

2.1.3. 并集选择器

元素1,元素2 {}
元素1和元素2的样式都更改
喜欢竖着写

2.1.4. 伪类选择器

2.1.4.1. 链接伪类选择器

按照lvha的顺序

a:link
a:visited
a:hover
a:active

2.1.4.2. :focus伪类选择器

input:focus
光标
一般与 <input> 连用

2.2. 元素显示模式

更好的布局网页
元素以什么方式进行显示
分类：①块元素②行内元素

2.2.1. 块元素

特点：

独占一行
高度、宽度、外边距、内边距都可以更改
宽度默认是容器（父级元素）的100%
是一个容器（盒子），里面可以放行内元素和块元素

注意：
文字类的元素不能使用块元素
<p><h1><h6>

2.2.2. 行内元素（内联元素）

特点：

相邻行内元素在一行上，一行可以显示多个
高、宽直接设置是无效的
默认宽度就是他本身内容的宽度
行内元素只能容纳文本或其他行内元素

注意：
链接里面不能放链接
特殊的a里面可以放块级元素，但将a转换为块级元素更安全

2.2.3. 行内块元素

<img />
<input />
<td>

特点：

相邻的行内元素（行内块）在一行上，之间有空白缝隙，一行可以显示多个
默认宽度就是本身内容的宽度
高度、宽度、内外边距都可以控制

2.2.4. 元素显示模式转换

转换为块级元素
display:block
转换为行内元素
display:inline
转换为行内块元素
display:inline-block

Snipaste

2.2.5. 单行文字垂直居中

让文字的行高等于盒子的高度

2.3. 背景

2.3.1. 背景颜色

background-color:
默认：transparent

2.3.2. 背景图片

background-image
便于控制位置

2.3.3. 背景平铺

background-repeat
默认：repeat
no-repeat
repeat-x
repeat-y

有背景图片时，背景图片会覆盖背景颜色

2.3.4. 背景图片位置

background-position:x y
x和y可以是方位名词也可以是精确单位

2.3.4.1. 参数是方位名词

两者都是方位名词，两个值前后顺序无关
只显示一个方位参数时，另一个方位是居中对齐

2.3.4.2. 参数时精确单位

指定两个参数第一个是x，第二个是y
指定一个参数一定为x坐标，另一个垂直居中对齐

2.3.4.3. 混合单位

第一个为x，第二个为y

2.3.5. 背景图片固定（背景附着）

background-attachment: scroll(滚动) fixed(固定)

2.3.6. 背景复合写法

没有顺序要求
一般为
background:背景颜色背景图片地址背景平铺背景图像滚动背景图片位置

2.3.7. 背景颜色半透明

back:rgba(0, 0, 0, 0.3)
a透明程度

2.4. css 三大特性

2.4.1. 层叠性

样式冲突采取就近原则
样式不冲突，不会重叠

2.4.2. 继承性

子标签会继承父标签的的某些样式
text-
font-
line-
color

2.4.2.1. 行高的继承

行高不带单位

body {
    font: 12px/1.5
        /* 行高为当前文字大小的的1.5倍 */
}

2.4.3. 优先级

如果选择器的相同，则执行层叠性
如果选择器的不同，则按照选择器的权重

选择器	选择器权重
继承或者 `*`	0, 0, 0, 0
元素选择器	0, 0, 0, 1
类选择器，伪类选择器	0, 0, 1, 0
ID选择器	0, 1, 0, 0
行内样式style=""	1, 0, 0, 0
!important	∞无限大

注意：

权重不会进位
从左到右
继承的权重为0

复合选择器权重叠加
权重会叠加但不会进位

2.5. 盒子模型

组成
border（边框）
content（内容）
padding（内边距）
margin（外边距）

2.5.1. 边框(border)

粗细border-width
样式border-style

solid实线
dashed虚线
doted点线

颜色

简写：
没有顺序
border：

边框的四条边可以分来来定义样式
上边框
border-top
下边框
border-bottom
左边框
border-right
右边框
border-left

表格细线边框
border-collapse:collapse
相邻边框合并在一起

边框会影响盒子的大小

2.5.2. 内边距（padding）

边框与内容之间的距离
padding

只有一个值：上下左右的值相同
只有两个值：上下的值相同、左右的值相同
只有三个值：上，左右的值相同，下
只有四个值：上，右，下，左

注意：
padding也会影响盒子的大小

2.5.3. 外边距(margin)

盒子与盒子之间的距离
简写与padding相同

让块级水平居中对齐
margin: 0 auto

行内和行内块元素水平居中：
可以让父级元素text-align:center

2.5.3.1. 嵌套块级元素垂直外边距的塌陷

解决方法：
为父元素定义上边框
可以为父元素定义内边距
可以为父元素添加overflow:hidden

2.5.3.2. 清除内外边距


* {

    margin: 0;
    /* 清除外边距 */
    padding: 0;
    /* 清除内边距 */
}

行内元素尽量定义左右的内外边距

例子

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>

        * {

            margin: 0;
            padding: 0;
        }

        li {
            list-style: none;
        }

        .box {
            width: 248px;
            height: 163px;
            border: 1px solid #cccccc;
            margin: 100px auto;
        }

        .box h3 {
            height: 32px;
            border-bottom: 1px dotted #cccccc;
            font-size: 14px;
            font-weight: normal;
            line-height: 32px;
            padding-left: 15px;
        }

        .box ul li a {
            font-size: 12px;
            color: #666;
            text-decoration: none;
        }

        .box ul li a:hover {
            text-decoration: underline;
            color: chocolate;
        }

        .box ul li {
            height: 23px;
            line-height: 23px;
            padding-left: 20px;
        }

        .box ul {
            margin-top: 7px;
        }
    </style>
</head>

<body>
    <div class="box">
        <h3>品优购快报</h3>
        <ul>
            <li><a href="#">文字</a></li>
            <li><a href="#">文字</a></li>
            <li><a href="#">文字</a></li>
            <li><a href="#">文字</a></li>
            <li><a href="#">文字</a></li>
        </ul>
    </div>
</body>

</html>

去掉li前面的项目符号
list-style: none;

2.6. 圆角边框

border-radius: 具体像素值（百分比）
以所给值的为半径
一个值：四个角
两个值：左上角右下角、右上角左下角
三个值：左上角、右上角左下角、、右下角
四个值：左上角、右上角、右下角、左下角

2.7. 盒子阴影

box-shadow: h-shadow v-shadow blur spread color insert;

h-shadow: 必填，水平阴影的位置，允许负值
v-shadow: 必填，垂直阴影的位置，允许负值
blur: 可选，模糊距离(影子的虚实)
spread: 可选，阴影的尺寸
color: 可选，阴影的颜色
insert: 可选，将外部阴影改为内部阴影

影子不占用空间

2.8. 文字阴影

text-shadow:h-shadow v-shadow blur color
h-shadow:必填，水平阴影的位置，允许负值
v-shadow:必填，垂直阴影的位置，允许负值
blur:可选，模糊距离
color:可选，阴影颜色

2.9. CSS浮动

2.9.1. 标准流

标签按照规定好的默认方式排列

2.9.2. 浮动：

将多个块级元素元素进行一行显示
纵向排列标准流，横向排列浮动

float
选择器{float: 属性值;}
none:不浮动（默认值）
left:左浮动
right:右浮动

2.9.3. 浮动的特性

2.9.3.1. 浮动元素会脱离标准流（脱标）

脱离标准普通流的控制移动到指定位置
浮动的盒子不再保留原先的位置

2.9.3.2. 浮动元素会一行内显示并且元素顶部对齐

一行显示不下的时候会自动换行

2.9.3.3. 浮动元素具有行内块元素的特性

如果是行内元素有了浮动就不需要转换为块级元素或者行内块元素就可以直接给高度和宽度
如果块级盒子没有设定宽度，默认宽度与父级一样宽，但是添加浮动后它的大小根据内容类决定
浮动的盒子中间是没有缝隙的，是紧挨着一起的
行内元素同理

浮动元素经常和标准流父级搭配使用
一般策略是：
先用标准流的父元素排列上下位置，之后内部子集元素采取浮动排列左右位置

浮动布局注意点

浮动和标准流的父盒子搭配。先用标准流的父元素排列上下位置，之后内部子元素采取浮动排列左右位置
一个元素浮动了，其余的兄弟元素也要浮动。
浮动的盒子指挥影响盒子后面的标准流，不会影响前面的标准流。

例子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width: 1200px;
            height: 460px;
            background-color: pink;
            margin: 0 auto;
        }
        .left {
            width: 230px;
            height: 460px;
            background-color: purple;
            float: left;
        }
        .right {
            width: 970px;
            height: 460px;
            background-color: aquamarine;
            float: right;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="left">左侧</div>
        <div class="right">右侧</div>
    </div>
</body>
</html>

例子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        li {
            list-style: none;
        }
        .box {
            width: 1226px;
            height: 285px;
            background-color: red;
            margin: 100px auto ;
        }
        .box li {
            width: 296px;
            height: 285px;
            float: left;
            background-color: green;
            margin-right: 14px;
        }
        .box .last {
            margin-right: 0;
        }
    </style>
</head>
<body>
    <ul class="box">
        <li>1</li>
        <li>1</li>
        <li>1</li>
        <li class="last">1</li>
    </ul>
</body>
</html>

例子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .box {
            width: 1226px;
            height: 615px;
            background-color: aqua;
            margin: 100px auto;
        }
        .left {
            width: 234px;
            height: 615px;
            background-color: red;
            float: left;
        }
        .right {
            width: 992px;
            height: 615px;
            background-color: blueviolet;
            float: left;
        }
        .right>div {
            width: 234px;
            height: 300px;
            background-color: coral;
            float: left;
            margin-left: 14px;
            margin-bottom: 14px;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="left">left</div>
        <div class="right">
            <div>1</div>
            <div>2</div>
            <div>3</div>
            <div>4</div>
            <div>5</div>
            <div>6</div>
            <div>7</div>
            <div>8</div>
        </div>
    </div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        li {
            list-style: none;
        }
        .top {
            height: 50px;
            background-color: gray;
        }
        .banner {
            width: 980px;
            height: 150px;
            background-color: gray;
            margin: 10px auto;
        }
        .box {
            width: 980px;
            height: 300px;
            margin: 0 auto;
        }
        .box li {
            width: 237px;
            height: 300px;
            float: left;
            background-color: gray;
            margin-right: 10px;
        }
        .box .last {
            margin-right: 0;
        }
        .footer {
            height: 200px;
            background-color: gray;
            margin-top: 10px;
        }
    </style>
</head>
<body>
    <div class="top"></div>
    <div class="banner"></div>
    <div class="box">
        <ul>
            <li></li>
            <li></li>
            <li></li>
            <li class="last"></li>
        </ul>
    </div>
    <div class="footer"></div>
</body>
</html>

2.9.4. 清除浮动

父盒子不方便定义高度时
清除浮动元素造成的影响
选择器{clear:属性值;}
left：清除左侧浮动
right：清除右侧浮动
both：两侧都清除
策略：
闭合浮动

额外标签法,在浮动标签最后添加一个额外的标签,额外的标签为块级元素
<div style="clear: both"></div>
父级添加overflow属性
为父级添加overflow属性，将其属性值设置为hidden,auto,scroll
父级添加after伪元素

.clearfix:after {
    content: "";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}
.clearfix {
    /* IE6、7专用 */
    *zoom: 1;
}

父级添加双伪元素

.clearfix:before,
.clearfix:after {
    content: "";
    display: table;
}
.clearfix:after {
    clear: both;
}
.clearfix {
    *zoom: 1;
}

css属性书写顺序

布局定位属性
自身属性
文本属性
其他属性

2.10. 定位

可以让盒子自由的在某个盒子内移动位置或者固定屏幕中的某个位置，并且可以压住其他格子

2.10.1. 定位的组成

定位=定位模式+边偏移

2.10.1.1. 定位模式

position
static：静态定位
默认定位，无定位
普通流

relative：相对定位
相对于原来的位置，
不脱标。原来的位置保留

absolute：绝对定位
相对于祖先元素

没有祖先元素，父元素没有定位（以浏览器为准）
如果祖先元素有定位（相对、绝对、固定定位），以最近一级的有定位的祖先元素为准。
不在保留原来的位置（脱标）

子绝父相

fixed：固定定位
以浏览器的可视窗口为准
不占有原来的位置

固定定位fixed
固定在版心右侧位置

让固定定位的盒子left：50%
让固定定位的margin-left:版心距离的一半

粘性定位sticky
选择器{position: sticky; top: 10px}
以浏览器的可视窗口为参考点
占有原先的位置
必须添加top、left、right、bottom其中的一个
边偏移
top：相对于父元素上边线的距离
bottom：
left：
right：
定位叠放次序z-index
选择器 {z-index:1;}
数值可正可负
如果值相同后来居上
不能加单位
只有定位的盒子才有