css时页面的装饰器，能够将一个看起来简单难看的页面，装扮的符合大众的审美观。

1.css样式的写法

css的几种写法

在标签的属性style中编写

在页面中的style标签中编写

在页面外的xx.css文件中编写，使用link标签引入

使用@import导入需要的css文件

1.1.行内样式

行内样式，又叫做标签样式，主要是写在标签的style属性上，好处是优先级别较高，坏处是只能渲染一个标签。

其代码表示为：

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><body><h1 style="color: red;">今天天气是雨天</h1><h1>今天天气是雨天</h1><h1>今天天气是雨天</h1></body>
</html>

其运行结果为：

1.2内嵌样式

内嵌样式又叫做页面样式，是将css写在网页源文件的头部，即写在head间，通过使用HTML标签中的style标签将其包围，其特点是改样式只能在此页使用，可以解决行内样式多次书写的弊端。

其代码表示为：

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style>h1{background: indianred;}</style></head><body><h1>今天星期五</h1><h1>今天星期五</h1><h1>今天星期五</h1></body>
</html>

其运行结果为:

1.3.外链样式

链接式通过HTML的link标签，将外部样式表文件链接到HTML文档中，这也是网络上网站应用最多的方式，同时也是最实用的方式。这种方法将HTML文档和css文件完全分离，实现结构层和表示层的彻底分离，增强网页结构的扩展性和css样式的可维护性。

首先在页面外部创建一个css文档（xxx.css）,后缀名必须是css，在使用link标签引入到需要渲染的页面。

其代码表示为：

①HTML部分为：

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><link rel="stylesheet" href="../css/03外链样式.css" /></head><body><p>今年是2021年</p><p>今年是2021年</p><p>今年是2021年</p></body>
</html>

②css部分

p{color: blue;background: yellowgreen;
}

③运行结果为：

注意

对于样式表而言，后定义的会把先定义的样式表覆盖掉。link标签可以放在页面的head中，也可以放在body中，一般建议放在head中，以便于浏览器的渲染样式，因为样式在完全加载完成前需要渲染。

1.4.@import

css也提供了一种在css文件中到导入其他css文件的功能--@import,这样就也可以导入css文件。

<style>@import url("css/index.css");</style>

1.5.link和@import的区别

首先从本质上说，这两种方式都是为了加载css文件，但他们还存在一些差别。

link属于XHTML标签，而@import完全是css提供的一种方式。link标签除了可以加载css外，还可以做很多其他的事情，比如定义RSS，定义rel连接属性等，@import只能加载CSS。

加载顺序的差别：当一个页面被加载的时候，link引用的CSS会同时被加载，而@import引用的CSS会等到页面全部被下载完再加载。所以浏览@import加载CSS的页面时侯，在网速慢的情况下，可以明显看到不带样式的页面。

兼容性的差别：由于@import是CSS2.1提出的，所以老的浏览器不支持，@import只有在IE5以上的才能识别，而link标签无此问题，完全兼容。

使用dom控制样式时的差别：当使用JavaScript控制dom去改变样式的时候，只能使用link标签，因为@import不是dom可以控制的。

2.CSS的选择器

2.1.基本选择器

基本选择器包括如下选择器：

标签选择器（根据标签名曾获取）

ID选择器（获取id为xx的标签）

类选择器（获取标签中class=xx的标签）

通用选择器（通配符）

其代码表示为：

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>基本选择器</title><style>/** 通用选择器* 会改变页面的整体布局* */*{background: gray;}/*标签选择器会改变此页面下对应标签的布局* */li{color: red;}/*id选择器会改变页面对应id属性的布局* */#fir{background: greenyellow;}/*类选择器会改变页面对应类下的布局* */.sec{border: 1px solid blue;}</style></head><body><ul><li id="fir">阳光正好，微风不燥1</li><li>阳光正好，微风不燥2</li><li class="sec">阳光正好，微风不燥3</li><li>阳光正好，微风不燥4</li><li>阳光正好，微风不燥5</li><li>阳光正好，微风不燥6</li><li>阳光正好，微风不燥7</li><li>阳光正好，微风不燥8</li><li>阳光正好，微风不燥9</li><li>阳光正好，微风不燥10</li></ul></body>
</html>

其运行结果为：

注意

标签选择器就是以标签名称为标准选择对应的标签，id则是#id属性来选中的标签

一个页面的id必须是唯一的，所以id选择器只能选择一个标签

类选择器是.class属性选择，class属性的值一个页面上允许出现多次，所以class选择器更加灵活，在开发中一般使用最多

2.2.包含选择器

子代选择器--获取某个标签的第一级子标题

后代选择器--获取某个标签中的所有的子标签

分组选择器，也叫做逗号选择器--可以同时设定多个标签，使用逗号进行分割

其代码表示为:

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style>/*子代选择器*/div#fir > ul{background: yellow;}/*后代选择器*/div#fir li{color: red;}/*逗号选择器*/h1,p,span{border: 1px solid green;}</style></head><body><h1>今天不上课</h1><p>今天星期六</p><span>今天是雨天</span><div id="fir"><ul><li>包含选择器1</li><li>包含选择器2</li><li>包含选择器3</li><li>包含选择器4</li><li>包含选择器5</li><li>包含选择器6</li><li>包含选择器7</li><li>包含选择器8</li><li>包含选择器9</li></ul><li>选择器1</li><li>选择器2</li><li>选择器3</li><li>选择器4</li><li>选择器5</li><li>选择器6</li></div></body>
</html>

其运行结果为：

2.3.属性选择器

.container[class] --- 表示选中的标签中存在某个属性

input[type = 'text'] --- 表示确切的等于

input[type *= 'a'] --- 表示属性的值中包含某个值

input[type ^= 'a'] --- 表示以什么开始

input[type $= 'a'] --- 表示以什么结尾

.msg + p --- 表示下一个标签

title = "这个是标题" --- 属性名称等于属性值

2.4伪类选择器

常见的状态有：

:link 超链接点击之前

:visited 超链接被访问过之后

:hover "悬停"：鼠标放到标签上的时候

:action "激活"：鼠标点击，但是不松手时

:focus 是某个标签获得焦点时的样式---比如某个输入框获得焦点

其代码表示为：

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style>a:link{color: red;}a:visited{color: peru;}a:hover{color: orange;}a:active{color: yellow;}a:focus{color: green;}</style></head><body><a href="01行内样式.html">01行内样式</a></body>
</html>

注意

在css中，这四种状态必须按照固定的顺序写

a:link a:visited a:hover a:active

3.css常见样式

3.1css基本语法

选择器{

属性：属性值；

属性：属性值；

...

}

3.2.常见的css样式参考表

样式名称	样式的值	说明
font-family	字体名称（如微软雅黑、Micorosoft YaHei）	文本字体
font-style	normal、italic、oblique	规定斜体文本
font-variant	small-caps,normal	小型大写字母
font-weight	normal、bold、bolder、数值	文本的粗细
font-size	默认大小是16像素（16px = 1em），单位一般是px，也可以是其他	文本的大小
text-indent	所有元素的第一行都可以缩进一个给定的长度，该长度可以是负值	缩进文本内容
text-align	left、right、center、justify	文本行间的对齐方式
word-spacing	其默认值normal与设置值为0是一样的	改变单词间隔
letter-spacing	其默认值normal与设置值为0是一样的	改变单词间隔
text-transform	none、uppercase、lowercase、capitalize	处理文本的大小写
text-decoration	none、underline、overline、line-through、blink	文本装饰
white-space	normal、pre-line、nowrap、pre、pre-wrap	空格换行和tab处理
color	#十六进制三原色、颜色单词、rgb函数，rgba函数	文本颜色
direction	默认ltr、rtl、inherit	文本的方向
line-height	normal、数值、%等	行高
text-shadow	h1{text-shadow:5px 5px 5px #FF0000;}	文本阴影效果
box-shadow	div{text-shadow：5px 5px 5px #FF0000；}	盒子阴影效果
list-style-type	disc、circle、squart、decimal、lower-roman、lower-latin	列表的样式
list-style-position	inside、outside、inherit	何处放置列表项标记
outline	p{outline:#00FF00 dotted thick;}	轮廓线
outline-offset	数值	轮廓和元素的距离
outline-color	#十六进制三原色、颜色单词、rgb函数、rgba函数	轮廓颜色
outline-style	dotted、solid、dashed、double等	轮廓样式
outline-width	thin(细)、medium（默认）、thick（粗）、数值	轮廓的宽度
border-image	div{border-image:url(border.png) 30 30 round;}	使用图片来创建边框
opacity	0-1之间的数值，0表示全透明，1表示不透明	透明的
width	数值	元素的宽度
height	数值	元素的高度
max-height	数值	最大高度
max-width	数值	最大宽度
min-height	数值	最小高度
min-width	数值	最小宽度
margin	{margin：0px； margin：10px 20px;margin:10px 20px 30px 0px;margin:auto;}	外边距
margin-left	数值	左外边距
margin-right	数值	右外边距
margin-top	数值	上外边距
margin-bottom	数值	下外边距
padding	{padding:0px;padding:10px 20px;padding:10px 20px 30px 0px;}	内边距
border	border:1px solid red;	边线
border-width	数值	边线粗细
border-color	#十六进制三原色、颜色单词、rgb函数、rgba函数	颜色
border-radius	div{border:2px solid;border-radius:25px;}数值或者百分比	边线的弧度
background	{background:#ooFFoo url(bgimage.gif) no-repeat fixed top;}	背景综合写法
background-color	#十六进制三原色、颜色单词、rgb函数、rgba函数	背景颜色
background-position	top left 这种单词对或者坐标位置（x,y）或者x%,y%	背景位置
background-size	background-size:80px 60px;\|cover	背景图像的尺寸
background-repeat	repeat、repeat-x、repeat-y、not-repeat	背景图像重复
background-image	url函数引入图片	背景图片
background-attachment	默认scroll、fixed	背景图像是否固定或者随页面的滚动
visiblity	visible、hidden	元素是否可见
display	none、block、inline、inline-block、list-item	元素类型转换、可见性
position	static、relative、absolute、fixed	元素定位
z-index	数值，默认0	表示z轴的优先级
vertical-align	baseline、sub、super、top、text-top、middle、text-bottom	元素的竖直对齐方式
overflow	visible、hidden、scroll、auto	溢出元素框时处理
clear	left、right、both、none	清除浮动
float	left、right、none	元素在哪个方向浮动
resize	none、both、horizontal、vertical	规定是否调整元素尺寸
box-sizing	content-box、border-box	容器尺寸计算方式
filter	opacity（）、url（）、blur（）、grayscale（）、brightness（）等函数	设置页面的滤镜

4.css的一些特殊样式

第二部分 CSS部分相关推荐

【第二部分 | CSS】2：点缀一下html元素
目录 | 前言 | CSS字体属性设置字体样式 font-family 设置字体大小 font-size 设置字体粗细 font-weight 设置字体风格 font-style (斜体) 上述四个 ...
Web前端第二季(CSS):十:第5章:案例开发:505-SiKi学院首页布局分析+506-开发右侧学习中心链接样式+507-切分SiKi学院的布局+508-开发SiKi学院的导航按钮
目录一.目的 1.想:学习前端知识 2.想:记录笔记,下次不用看视频,直接看笔记就可以快速回忆. 二.参考 1.我自己代码的GitHub网址 1.SIKI学院:我参考此视频实操 1.w3school ...
Web前端第二季(CSS):七:第3章:盒子模型:306-盒子模型的外边距+307-外边距自动合并+308-边框样式+309-边框颜色和边框宽度
目录一.目的 1.想:学习前端知识 2.想:记录笔记,下次不用看视频,直接看笔记就可以快速回忆. 二.参考 1.我自己代码的GitHub网址 1.SIKI学院:我参考此视频实操 1.w3school ...
Web前端开发笔记——第三章 CSS语言第二节 CSS选择器
目录前言一.CSS选择器 (一)标签选择器 (二)id选择器 (三)类别选择器二.针对标签的选择器嵌套三.集体声明和全局声明 (一)集体声明 (二)全局声明结语前言 CSS代码由选择器和一 ...
HTML第二课——css
请关注公众号:自动化测试实战先给大家提个建议,就是用sublime编辑器来编写.用其他的也无所谓,我只是建议,因为这个会帮你自动补全很多代码. css概念 css叫层叠样式表.意思就是一层一层的叠加 ...
第二节 CSS入门介绍
一.背景这里将陆续介绍前端CSS中相关知识,先介绍CSS2.1,后续会介绍CSS3的相关属性,通过该系列的文章,希望能给准备转战前端的人员一些帮助,同时也帮助自己梳理知识,文章中如有错误,欢迎指出. ...
【web前端初级课程】第二章 CSS层叠样式表
目录一.使用CSS的方法二.CSS的选择器三.CSS的常见样式四.相关练习一.使用CSS的方法 (一)行内样式在标签的style属性中写CSS代码. (二)页面样式在head标签中添加s ...
萌新接触前端的第二课——CSS
前端知识--CSS CSS(英文全称:Cascading Style Sheets) 中文名层叠样式表,是一种用来表现HTML或XML等文件样式的计算机语言.CSS不仅可以静态地修饰网页,还可以配合各 ...
【第二次CSS CSP】 201409 (C++)
201409-1 解题思路:数据量小,直接暴力枚举参考代码 #include<bits/stdc++.h> using namespace std; const int N = 1e3 ...

第二部分 CSS部分

1.css样式的写法

1.1.行内样式

1.2内嵌样式

1.3.外链样式

1.4.@import

1.5.link和@import的区别

2.CSS的选择器

2.1.基本选择器

2.2.包含选择器

2.3.属性选择器

2.4伪类选择器

3.css常见样式

3.1css基本语法

3.2.常见的css样式参考表

4.css的一些特殊样式

第二部分 CSS部分相关推荐

最新文章

热门文章