CSS样式与选择器详解-优快云博客

本文链接：https://blog.youkuaiyun.com/ld525327/article/details/126995917

CSS的优势

内容与表现分离

网页的表现统一，容易修改

丰富的样式，使得页面布局更加灵活

减少网页的代码量，增加网页的浏览速度，节省网络带宽

运用独立于页面的CSS，有利于网页被搜索引擎收录

CSS的基本语法

语法：选择器 { 声明1;声明2;…… }

HTML中引入CSS的三种方式

1、行内样式：使用style属性引入CSS样式

<h1 style="color:red;">style属性的应用</h1>
<p style="font-size:14px; color:green;">直接在标签中设置的样式</p>

2、内部样式表：CSS代码写在<head>的<style>标签中

<style>
        h1{color: green; }
</style>

3、外部样式表：CSS代码保存在扩展名为.css的样式表中，HTML文件引用扩展名为.css的样式表，有两种方式：链接式和导入式

<head>
  <link href="style.css" rel="stylesheet" type="text/css" />
</head>

CSS的基本选择器

1、标签选择器：HTML标签作为标签选择器的名称

2、类选择器

3、ID选择器

CSS的高级选择器

1、层次选择器

语法： body p{ background: red; }

body>p{ background: pink; }

.active+p { background: green; }

.active~p{ background: yellow; }

2、结构伪类选择器

语法：

ul :first-child{
    color: red;
}
ul :last-child{
    color: blue;
}
ul :nth-child(5){
    color: chartreuse;
}
ul li:first-of-type{
    color: darkmagenta;
}
ul li:last-of-type{
    color: aqua;
}
ul li:nth-of-type(2){
    color: blueviolet;
}

3、属性选择器

语法：

a[id] { background: yellow; }
a[id=first] { background: red; }
a[href^=http] { background: red; }
a[href$=png] { background: red; }
a[class*=links] { background: red; }

总结