html之CSS设计（四种引入方式、各种选择器）

文章目录

一、CSS简介
二、四种引入方式
三、CSS选择器
四、练习代码

本文主要介绍一下CSS的基本操作，四中引入方式和选择器、属性选择器的使用

一、CSS简介

1、介绍：
也叫层叠样式表，用来控制网页数据的表现，可以使网页的表现与数据内容分离。简单来说就是控制网页样式的。

2、CSS的学习方向

怎么找标签（选择器）
如何操作标签对象（element）

二、四种引入方式

1、style属性

<div style="color:red; background:yellowgreen">第一种引入方式</div>

缺点：耦合性太强了，导致独立性变弱，代码都杂糅到一起了

2、style标签

<style>p{color:red;font-size:40px;}a{text-decoration:none;}</style>

以上代码就是对p标签和a标签进行样式设置

3、链接式引入
即使用link自闭和标签引入CSS文件
首先创建一个CSS文件：

在里面写入Style标签里同样的内容，即设置样式，请参照下文的选择器部分。
然后就是将文件链接进到需要操作的html文件：

<link href="test1.css" rel="stylesheet">

4、导入式引入

<style>@import "test1.css";</style>

显然以上几种方式中，链接式引入是最好用的，它不限制渲染文件的个数，修改起来也方便，独立性强不冗余

三、CSS选择器

1、选中所有标签

*{color:red;}

2、选中所有div标签

div{color:red;}

3、选中某个id下的标签

#first_p{font-size:40px;}

4、选中某个class下的标签

.class_name{background:aqua;}

5、只有class也可以精确定位

div.class_name2{font-size:60px;}

6、组合选择

#first_div,div.class_name3{background:darkgray;}

7、嵌套里的定位

.class_name4 div p{background:rebeccapurple;}

此段代码表示在类名为class_name4里的div标签里的p标签
嵌套规则：

块级元素可以包含内联元素或某些块级元素，但内联元素不能包含块级元素，它只能包含其它内联元素。
有几个特殊的块级元素只能包含内联元素，不能包含块级元素。如h1,h2,h3,h4,h5,h6,p,dt
块级元素与块级元素并列、内联元素与内联元素并列。

特殊：<p>标签内加<div>标签不会有效果
span标签：
<span>标签与<div>标签非常类似，是初始状态没有任何效果的一类标签

8、属性选择器（以下都可以省略E）
即通过自定义属性来查找和定位的选择器

E[att] 匹配所有具有att属性的E元素，不考虑它的值，此处E可以省略
E[att=val] 匹配所有att属性等于“val”的E元素
E[att~=val] 匹配所有att属性具有多个空格分隔的值、其中一个值等于“val”的E元素
E[attr^=val] 匹配属性值以指定值开头的每个元素
E[attr$=val] 匹配属性值以指定值结尾的每个元素
E[attr*=val] 匹配属性值中包含指定值的每个元素

四、练习代码

1、CSS选择器

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>/**{color:red;}*/#first_p{font-size:40px;}.class_name{background:aqua;}div.class_name2{font-size:60px;}#first_div,div.class_name3{background:darkgray;}.class_name4 div p{background:rebeccapurple;}.class_name4 + div{background:yellow;}</style>
</head>
<body>
I am in body label<p>I just in p label</p>
<div class="class_name">I am in div label</div>
<p id="first_p" class="class_name">I have id number and class name</p>
<div class="class_name2">竟然用class精确定位到我了</div>
<div class="class_name3">组合选择1</div>
<div id="first_div">组合选择2</div><div>before div</div>
<div class="class_name4"><div><a href="">打我呀</a><p>I am insert p label</p></div>
</div>
<div>after div</div></body>
</html>

2、属性选择器

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>[viewin]{color:red;}[viewin="ok2"]{font-size:30px;}[viewin~="duo2"]{color:blue;}[viewin^="sao"]{background:pink;}[viewin$="a"]{background:burlywood;}[viewin*="j"]{background:yellow;}</style>
</head>
<body><!--属性选择器-->
<div viewin="ok">鸡排饭</div>
<div viewin="ok2">培根炒饭</div>
<div viewin="duo duo2 duo3">多多多</div>
<div viewin="sao1 sao2 sao3">扫扫扫</div>
<div viewin="hahaha">哈哈哈</div>
<div viewin="ghijklmn">啥值我都能匹配</div></body>
</html>