css入门，语法，结构，选择器，优先级。

最新推荐文章于 2024-10-13 08:49:06 发布

忘川舟遥客

最新推荐文章于 2024-10-13 08:49:06 发布

阅读量196

点赞数

分类专栏：笔记文章标签： css css3 html html5

本文链接：https://blog.csdn.net/qq_44715164/article/details/108674415

版权

笔记专栏收录该内容

4 篇文章 0 订阅

订阅专栏

css简单介绍

CSS：Cascading Style Sheets：层叠样式表。
简而言之，css就是网页的样式设计。在学习css之前我们先了解一下Web标准，Web标准是W3C制作的关于网页的一整套标准，简言之：HTMl：负责网页的内容和结构；CSS负责网页的样式：JavaScript负责交互效果。
html是写我们网页的结构，网页有了结构，需要样式，就像人们穿的衣服一样，根据自己想要的效果设计网页的css样式。
其他关于css发展历程，兼容等内容请自行了解。

css基本语法

语法结构

css三件套：1：选择器（selector），2：属性（properties），3：属性值（value）。
结构：
选择器{
属性：属性值；
}

三种引入css的方式

一：行内式

在html标签里面添加style属性，属性值写css样式。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<!-- 设置div样式：字体颜色为红色；字体大小20像素 -->
		<div style=" color:red;font-size:20px; ">行内式引入例子</div>
	</body>
</html>

二：内部式

在html网页里面添加style标签，标签内写css样式。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
        <title></title>
        <style>
            div{
                color: red;
                font-size: 20px;
            }
        </style>
	</head>
	<body>
		<div>行内式引入例子</div>
	</body>
</html>

三：外链式

建立.css的文件，在.html文件里面使用link标签引入.css文件。
建立index.html文件写内容结构

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
        <title></title>
        <link rel="stylesheet" href="index.css"/>
	</head>
	<body>
		<div>行内式引入例子</div>
	</body>
</html>

外部建立index.css文件写样式

div{
	color:red;
	font-size:20px;
}

三大css选择器

行内样式针对标签写样式，不需要选择器。
内部式和外部式需要使用选择器进行匹配，选择给哪个对象写样式，对症下药。

基础选择器

一：通用选择器 *

给页面所有元素设置样式，一般不使用。

*{
	color:red;
}

二：ID选择器

html标签设置id名，选择id名进行匹配。
注意：id为唯一，就像人一样（身份证号码），都是单独的，没有第二个一模一样的人。

#myname{
	color:red;
}

三：类选择器 .

html标签设置class类名，选择class类名进行匹配。
注意：class类，就像一类人，这类人可以式一个，也可以是很多个。

.name{
	color:red;
}

四：标签选择器

直接选择标签添加样式

div{
	color:red;
}

五：选择器分组，

将样式给很多个选择器共用。
注意：不是单个匹配的选择器，是并列选择器，使这些并列的这些选择器共用样式。选择器之间用逗号，隔开

#myname，.name,div{
	color:red;
}

层次选择器

层次可以抽象的分为：父亲，儿子，孙子。。。

<div class="父亲">
	<div claas="儿子1">
		<div class="孙子">
			...
		</div>
	</div>
	<div class="儿子2">
	</div>
</div>

如上述：父亲只有一个，儿子有两个，孙子也有一个。
css父亲只有一个，儿子，孙子，可以有多个。

后代选择器

选择器1 选择器2{
	color:red;
}

上例：选择器之间用空格隔开，选择器1是父亲，匹配了所有选择器2（可以是儿子，也可以是孙子），后代选择器就是匹配所有的同辈的后代。不限层级！

子选择器

选择器1>选择器2{
	color:red;
}

上例：选择器之间用>隔开，选择器1只能匹配他的所有选择器2（只能是儿子），子选择器就是匹配所有儿子。只能是下一代！

伪类选择器

语法：

选择器：伪类{
	color:red;
}

简单来理解：匹配具有某个特点(特征\属性)的元素。
常用的伪类选择器：
a标签四种状态
a:link{ 访问前 }
a:hover{ 鼠标悬停时 }
a:active{ 鼠标激活}
a:visited{ 访问后 }
hover可用于其他标签

a:hover{
	color:red;
}

上例：鼠标指向a标签时，a标签颜色变成红色。

继承和优先级

继承

对有层级关系的选择器，最外层元素（父亲元素）的一些属性是可以继承给内层元素的（后代元素），或者说是后代元素的一些属性是来自于父亲元素的。
哪些元素可以继承呢：文本相关样式和列表相关样式。
注：下一章将介绍所有的css样式内容。

优先级

css优先级就是选择器的优先级：优先级越高，就使用优先级高的样式。
优先级用于与项目开发层级较深的时候，处理继承的问题。
#id>.class>标签选择器
权值越高，优先级越高。id权值为100，class10，标签1。
拓展：!important（无限大） > 行内样式（1000） > #id > .class > 标签 > * > 继承 > 默认.

附：后续：
文件样式（字体属性，文本属性，文本效果）。
背景。
盒子模型（宽高，内边距外边距，边框，标准和怪异盒子模式）。
浮动。
定位。