【Web前端HTML5&CSS3】——CSS语法与选择器（超级全面）

一颗_豆芽菜

已于 2022-12-07 22:16:25 修改

阅读量264

点赞数 1

文章标签： css 前端 css3

于 2022-12-05 08:00:00 首次发布

本文链接：https://blog.csdn.net/beans_blog/article/details/128163259

版权

史上最全面选择器！！！

摘要由CSDN通过智能技术生成

一、CSS语法

1. CSS简介

层叠样式表

网页实际上是一个多层的结构，通过CSS可以分别为网页的每一个层来设置样式，而最终我们能看到只是网页的最上边一层
总之一句话，CSS用来设置网页中元素的样式
使用CSS来修改元素样式的方式大致可以分为3种

内联样式（行内样式）

<p style="color:red;font-size:60px;">内联样式（行内样式）</p>

style（样式）:在标签内部通过style属性来设置元素的样式
color（颜色）
font-size（字体-大小）
问题：使用内联样式，样式只能对一个标签生效。
如果希望影响到多个元素，必须在每一个元素中都复制一遍
当样式发生变化时，我们必须要一个一个的修改，非常的不方便。（注意：开发时绝对不要使用内联样式）

内部样式表

<head>
<style>
p{
    color:green; 
    font-size:50px;
}
</style>
</head>

将样式编写到head中的style标签里然后通过css的选择器来选中元素并为其设置各种样式可以同时为多个标签设置样式，并且修改时只需要修改一处即可,内部样式表更加方便对样式进行复用
问题：我们的内部样式表只能对一个网页起作用，它里边的样式不能跨页面进行复用

外部样式表

p{color:pink;font-size:520px;}

上面表示在一个后缀为.css的文件中输入样式表

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet"href="./1.css">
</head>
<body>
    <p>我是p</p>
</body>
</html>

外部样式表需要通过link标签进行引入，意味着只要想使用这些样式的网页都可以对其进行引用使样式，可以在不同页面之间进行复用
将样式编写到外部的CSS文件中，可以使用到浏览器的缓存机制，从而加快网页的加载速度，提高用户的体验。

2. CSS基本语法

常见属性

font-size：字体大小，一般单位为px（像素），不同浏览器字体默认大小可能不同，所以全文字体都要改大小，用body{}等改大小时，h标签的大小不会改变，要另外用h{}改大小

font-family：字体类型，有空格的字体类型要用“”包裹，如“Microsoft YaHei”

有的电脑上会没有一些字体，所以此属性值可以有多个，用逗号隔开，前面的字体没有时会用后面的字体

font-weight：字体粗细属性值有默认为normal，bold（粗体）等不常用，常用数字作为属性值，400等同于normal，700等同于bold，注意数字无单位

font-style：字体风格分为normal和italic（斜体）

line-height:行高（一行的间距，包括上间距、文字高度、下间距），单位带不带px都可以

复合属性：可以把font属性写到一起，但必须依照严格的顺序，不同属性间用空格隔开，其中font-size和font-family是必须写的,否则font不起作用

顺序为：font: font-style font-weight font-size/line-height font-family，例：
body{ font: italic 700/20 16px “Microsoft yahei” }
color：颜色，最常用十六进制

background-color：背景颜色

text-align：文本对齐，有三个属性值分别为left，center，right<