初识CSS（详细版）

文章目录

CSS是什么
基本语法规范
引入方式
- 内部样式表
- 行内样式表
- 外部样式
代码风格
选择器的种类
- 基础选择器：单个选择器构成
- - 标签选择器
  - 类选择器
  - id选择器
  - 通配符选择器
  - 小结
- 复合选择器：把多种基础选择器综合运用起来
- - 后代选择器
  - 伪类选择器
  - - 链接伪类选择器
    - :force 伪类选择器
  - 小结
常见元素属性
- 字体属性
- 文本属性
- 背景属性
- 圆角矩形

CSS是什么

CSS全称叫：层叠样式表 (Cascading Style Sheets)，CSS 能够对网页中元素位置的排版进行像素级精确控制，实现美化页面的效果，能够做到页面的样式和结构分离

总的来说：

1、css控制页面的展示效果

2、html决定页面结构

基本语法规范

选择器 + {一条/N条声明}
1、选择器决定针对谁修改 (找谁)
2、声明决定修改啥(干啥)
3、声明的属性是键值对，使用 ; 区分键值对，使用 : 区分键和值

注意：
1、CSS 要写到 style 标签中(后面还会介绍其他写法)
2、style 标签可以放到页面任意位置，一般放到 head 标签内
3、CSS 使用 /* */ 作为注释(使用 ctrl + / 快速切换)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS</title>
    <!-- style一般放在head中 -->
    <style>
        /* 这个是注释 */

        /* p是选择器，color等是声明 */
        p {
            /* 设置字体颜色 */
            color: red;
            /* 设置字体大小 */
            font-size: 40px;
        }
    </style>
</head>
<body>
    <p>hello world</p>
    <p>你好</p>
    <h1>你好</h1>
</body>
</html>

引入方式

内部样式表

将css嵌入到 html 页面中，写在 style 标签中，理论上来说 style 放到 html 的哪里都行，但是一般都是放到 head 标签中，这种写法不常用

优点：这样做能够让样式和页面结构分离
缺点：分离的还不够彻底，尤其是 css 内容多的时候

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS</title>
    <!-- 将style放到head中 -->
    <style>
        p {
            color: red;
            font-size: 40px;
        }
    </style>
</head>

行内样式表

通过 style 属性，来指定某个标签的样式，这种写法只适合于写简单样式，针对某个标签生效，并且这种写法优先级较高，会覆盖其他的样式

缺点: 不能写太复杂的样式

<body>
    <!-- 行内优先级高 -->
    <p style="color: green;">hello world</p>
    <p>你好</p>
    <!-- 行内样式表 -->
    <h1 style="color: blue; font-size: 40px;">你好</h1>
</body>

外部样式

实际开发中最常用的方式

创建一个 css 文件.
使用 link 标签引入 css

<link rel="stylesheet" href="[CSS文件路径]">

优点：样式和结构彻底分离了
缺点：受到浏览器缓存影响, 修改之后不一定立刻生效

关于缓存:
这是计算机中一种常见的提升性能的技术手段
网页依赖的资源(图片/CSS/JS等)通常是从服务器上获取的，如果频繁访问该网站，那么这些外部资源就没必要反复从服务器获取，就可以使用缓存先存起来(就是存在本地磁盘上了)，从而提高访问效率
可以通过 ctrl + F5 强制刷新页面, 强制浏览器重新获取 css 文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=p, initial-scale=1.0">
    <title>外部样式引入</title>
    <!-- rel表示引入的文件是样式表，href表示路径 -->
    <link rel="stylesheet" href="./html02.css">
</head>
<body>
    <p>hello css</p>
</body>
</html>

p {
    color: red;
    font-size: 40px;
}

代码风格

样式大小写：CSS不区分大小写，但开发时统一使用小写字母

空格规范：冒号后面带空格，选择器和 { 之间也有一个空格

选择器的种类

选择器要先选中指定的元素，才能设置元素属性

基础选择器：单个选择器构成

标签选择器

能快速为同一类型的标签选择出来，但不能差异化选择

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=p, initial-scale=1.0">
    <title>外部样式引入</title>
    <!-- rel表示引入的文件是样式表，href表示路径 -->
    <link rel="stylesheet" href="./html02.css">
</head>
<body>
    <p>hello css</p>
    <p>hello html</p>
    <p>hell JavaScript</p>
    <h2>这是h2标题</h2>
</body>
</html>

p {
    color: red;
    font-size: 40px;
}

类选择器

差异化表示不同标签，多个标签可以使用统一标签

类名用 . 开头的，下方的标签使用 class 属性来调用，一个类可以被多个标签使用，一个标签也能使用多个类(多个类名要使用空格分割, 这种做法可以让
代码更好复用)，如果是长的类名，可以使用 - 分割，不要使用纯数字、中文以及标签名来命名类名

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>选择器</title>
    <link rel="stylesheet" href="./html03.css">
</head>
<body>
    <!-- class命名类名 -->
    <p class="eat">吃饭</p>
    <p class="sleep">睡觉</p>
    <!-- 多个类名要使用空格分割 -->
    <!-- 可以多个命名，从而进行样式叠加，如果出现同一样式多个声明，以最后的声明定义生效 -->
    <p class="typing code">打代码</p>
</body>
</html>

/* .开头，接class类名 */
.eat {
    color: red;
}

.sleep {
    color: green;
}

.code {
    color: blue;
}

.typing {
    color: red;
    font-size: 40px;
}

id选择器

在CSS 中使用 # 开头表示 id 选择器，id 选择器的值和 html 中某个元素的 id 值相同，html 的元素 id 不必带 #，id 是唯一的，不能被多个标签使用 (是和类选择器最大的区别)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>选择器</title>
    <link rel="stylesheet" href="./html03.css">
</head>
<body>
    <p id="front">前端开发</p>
    <p id="server">后端开发</p>
</body>
</html>

/* #开头，接id名字 */
#front {
    color: red;
}

#server {
    color: green;
}

通配符选择器

使用 * 的定义，不需要被页面结构调用，选取所有的标签，主要用来争对页面中所有元素默认样式进行消除，主要用来消除边距

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>选择器</title>
    <link rel="stylesheet" href="./html03.css">
</head>
<body>
    <p id="haha">哈哈哈哈</p>
    <p id="fr">前端开发</p>
</body>
</html>

#haha {
    color: red;
}

/* *开头，接花括号 */
* {
    background-color: beige;
}

小结

	作用	特点
标签选择器	能选出所有相同标签	不能差异化选择
类选择器	能选出一个或多个标签	根据需求选择，最灵活，最常用
id选择器	能选出一个标签	同一个id在一个HTML中只能出现一次
通配符选择器	选出所有标签	特殊情况下使用

复合选择器：把多种基础选择器综合运用起来

后代选择器

又叫包含选择器，选择某个父元素中的某个子元素

样式：元素1 元素2 {样式声明}

元素 1 和元素 2 要使用空格分割
元素 1 是父级，元素 2 是子级，只选元素 2，不影响元素 1

<!-- 修改ol的颜色，不改变ul的颜色 -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>选择器</title>
    <style>
        /* 会全部变颜色 */
        /* li {
            color: red;
        } */
        /* 后代选择器 */
        /* 方法1:类名 */
        /* .red {
            color: red;
        } */
        /* 方法2:修改ol中的li */
        /* ol li {
            color: red;
        } */
        /* 方法3:组合选择器 */
        /* .hobby li {
            color: red;
        } */
        /* 方法4:爷爷和孙子 */
        ol a {
            color: red;
        }
    </style>
</head>
<body>
    <ul>
        <li>吃饭</li>
        <li>睡觉</li>
        <li>打代码</li>
    </ul>
    <ol class="hobby">
        <li class="red">吃饭</li>
        <li class="red">睡觉</li>
        <li class="red">
            <a href="#">打代码</a>
        </li>
    </ol>
</body>
</html>

伪类选择器

用来定义元素状态

链接伪类选择器

a：link 选择未被访问过的链接
a：visited 选择已经被访问过的链接
a：hover 选择鼠标指针悬停上的链接
a：active 选择活动链接(鼠标按下了但是未弹起)

如何让一个已经被访问过的链接恢复成未访问的状态?
清空浏览器历史记录即可，快捷键为：ctrl + shift + delete

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>选择器</title>
    <style>
        a {
            color: black;
        }
        /* 选择鼠标指针悬停上的链接 */
        a:hover {
            color: red;
        }
        /* 选择活动链接(鼠标按下了但是未弹起) */
        a:active {
            color: green;
        }
    </style>
</head>
<body>
    <a href="#">不跳转</a>
</body>
</html>

:force 伪类选择器

选取获取焦点的 input 表单元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>选择器</title>
    <style>
        /* 被选中的表单的字体就会变成红色 */
        .three>input:focus {
            color: red;
        }
    </style>
</head>
<body>
    <div class="three">
        <input type="text"><br>
        <input type="text"><br>
        <input type="text"><br>
        <input type="text">
    </div>
</body>
</html>

小结

选择器	作用
后代选择器	选择后代元素，可以是孙子元素
链接伪类选择器	选择不同状态的链接
:force 伪类选择器	选择被选中的元素

更多选择器的学习可以通过以下链接进行学习：

CSS 选择器参考手册 (w3school.com.cn)

常见元素属性

元素有很多，不用硬背，借助参考文档学习：CSS 参考手册 (w3school.com.cn)

字体属性

font-family：设置字体

font-size：字体大小

font-weight：字体粗细

normal：默认值

bold：粗体

bolder：更粗的字体

lighter：更细的字体

100（数字）：数字越大越粗

inherit：从父元素继承字体

font-style：字体倾斜度

normal：默认值，不倾斜

italic：斜体

oblique：倾斜字体

inherit：从父元素继承字体

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>字体属性</title>
    <style>
        div {
            /* 如果字体相关修改写错的话,会显示默认的大小 */
            /* 字体修改可以写中文,但不推荐 */
            font-family: '宋体';
            /* 字体大小 */
            font-size: 40px;
            /* 字体粗细 */
            font-weight:700;
            /* 字体样式 */
            font-style: italic;
        }
    </style>
</head>
<body>
    <div>这是宋体</div>
</body>
</html>

文本属性

color：设置字体颜色

预定义的颜色值：直接是单词
（最常用） 十六进制形式：每两位表示一种三原色(可以简写成3个16进制数)，三原色顺序为红绿蓝，数字越大颜色越深

RGB 方式：和十六进制形式一样，变成3个 0-255 的值

text-align：控制文字水平方向对齐

center: 居中对齐
left: 左对齐
right: 右对齐

text-decoration：表示文本装饰

underline 下划线 [常用]
none 啥都没有，可以给 a 标签去掉下划线
overline 上划线 [不常用]
line-through 删除线 [不常用]

text-indent：控制文本缩进

单位可以使用 px 或者 em
使用 em 作为单位更好，1 个 em 就是当前元素的文字大小
缩进可以是负的，表示往左缩进(会导致文字就冒出去了)

line-height：表示行高，上下文之间的基线距离

行高 = 上边距 + 下边距 + 字体大小

行高也可以取 normal 等值

行高等与元素高度，就可以实现文字居中对齐

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文本属性</title>
    <style>
        .color {
            font-size: 40px;
            /* 直接写颜色名称 */
            color: red;
            /* 16进制表示颜色,两位表示一种三原色(可以简写成3个16进制数) */
            /* 表示的颜色顺序为红绿蓝,数字越大颜色越深 */
            color: #0000ff;
            /* 和上面的表示方法是一样的 */
            color: rgb(0, 255, 0); 
        }
        h1 {
            text-align: left;
            text-decoration: overline;
        }
        h2 {
            text-align: center;
            text-decoration: line-through;
        }
        h3 {
            text-align: right;
        }
        p {
            text-indent: 2em;
            text-decoration: underline;
            line-height: 50px;
        }
        a {
            text-decoration: none;
        }
    </style>
</head>
<body>
    <div class="color">这是文本属性</div>
    <h1>靠左</h1>
    <h2>居中</h2>
    <h3>靠右</h3>
    <!-- lorem 可以生成一大串文字 -->
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Explicabo perspiciatis sunt molestiae porro cum quaerat tempore neque, voluptatibus dolorem ipsam vero at quam praesentium. Labore, atque? Aperiam a asperiores libero?</p>
    <a href="#">不跳转</a>
</body>
</html>

背景属性

背景颜色和图片：

background-color：设置背景颜色

background-image: url(……)：设置背景图片

比 image 更方便控制位置(图片在盒子中的位置)
注意：

url 不要遗漏，url 可以是绝对路径，也可以是相对路径，url 上可以加引号，也可以不加

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>背景属性</title>
    <style>
        /* 全局换背景色 */
        body {
            background-color: #6fb7e7e7;
        }
        /* 添加div的背景图片 */
        div {
            font-size: 40px;
            background-image: url(./img.png);
            width: 500px;
            height: 400px;
        }
    </style>
</head>
<body>
    <div>
        这是我学习背景属性
    </div>
</body>
</html>

background-repeat：设置背景平铺方式

重要取值:
repeat：平铺（默认）
no-repeat：不平铺
repeat-x：水平平铺
repeat-y：垂直平铺
背景颜色和背景图片可以同时存在. 背景图片在背景颜色的上方

<!-- 在上述代码的基础上修改 -->
<style>
    /* …… */
    div {
        font-size: 40px;
        /* background-image: url(./img.png); */
        background-image: url(../Html/female.png);
        background-repeat: repeat-y;
        width: 700px;
        height: 400px;
    }
</style>

background-position：修改背景图片的位置

参数有三种风格:

方位名词: (top, left, right, bottom)

精确单位: 坐标或者百分比(以左上角为原点)

混合单位: 同时包含方位名词和精确单位

关于坐标系:
计算机中的平面坐标系, 一般是左手坐标系

<style>
    /* …… */
    div {
        /* …… */
        /* 设置背景图片位置 */
        /* 坐标 */
        background-position: 200px 200px;
        /* 方位名词 */
        background-position: top;
        /* 混合 */
        background-position: 100px center;
    }
</style>

background-size：设置背景尺寸

1、可以填具体的数值：如 40px 60px 表示宽度为 40px，高度为 60px
2、可以填百分比：按照父元素的尺寸设置.
3、cover：把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。背景图像的某些部分也许无法显示在背景定位区域中。
4、contain：把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域

    <style>
        /* …… */
        div {
            /* …… */
            /* 设置背景图片尺寸 */
            /* 具体数值 */
            background-size: 700px 400px;
            /* cover */
            background-size: cover;
            /* contain */
            background-size: contain;
        }
    </style>

圆角矩形

通过 border-radius 使边框带圆角效果

border-radius: length（length 是内切圆的半径，数值越大，弧线越强烈）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>圆角矩形</title>
    <style>
        div {
            width: 400px;
            height: 200px;
            border: 2px red solid;
            /* 圆角矩形 */
            border-radius: 20px;
            /* 生成圆角矩形 */
            /* 让 border-radius 的值为矩形高度的一半即可 */
            border-radius: 100px;
            /* 也可以用百分比表示 */
            border-radius: 50%;

            /* 生成圆形 */
            width: 200px;
            height: 200px;
            /* 让 border-radius 的值为正方形宽度的一半 */
            border-radius: 100px;

            /* 展开写法,对四个角分别设置 */
            border-top-left-radius:10px;
            border-top-right-radius:20px;
            border-bottom-right-radius:30px;
            border-bottom-left-radius:40px;
            /* 等价于(顺时针排列) */
            border-radius: 10px 20px 30px 40px;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

这就是CSS的基本内容啦！