CSS概述和语法

最新推荐文章于 2022-09-07 23:56:10 发布

小张biubiu

最新推荐文章于 2022-09-07 23:56:10 发布

阅读量385

点赞数 2

分类专栏： HTML CSS 文章标签： CSS概述 CSS语法

本文链接：https://blog.csdn.net/weixin_45178455/article/details/102774715

版权

CSS 同时被 2 个专栏收录

15 篇文章 0 订阅

订阅专栏

HTML

14 篇文章 0 订阅

订阅专栏

一、CSS概述分为三点：

(一)、什么是CSS

CSS全称"Cascading Style Sheets"他的名称有层叠样式表、级联样式表，简称样式表。

(二)、CSS与HTML之间的关系

HTML是构建网页结构，CSS是构建HTML元素样式表。

(三)、HTML属性与CSS样式的使用原则

举个栗子：

修改文本的颜色为红色
在HTML属性中:

<body text="red">

在CSS样式表中则是 :

元素{
	color:red;
}

建议尽量使用CSS样式取代HTML属性

但CSS样式表并不能取代所有，比如：

<td colspan="3"></td>

colspan元素在CSS中没有方式可以取代，所以针对跨行跨列来讲，只能使用HTML元素属性，就不能使用CSS属性了。

二、CSS语法

(一)、使用CSS样式表

1、CSS样式表的使用方式：

1)、内联样式

作用：将样式声明在元素的style属性中
语法：

<ANY style="样式声明;样式声明"></ANY>

样式声明：表示一个具体显示效果，多个样式声明之间用(分号)；隔开。

每个样式声明都由两部分组成：

样式属性	属性值
color(文本颜色)	颜色的英文表示
font-size(字体大小)	以px或者pt为单位的数值
background-color(背景颜色)	颜色的英文表示

ex(栗子)：

<ANY style="color:red;font-size:24px;background-color:black;"></ANY>

//设置某元素的文本颜色为红色，文字大小为24px，背景颜色为黑色。

2)、内部样式

作用：将样式声明定义在页面的style中。
用法：
1、在<head>中添加<style></style>元素。
2、在style中添加任意多"样式规则"。
“在CSS里(/* */)表示注释”
样式规则：

选择器{
	样式声明;
	样式声明;
	......
}
	选择器：规范了页面中哪些元素能够使用定义好的样式。

ex：

p{
	color:red;
	font-size:48px;
	background-color:green;
}

//定义页面中所有p元素的样式为字体颜色为红色，字体大小为48px，背景颜色为绿色。

3)、外部样式

用法：
(1)、创建一个单独的样式表文件保存样式。
规则：
xx.css
(以.css结尾的文件)
只能编写遵循css规范的内容。
(2)、在需要的页面上引入样式表文件(格式如下)。

<head>
		<link rel="stylesheet" href"css文件url">
</head>
																	*[url]:统一资源定位符

2、CSS样式表特征

CSS样式表特征有五个：

1)、继承性

子级元素可以直接使用父级元素声明好的样式，大部分的css样式属性是可以继承的。

2)、层叠性

可以为一个元素是声明多个样式规则，如果样式不冲突的话，多个样式规则中的样式表叠为一个。

3)、优先级

样式定义冲突时，按照不同样式使用的"优先级"来应用样式。
低：浏览器的缺省设置(User Agent Stylesheet)。
中：外部样式表或内部样式表。
就近原则—谁离元素近用谁(后定义者优先)。
高：内联样式。

4)、!important 规则

！important 规则
作用：
显示调整样式的优先级。
语法：
属性名称：
值 !important
尽量少用，原因有以下两点：
(1) IE6以及一下浏览器不支持。
(2) 打破默认的优先级规则。

(二)CSS基础选择器

1、作用：

规范了页面中哪些元素能够使用定义好的样式。
目的：匹配页面元素。

2、详解

1）、通用选择器

作用：匹配页面中所有的元素
语法：

*{
	样式声明;
}

通用选择器有一个缺点：因为每出现一个元素他都会匹配一遍，效率较低，所以尽可能少用。

2)、元素选择器

作用：定义页面某一标签的默认样式。
语法：

元素{
	样式声明;
}

ex：

div{
	font-size:12px;
}

//页面上所有div元素中文字大小为12px。

3)、类选择器

作用：由CSS定义好，可以被任意标签的class属性值进行引用的选择器。
语法：
“在<style></style>中添加”

.(类名){
		样式声明;
}

类名：
(1)英文。
(2)不能以数字开始。
(3)除_ , - 以外不能有其他特殊符号。
引用：

<ANY class="类名"></ANY>

引用方式 - 多类选择器的引用可以将多个类选择器，同时应用在一个元素中(格式如下)：

<ANY class="class1 class2 class3"></ANY>

定义方式 - 分类选择器的定义
将元素选择器和类选择器结合起来使用，从而实现对某种元素不同样式的细分控制。
语法：

元素选择器.类选择器{
			样式声明;
}

ex：

div.important{
		样式声明;
}                                                    //定义class为important的div元素的样式。

4)、ID选择器
作用：针对指定ID值的元素去定义样式
语法：

#ID值{
	样式声明;
}

//ID值一定要对应页面某一个元素的ID值。

5)、群组选择器
作用：选择器声明是以，隔开的选择器列表。
语法：

选择器1,选择器2,选择器3，...{
			样式声明;
}

ex：

span,.important,#main,div.redColor{
			color:red;
			font-size:12px;
}

//匹配页面中所有span，以及class为important的元素，id为main的元素以及class为redColor的div元素，
他们的样式为{color:red,font-size:12px;}

6)、后代选择器

后代：只要具备层级关系的元素，被嵌套的都可以称之为后代元素。
语法：

选择器1(以空格隔开)选择器2{
		样式声明;
}

ex：

#d1 span{
		
}
	//匹配id为d1中的所有span元素。

7)、子代选择器
子代：只具备一级层级关系元素，被嵌套的称之为子代元素。
语法：

选择器1>选择器2{
		样式声明;
}

ex：

#d1>span{

}

//匹配id为d1中的下一级span元素。

8)、伪类选择器
作用：匹配页面元素的不同状态的选择器。
分类：
(1)链接伪类
(1.1) :link
//匹配尚未被访问的超链接状态。
(1.2) :visited
//匹配访问后的超链接状态。

语法：

元素:伪类{

}

#anchor:link{

}
//匹配页面中id为anchor的元素未被访问时的样式状态。

#myAn:visited{

}

//匹配页面中id为myAn元素访问过后的状态。

ex：

a:link{

}

//匹配页面中a标记(超链接)未被访问时的样式状态。

(2)动态伪类
(2.1) :hover
//匹配鼠标悬停在元素上的状态。
(2.2) :active
//匹配元素被激活时的状态。
(2.3) :focus
//匹配元素获取焦点时的状态(如：text、password、textarea)

晚安

小张biubiu

关注

2
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
CSS概述和语法

一、CSS概述分为三点：(一)、什么是CSSCSS全称"Cascading Style Sheets"他的名称有层叠样式表、级联样式表，简称样式表。(二)、CSS与HTML之间的关系HTML是构建网页结构，CSS是构建HTML元素样式表。(三)、HTML属性与CSS样式的使用原则举个栗子：修改文本的颜色为红色在HTML属性中:<body text="red">在...
复制链接

扫一扫

专栏目录