CSS学习笔记

最新推荐文章于 2025-06-12 10:53:35 发布

AndyZzz~

最新推荐文章于 2025-06-12 10:53:35 发布

阅读量175

点赞数

分类专栏：前端文章标签： css html

本文链接：https://blog.youkuaiyun.com/weixin_44026604/article/details/106804947

版权

前端专栏收录该内容

7 篇文章

订阅专栏

一、CSS的引入

下列代码展示了CSS引入的四种方式（包括注释部分）：
从上到下，分别是：
内部样式
引入外部样式
导入外部样式
内联样式

<!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 type="text/css">
        h1 {
            color: green;
        }
    </style> -->
    <!-- <link rel="stylesheet" href="Untitled-2.css" /> -->
    <style>
        @import 'Untitled-2.css'
    </style>
</head>
<body>
    <!-- <h1 style="color: red;">abc</h1> -->
    <h1>ABC</h1>
</body>
</html>

二、CSS的基本语法

1、基本结构：
选择器 {
样式名：样式值;
}
2、分号分割样式条，推荐小写

三、CSS选择器

1、通配符选择器：
格式：
*{
…
}
作用：选中页面所有元素，样式对所有元素都生效
用途：一般用于设置一些初始化的公共属性
例如：

<style>
        * {
            background-color: green;
            margin: 0;
            padding: 0;
        }
</style>

2、元素选择器：
使用某个html元素名作为选择器，也叫标签选择器

<style>
    p {
        background-color: green;
        margin: 0;
        padding: 0;
    }
</style>

3、id选择器：
给html标签设置上一个属性值id，这个id在整个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>
        #me {
            color: hotpink;
        }
    </style>
</head>
<body>
    <div id="me">ABC</div>
</body>
</html>

4、类选择器：
有相同的class属性值的都会被选中，class不同id，它可以不唯一，类选择器也可以和元素选择器组合使用
格式：
.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>
        .A {
            color: hotpink;
        }
        .N {
            font-size: 20px;
        }
        p.N {
            color: hotpink;
        }
    </style>
</head>
<body>
    <p class="A">com</p>
    <p class="N">org</p>
</body>
</html>

5、属性选择器
对具有某种属性的元素设置CSS样式
格式：
选择器[属性] {
…
}
[attribute] 选取指定属性的元素
[attribute=value] 选取指定属性和属性值的元素
[attribute~=value] 选取属性值中包含关键字的元素（注意：关键字必须是独立的，即不能有前缀或后缀）
[attribute|=value] 选取属性值以关键字开头（注意：开头关键字与后面字串的连接，中间须有小短杆）

<!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[title="A"] {
            color: red;
        }
        p[title~="C"] {
            color: green;
        }
        p[title|="A"] {
            color: hotpink;
        }
    </style>
</head>
<body>
    <p>PPP</p>
    <p title="A">A</p>
    <p title="B">B</p>
    <p title="A B C">A B C</p>
    <p title="A-B-C">A B C</p>
    <p title="ABC">A B C</p>
</body>
</html>

6、伪类选择器：
通过伪类来选中相应元素的选择器。(伪类是指那些处在一定状态的元素)
常和超链接组合使用：

<!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>
        a:link {
            color: green;
        }
        a:visited {
            color: purple;
        }
        a:hover {
            color: hotpink;
        }
        a:active {
            color: red;
        }
    </style>
</head>
<body>
    <a href="https://www.baidu.com">百度</a>
</body>
</html>

7、派生选择器：
（1）后代选择器：
选择某个元素的后代元素
（2）子元素选择器：
与后代选择器不同，子元素选择器只选择第一级子元素
（3）相邻兄弟选择器：
选择紧跟在一个元素后的兄弟元素

p span { /*后代选择器*/
    color: red;
}

<!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 > span {
            color: red;
        }
    </style>
</head>
<body>
    <p>我是爷爷 
        <span>
            我是父亲
            <span>
                我是孙子
            </span>
        </span>
    </p>
</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>
        span + span {
            color: red;
        }
    </style>
</head>
<body>
    <p>我是爷爷 
        <span>
            我是父亲
            <span>
                我是孙子
            </span>
        </span>
        <span>
            我是祖母
        </span>
    </p>
</body>
</html>

Tip：选择器权重
通配符选择器 < 标签选择器 < 类、伪类、属性选择器 < id选择器 < 内联样式 < 特殊处理

四、CSS常用属性

1、字体：
font-family：定义字体样式

// html
<body>
    <div id="A">fdjghjgdfga</div>
    <div id="B">fdjghjgdfga</div>
</body>

// css
<style>
    #A {
        /* font-family: serif; 衬线字体 */
        /* font-family: monospace;  等宽字体 */
    }
    #B {
        font-family: sans-serif;
    }
</style>

font-size：定义字体大小
font-style: normal / italic(斜体)
font-weight: normal / bold / bolder / lighter / 100 - 900 能被100整除的9个数

可以将上述格式合并，格式按照font: font-family font-size font-style font-weight，例如：
font: italic 30px bold serif（顺序可以任意）

2、文本：
颜色：color，属性为颜色名，rgb，或十六进制表示
行高：line-height，设置文字行间距
对齐：text-align，居中，居左，居右
方向：direction，设置文本方向，值有rtl，ltl
缩进：text-indent，控制文本首行缩进，若空出两个文字长度，css如下：

text-indent: 2em;

装饰线：text-decoration，值有overline,underline
间隔：letter-spacing,设置文本文字间距
阴影：text-shadow，格式为x轴偏移+y轴偏移+模糊距离+阴影颜色

3、尺寸：
（1）宽高：width, height，值有auto，百分比，长度具体数值
（2）最小宽高：min-width, min-height
（3）最大宽高：max-width, max-height

4、列表
（1）list-style-image：控制列表显示的图标
CSS格式：list-style-image: url(…);

（2）list-style-position：控制列表图标显示的位置
CSS格式：list-style-position: inside / outside;

（3）list-style-type：控制列表图标显示的形状
CSS格式：list-style-image: disc / decimal / circle…;

（4）list-style（综合）：几种样式写在一起

5、背景
（1）background-color：设置背景颜色
（2）background-image：设置背景图（默认平铺）
（3）background-repeat：设置X方向平铺(repeat-x)，Y方向平铺(repeat-y)，不平铺（no-repeat）
（4）background-position：设置图片位置，默认为左上角,可为具体值，百分比
CSS控制格式：

<style>
    background-position: right center; /* X居右，Y居中，若Y不明确写也是居中 */
</style>

（5）background-attachment：设置背景图片固定或随页面滚动 fixed（不随页面滑动而滚动） / scroll（随页面滑动而滚动）
（6）background：综合

五、CSS盒模型

1、内边距padding：

<div
        style="padding-top: 10px;">nmd</div>

2、边框border：

<div
    style="border-style: dotted;
    border-width: thick;
    border-color: red;">
nmd</div>

3、外边距margin：
（1）基本属性同padding
（2）重要用法：居中显示

<div   
    style="border: solid;
    width: 200px;
    margin:50px auto;" >
nmd</div>

4、display属性：
块级元素和内联元素的相互转换
（1）display值为block时：块级显示
（2）display值为inline时：内联显示
（3）display值为inline-block时：内联块级显示
（4）display值为none时：隐藏元素

六、CSS浮动

1、浮动
float：left 左浮动
float：right 右浮动

2、清除浮动：
clear属性：
clear：left
clear：right
clear：both

overflow属性——内容较多时怎么显示：
overflow：auto/hidden/scroll

3、常用技巧：

.clearfix:after {
	content: "";
	clear: both;
	display: block;
}

4、双飞翼布局：

<!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>
        .container {
            border: 1px solid black;
            width: 800px;
            margin: 0 auto;
            overflow: auto;
        }
        .center {
            float: left;
            background: yellow;
            width: 100%;
        }
        .left {
            float: left;
            background: green;
            width: 200px;
            margin-left: -100%;
        }
        .right {
            float: left;
            background: pink;
            width: 200px;
            margin-left: -200px;
        }
        .content {
            margin: 0px 200px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="center">
            <div class="content"></div>    
        </div>
        <div class="left">left</div>
        <div class="right">right</div>

    </div>
</body>
</html>

七、CSS定位

1、定位属性：
定位(position)就是控制元素显示的位置，分为绝对定位和相对定位。
默认为static，可改为fixed（不随滚动条滑动而滑动）
z-index
2、相对定位：
相对于原静态位置进行布局
设置relative属性后同时设定位置：left… right…

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>
        .p1 {
            height: 100px;
            background: red;
        }
        .p2 {
            height: 100px;
            background: green;
            position: absolute;
        }
        .p3 {
            height: 100px;
            background: blue;
            position: absolute;
        }
    </style>
</head>
<body>
    <div class="p1">hgsjdfhgjkhdf</div>
    <div class="p2">dfaihefrhfh</div>
    <div class="p3">safdfnbnnskd</div>
</body>
</html>