前端之旅CSS 三万字总结

Posted 2021-12-14 孙不坚1208

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了前端之旅CSS 三万字总结相关的知识，希望对你有一定的参考价值。

一名软件工程专业学生的前端之旅，记录自己对三件套（html、CSS、javascript）、jquery、Node.js、Vue、axios、小程序开发（uniapp）以及各种UI组件库、前端框架的学习。

【前端之旅】Web基础与开发工具
 【前端之旅】HTML 大总结

CSS 三万字总结

一、CSS简介

1、什么是CSS

CSS全称Cascading Style Sheet 层叠样式表

是一组样式设置的规则，用于控制页面的外观样式

2、CSS的好处及作用

可以实现内容与样式的分离，便于开发，样式复用，便于网站的后期维护。
页面的精确控制，让页面更精美。
页面外观美化：字体，颜色，边距，高度，宽度，背景图片，网页定位，网页浮动，布局和定位。

3、CSS的初体验

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS学习</title>
    <!-- <style>可以编写CSS的代码，每一个声明最好以“;”结尾
	语法：
		选择器
				声明1;
				声明2;
				声明3;
			 
	-->
    <style>
        h1
            color: crimson;
        
    </style>

</head>
<body>
    <h1>CSS测试</h1>
</body>
</html>

效果如下：

二、基本用法

1、CSS语法模板

<head>
	<style>
		选择器
			属性名：属性值;
			属性名：属性值;
		
	</style>
</head>

1、CSS的定义是由三个部分构成：
① 选择符（selector）：样式要应用于哪些元素
② 属性（properties）：何种样式，如字体，颜色
③ 属性的取值（value）：样式的取值：如12px
2、基本格式如下：
h1
color: crimson;

（选择符属性:值）
3、如果需要对一个选择符指定多个属性时，用分号将所有的属性和值分开：
p text-align: center; color: red（段落居中排列;并且段落中的文字为红色）

2、CSS引用方式

CSS引用方式有三种方式：

行内样式（直接写在标签内）
内部样式（写在style标签内）
外部样式（使用外部.css文件）

2.1 行内样式

使用HTML标签的style属性定义，只对设置style属性的标签起作用，一般用于测试，不用于实际开发页面中。
优势：直观，很容易区分是给哪个标签添加的样式。
劣势：代码冗余，样式过多的话，代码的可读性很差。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS的引入方式</title>
</head>
<body>
	<p style="color:red;font-size:30px;">我是一个段落标签</p>
</body>
</html>

2.2 内部样式

在页面头部< head > 标签内通过style标签定义，对当前页面中所有符合样式选择器的标签都起作用。

优势：实现了标签和样式的分离，让代码的可读性更高。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS的引入方式</title>
    <style>
        p
            color:red;
            font-size:30px
        
    </style>
</head>
<body>
	<p>我是一个段落标签</p>
</body>
</html>

2.3 外部样式

使用单独的 .css 文件定义，然后在页面中使用 link标签或 @import指令引入，最常用。

引入方式：外部样式（有两种）：链接式和导入式。
优势:实现了html文件和样式的分离，让代码的可读性更高，而且让代码的复用性也更高！

index.css

p
            color:red;
            font-size:30px

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS的引入方式</title>

    <!--第一种：链接式(建议使用)-->
    <!--rel属性是当前HTML页面与链接进来的样式表之间的关系，因此href属性写样式表的路径-->
    <link rel="stylesheet" href="index.css">
	<link rel="stylesheet" href="index.">
    <!--第二种：导入式(不建议使用)-->
    <style>
        @import "index.css";
    </style>

</head>
<body>
	<p>我是一个段落标签</p>
</body>
</html>

2.4 引入方式总结

无论是外部样式，内部样式还是行内样式，都会生效都能起到为标签添加样式，进行布局的作用。但是如果同时使用多种引入方式,就会产生覆盖效果，后写的样式覆盖先写的样式。

一般自己写案例时多使用内部样式，这样进行文件交换只发一个文件比较方便。但在实际开发中我们基本不使用行内样式，使用最多的是外部样式引入方式！

3、选择器

选择器的用处：用于准确的选中元素（就是HTML种讲的标签），并赋予CSS样式。

3.1 标签选择器

作用：根据标签的名字找到标签，但是标签选择器会找到所有同名选择器。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>标签选择器</title>   
    <style>
        /*标签选择器:直接把页面中的所有同名标签当做一个选择器进行选择*/
        p
            color: pink;
        
    </style>
</head>
<body>
	<p>我是段落标签1</p>
	<p>我是段落标签2</p>
</body>
</html>

3.2 类选择器

作用：通过标签的class属性，选择对应的标签元素，类选择器的作用对多个标签（往往需要相同的样式）设置样式，一个标签可以设置多个class值，值与值之间用空格隔开，这个标签会具有所有class包含的样式。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>类选择器</title>
    <style>
        /*类选择器，也称class选择器。通过.进行选择*/
        .p1
            color:red;
        
        .p2
            font-size:60px;
        
    </style>
</head>
<body>
	<p class="p1">我是段落标签1</p>
	<p class="p1 p2">我是段落标签2</p>      
	<p>我是段落标签3</p>
</body>
</html>

3.3 id选择器

作用：通过标签的id属性，选择对应的元素。类选择器可以选择多个，因为class属性不唯一，但是id选择器只能选择一个，因为id是唯一的。

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>id选择器</title>    <style>        /*第三种选择器：id选择器  通过#进行选择*/        #p2            color:blue;            </style></head><body>	<p id="p2">我是段落标签</p></body></html>

3.4 群组选择器、全选择器（通配选择器）

群组选择器是可以同时选择多个标签的选择器,全选择器顾名思义就是选择全部的标签。

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

<head>
    <meta charset="UTF-8">
    <title>群组选择器</title>
    <style>
        /*        群组选择器：不同选择器之间用逗号隔开。        全选择器: 通过*选择全部的标签。        */
        p,
        span 
            color: pink;
        

        * 
            font-size: 50px;
        
    </style>
</head>

<body>
    <p>我是段落标签</p> <span>我是文本标签</span>
    <h1>我是一级标签</h1>
    <h2>我是二级标签</h2>
    <h2>我是三级标签</h2>
</body>

</html>

3.5 层次选择器

层次选择器又分为后代选择器、子代选择器、相邻选择器、兄弟选择器。层次选择器是通过层次嵌套的关系进行选择标签的，块状标签可以嵌套内联标签（行内元素）和其他块状标签；内联标签只能嵌套文本和其他内联标签,但不能嵌套块状标签。

（1）后代选择器

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

<head>
    <meta charset="UTF-8">
    <title>后代选择器</title>
    <style>
        /*后代选择器: 用空格隔开,后代是它里面嵌套的所有标签          此例就是div标签里的所有的ol标签，不管ol里嵌套多少ol，都是div的后代        */
        div ol 
            list-style: none;
        
    </style>
</head>

<body>
    <div>
        <ol>
            <li>我是有序列表1</li>
            <li>我是有序列表2</li>
            <li>我是有序列表3 <ol>
                    <li>我是有序列表11</li>
                    <li>我是有序列表22</li>
                </ol>
            </li>
        </ol>
    </div>
</body>

</html>

（2）子代选择器

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

<head>
    <meta charset="UTF-8">
    <title>子代选择器</title>
    <style>
        /*        子代选择器 用>隔开        子代选择器只能选择他的儿子，在此就是选择id为ul1的无序列表的儿子        上述语法格式中的儿子选择器可以是id选择器、class选择器也可以是标签名选择器         */
        #ul1>li 
            list-style: none;
        
    </style>
</head>

<body>
    <ul id="ul1">
        <li>1</li>
        <li>2</li>
        <li>3 <ul>
                <li>11</li>
                <li>22</li>
                <li>33</li>
            </ul>
        </li>
    </ul>
</body>

</html>

（3）兄弟选择器

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

<head>
    <meta charset="UTF-8">
    <title>兄弟选择器</title>
    <style>
        /*        兄弟选择器:  用~进行选择,只要是有同一个父亲的就称为兄弟        在本例中，id为p2的父亲是body，所以body里的标签都是他的兄弟    	*/
        #p2~p 
            color: pink;
        
    </style>
</head>

<body>
    <p>我是段落标签1</p>
    <p id="p2">我是段落标签2</p>
    <p>我是段落标签3</p>
    <p>我是段落标签4</p>
</body>

</html>

（4）相邻兄弟选择器

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

<head>
    <meta charset="UTF-8">
    <title>相邻兄弟选择器</title>
    <style>
        /*        层次选择器第四种：相邻选择器: 用+进行选择先是找兄弟，然后选择其中相邻的兄弟        */
        #p2+p 
            color: red;
        
    </style>
</head>

<body>
    <p>我是段落标签1</p>
    <p id="p2">我是段落标签2</p>
    <p>我是段落标签3</p>
    <p>我是段落标签4</p>
</body>

</html>

3.6 属性选择器

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

<head>
    <meta charset="UTF-8">
    <title>属性选择器</title>
    <style>
        /*属性选择器:选中所有p标签里有name属性的          本例中如果只想选中“我是段落标签1”，那么就改为p[name="p1"]即可        */
        p[name] 
            color: red;
        
    以上是关于前端之旅CSS 三万字总结的主要内容，如果未能解决你的问题，请参考以下文章 
 前端之旅Webpack模块打包工具
 最新最全Diffusion Models论文代码汇总[三万字总结]
 超详细的MySQL三万字总结
 计算机导论期末知识点及试题总结 [近三万字总结 · 全]
 人类高质量Java基础面试题大全，又是一篇三万字的总结！
 MySQL 三万字精华总结，和面试官扯皮绰绰有余（收藏系列）