致自己：CSS学习笔记一

菜鸟自学编程

已于 2022-03-10 21:32:29 修改

阅读量151

点赞数

分类专栏： CSS学习笔记文章标签： css 学习 css3 前端

于 2022-03-10 21:28:24 首次发布

本文链接：https://blog.csdn.net/sinat_42285508/article/details/123411986

版权

CSS学习笔记专栏收录该内容

6 篇文章 0 订阅

订阅专栏

CSS

1、基础认识

1、CSS（Cascading style sheets）：层叠样式表，主要给HTML标签设置样式。

2、引入方式：行内样式、内部样式、外部样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS</title>
    <!-- 引入外部样式 -->
    <link rel="stylesheet" href="./css/index.css">
    <!-- 内部样式 -->
    <style>
        /* CSS样式 */
    </style>
</head>
<body>
    <!-- 行内样式 -->
    <p style="color: red;font-size: 20px;">段落</p>
</body>
</html>

3、常见属性：

css常见属性	作用
color	文字颜色
font-size	文字大小
background-color	背景颜色
width	宽度
height	高度

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS</title>
    <style>
       p {
           color: pink;
           font-size: 20px;
           background-color: gray;
           width: 100px;
           height: 100px;
       } 
    </style>
</head>
<body>
    <p>段落</p>
</body>
</html>

2、基础选择器

1、标签选择器

1、作用：通过标签名选中页面中对应的标签，设置样式。

2、结构：标签名 {CSS属性名：属性值；}

3、注意点：标签选择器选中的是页面中某一类标签，而不是单独一个标签，标签选择器无论嵌套多深，都能找到对应的标签。

4、示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS</title>
    <style>
       p {
           color: pink;
           font-size: 20px;
           background-color: gray;
           width: 100px;
           height: 100px;
       } 
    </style>
</head>
<body>
    <p>段落</p>
    <div>
        <div>
            <!-- 不管嵌套多深，都可以找到 -->
            <p>段落2</p>
        </div>
    </div>
</body>
</html>

2、类选择器

1、作用：通过类名找到带有这个类名的标签，设置样式。

2、结构：.类名 {CSS属性名：属性值；}

3、注意点：

所有的标签都有class属性
类名是由数字、字母、下划线、中划线组成，但不能以数字或者中划线开头
一个标签可以设置多个类名，类名之间使用空格隔开
类名可以重复，一个类选择器可以同时选中多个标签

4、示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS</title>
    <style>
        /* 一个类选择器可以选中多个标签 */
       .p1 {
           color: pink;
           font-size: 20px;
           background-color: gray;
           width: 100px;
           height: 100px;
       } 
    </style>
</head>
<body>
    <!-- 多个类名使用空格隔开 -->
    <p class="p1 p2">段落1</p>
    <!-- 类名可以重复 -->
    <p class="p1">段落2</p>
</body>
</html>

3、id选择器

1、作用：通过id选中相对应的一个标签，设置样式。

2、结构：#id {CSS属性名：属性值；}

3、注意点：

所有标签都有id属性
id属性类似身份证，在一个页面中只能有一个，不能重复
一个标签只能有一个id属性
一个id选择器只能选中一个标签

4、示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS</title>
    <style>
        /* 一个id选择器只能选中一个标签 */
       #p1 {
           color: pink;
           font-size: 20px;
           background-color: gray;
           width: 100px;
           height: 100px;
       } 
    </style>
</head>
<body>
    <!-- 一个标签只能有一个id属性 -->
    <p id="p1">段落1</p>
    <!-- 一个页面中id属性值不能重复 -->
    <p id="p2">段落2</p>
</body>
</html>

4、通配符选择器

1、作用：选中页面中所有的标签，设置样式。

2、结构：*{CSS属性名：属性值；}

3、代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS</title>
    <style>
        /* 通配符选择器选中页面中所有标签 */
       * {
           color: pink;
           font-size: 20px;
           background-color: gray;
           width: 100px;
           height: 100px;
       } 
    </style>
</head>
<body>
   <p>段落</p>
   <h1>标题1</h1>
   <div>盒子</div>
</body>
</html>

3、字体样式

1、字体大小

1、属性名：font-size

2、取值：数字+px

3、注意点：

谷歌浏览器默认的字体大小是16px
属性值的px单位要加上，否则无效

4、代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS</title>
    <style>
       p {
           /* 谷歌浏览器默认大小16px，不要忘了加px单位 */
           font-size: 20px;
       }
    </style>
</head>
<body>
   <p>段落</p>
</body>
</html>

2、字体粗细

1、属性名：font-weight

2、取值：关键字和数字

关键字	说明	数字
		100
		200
		300
normal	正常	400
		500
		600
bold	加粗	700
		800
		900

3、注意点：

不是所有的字体都提供； 9种粗细，因此部分取值在页面中无变化
实际开发中以正常、加粗使用最多

4、代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>字体样式</title>
    <style>
       #p1 {
           font-size: 20px;
           font-weight: 700;
       }
       #p2 {
           font-size: 20px;
           font-weight: bold;
       }
    </style>
</head>
<body>
   <p id="p1">段落1</p>
   <p id="p2">段落2</p>
</body>
</html>

3、字体样式

1、属性名：font-style

2、取值：normal（正常）、italic（倾斜）。

3、代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>字体样式</title>
    <style>
       #p1 {
           font-size: 20px;
           font-weight: 700;
           font-style: normal;
       }
       #p2 {
           font-size: 20px;
           font-weight: bold;
           font-style: italic;
       }
    </style>
</head>
<body>
   <p id="p1">段落1</p>
   <p id="p2">段落2</p>
</body>
</html>

4、常见字体系列

1、无衬线字体：sans-serif

特点：文字笔画粗细均匀、并且首尾无装饰
场景：网页中大多采用无衬线字体
常见改系列字体：黑体、Arial

2、衬线字体：serif

特点：文字笔画粗细不均匀，并且首尾有笔锋装饰
场景：报刊书籍中使用广泛
常见该系列字体：宋体、Times New Roman

3、等宽字体：monospace

特点：每个字母或文字的宽度相等
场景：一般用于程序代码编写，有利于代码的阅读和编写
常见该系列字体：Consolas、fira code

5、字体类型

1、属性名：font-family

2、取值：字体1，字体2，字体3…字体系列

3、渲染规则：从左到右按顺序查找，如果系统中没有安装该字体，则查找下一个字体，如果都不支持，此时会根据操作系统显示最后系列的默认字体。

4、注意点：

如果字体名称存在多个单词，使用引号引起来
最后一项字体系列不需要引号包裹
网页开发中尽量使用常见字体

5、示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>字体样式</title>
    <style>
       #p1 {
           font-size: 20px;
           font-weight: 700;
           font-style: normal;
           font-family: 微软雅黑, 黑体, sans-serif;
       }
       #p2 {
           font-size: 20px;
           font-weight: bold;
           font-style: italic;
           font-family: 楷体, 黑体, sans-serif;
       }
    </style>
</head>
<body>
   <p id="p1">段落1</p>
   <p id="p2">段落2</p>
</body>
</html>

6、样式层叠问题

1、给同一个标签设置相同的样式，此时样式会层叠（覆盖），写在最下面的会生效。

2、示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>字体样式</title>
    <style>
       p {
           font-size: 20px;
           font-weight: 700;
           font-style: normal;
           font-family: 微软雅黑, 黑体, sans-serif;
       }
       /* 最下面的样式生效 */
       p {
           font-size: 30px;
           font-weight: bold;
           font-style: italic;
           font-family: 楷体, 黑体, sans-serif;
       }
    </style>
</head>
<body>
   <p id="p1">段落</p>
</body>
</html>

7、字体所有样式简写

1、简写方式：font：style weight size family；

2、代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>字体样式</title>
    <style>
        /* 字体简写属性 */
       p {
           font:italic bold 20px 楷体;
       }
    </style>
</head>
<body>
   <p id="p1">段落</p>
</body>
</html>

4、文本样式

1、文本缩进

1、属性名：text-indent

2、取值：数字+px，数字+em（推荐，1em=当前标签的font-size的大小）

3、示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文本样式</title>
    <style>
        p {
            /* text-indent: 50px; */
            /* 首行缩进2个字的大小 */
            /* 默认字号: 16px ; 32 */
            /* text-indent: 40px;
            font-size: 20px; */

            /* em: 一个字的大小 */
            text-indent: 2em;
            font-size: 40px;
        }
    </style>
</head>
<body>
    <p>我们的社交圈子在扩大，交往常常目的明确，点个头的熟人渐渐多了，交心的友人却渐渐少了，是人们的情感出了问题，还是发达的通信惹的祸？我们的友情像快餐一样，来得快，去得快，我们抱怨知音难觅，却没有想一想我们花了多少时间和心情去经营友情。我决定把自己手机里居住的朋友再迁移到纸质笔记本中，备一份。能被人备份号码，友谊也就被备份了，如果对方也会像你一样，把你的电话号码备一份，你们的友情就会在浪潮汹涌过后，成为留在岸上的最值得珍藏的贝壳。而你我，不再只是住在对方手机里的朋友，而是住在对方的生活里，甚至生命里。</p>
</body>
</html>

2、文本水平方向对齐

1、属性名：text-align

2、取值：

取值	说明
left	左对齐
center	居中对齐
right	右对齐

3、示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>字体样式</title>
    <style>
        #p1 {
            background-color: pink;
            text-align: left;
        }
        #p2 {
            background-color: skyblue;
            text-align: center;
        }
        #p3 {
            background-color: deeppink;
            text-align: right;
        }
    </style>
</head>
<body>
   <p id="p1">段落</p>
   <p id="p2">段落</p>
   <p id="p3">段落</p>
</body>
</html>

3、文本修饰

1、属性名：text-decoration

2、取值：

取值	说明
none	默认值，无装饰
overline	上划线
line-through	删除线
underline	下划线

3、示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>字体样式</title>
    <style>
        h1 {
            text-decoration: overline;
        }
        h2 {
            text-decoration: line-through;
        }
        h3 {
            text-decoration: underline;
        }
    </style>
</head>
<body>
   <h1>标题1</h1>
   <h2>标题2</h2>
   <h3>标题3</h3>
</body>
</html>

4、line-height行高

1、作用：控制一行的上下行间距

2、属性名：line-height

3、取值：数字+px、倍数

4、应用：

让文本垂直居中可以设置line-height值为父元素的高度
网页精准布局，可以设置line-height值为1 ，取消上下间距

5、行高与font连写：如果同时设置了行高和font连写，主要覆盖问题

font：style weight size/line-height font-family；

6、代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文本样式</title>
    <style>
        p {
            /* line-height: 50px; */
            /* 自己字号的1.5倍 */
            /* line-height: 1.5; */

            /* 66px 宋体 倾斜 加粗 行高是2倍 */
            font: italic 700 66px/2 宋体;
        }
    </style>
</head>
<body>
    <p>我们的社交圈子在扩大，交往常常目的明确，点个头的熟人渐渐多了，交心的友人却渐渐少了，是人们的情感出了问题，还是发达的通信惹的祸？我们的友情像快餐一样，来得快，去得快，我们抱怨知音难觅，却没有想一想我们花了多少时间和心情去经营友情。我决定把自己手机里居住的朋友再迁移到纸质笔记本中，备一份。能被人备份号码，友谊也就被备份了，如果对方也会像你一样，把你的电话号码备一份，你们的友情就会在浪潮汹涌过后，成为留在岸上的最值得珍藏的贝壳。而你我，不再只是住在对方手机里的朋友，而是住在对方的生活里，甚至生命里。</p>
</body>
</html>

5、颜色常见取值

1、属性名：

文字颜色：color
背景颜色：background-color

2、属性值：

颜色表示方式	表示含义	属性值
关键字	预定义的颜色名	red、green、blue…
rgb表示法	红绿蓝三原色，每项取值范围：0-255	rgb(0,0,0),rgb(255,255,255)…
rgba表示法	红绿蓝三原色+a透明度，透明度取值范围0-1,0表示完全透明，1表示完全不透明	rgb(0,0,0,0.5),rgb(255,255,255,0.8)…
十六进制表示法	#开头，将数字转换为16进制	#000000，#25f010,简写：#000，#fff,#FFF

加油，坚持！

菜鸟自学编程

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
致自己：CSS学习笔记一

CSS1、基础认识1、CSS（Cascading style sheets）：层叠样式表，主要给HTML标签设置样式。2、引入方式：行内样式、内部样式、外部样式<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name
复制链接

扫一扫

专栏目录