CSS

最新推荐文章于 2025-07-29 15:28:11 发布

目八刀

最新推荐文章于 2025-07-29 15:28:11 发布

阅读量189

点赞数

CC 4.0 BY-SA版权

文章标签： css html less js javascript

本文链接：https://blog.youkuaiyun.com/atomut/article/details/106494117

本文全面解析CSS概念，涵盖HTML标签中设置样式的三种方式，详细解读选择器语法、注释、伪类/伪元素及颜色表示。深入探讨Serif与Sans-serif字体差异，盒子模型原理，以及@media媒体查询在响应式设计中的应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

CSS

概念

CSS 指层叠样式表 (Cascading Style Sheets)
如果把html比作人身体的各个部分，那么CSS就是人身上穿的衣服，耳朵上带的耳环，手腕上戴的手表，指甲上染的指甲油，它是用来装饰html标签的

如何在 html 标签中设置 CSS 样式

外部样式表(External style sheet)，写在单独的CSS文件中，当样式需要应用于很多页面时，使用外部样式表

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

内部样式表(Internal style sheet)，在html文件的style标签中，当单个文档需要特殊的样式时，使用内部样式表

<head>
	<style>
		hr {color:sienna;}
		p {margin-left:20px;}
		body {background-image:url("images/back40.gif");}
	</style>
</head>

内联样式(Inline style)，直接通过标签的style属性，样式仅需要在一个元素上应用一次时，使用内联样式

<p style="color:sienna;margin-left:20px">这是一个段落。</p>

当用多种方式定义样式时，应用样式的优先级是：内联样式 > 内部样式 > 外部样式 > 浏览器默认样式，或者内联样式 > id选择器 > class选择器 > 内部选择器 > 外部样式 > 浏览器默认样式

选择器语法

在这里插入图片描述

注释

/*这是个注释*/
p{
	text-align:center;
	/*这是另一个注释*/
	color:black;
	font-family:arial;
}

选择器

/*id选择器，所有id属性是para1的标签被应用样式*/
#para1{text-align:center;color:red;}
/*class选择器，所有class属性是center的标签被应用样式*/
.center {text-align:center;}
/*所有类名是center的p标签被应用样式*/
p.center {text-align:center;}
/*标签选择器，所有p标签被应用样式*/
p{text-align:center;}
/*包含选择器1，div内的所有p标签被应用样式，不受层级影响*/
div p{color:yellow;}
/*包含选择器2，类名为first标签下的所有span标签被应用样式*/
.first span{color:red;}
/*子选择器1，div标签的儿子p标签被应用样式，更深一层不行*/
div>p{color:red;}
/*子选择器2，类名为first标签下的子span标签被应用样式，更深一层不行*/
.first>span{color:red;}
/*兄弟选择器，与div同级的所有p标签被应用样式*/
div~p{color:red;}
/*紧邻选择器，每个div后面的p被选中*/
div+p{color:red;}
/*通用选择器，匹配html中的所有元素标签*/
*{color:red;}
/*分组选择器*/
h1,h2,p{color:green;}
/*属性选择器，属性值中包含独立的单词*/
[title~=flower]  -->  <img src="/i/eg_tulip.jpg" title="tulip flower" />
/*属性选择器，属性值中只要能拆出来value这个词就行*/
[title*=flower]   -->  <img src="/i/eg_tulip.jpg" title="ffffflowerrrrrr" />
/*属性选择器，属性值中必须是完整且唯一的单词，或者以 - 分隔开*/
[lang|=en]     -->  <p lang="en">  <p lang="en-us">
/*属性选择器，属性值的前几个字母是value就可以*/
[lang^=en]    -->  <p lang="ennn">
/*属性选择器，属性值的后几个字母是 value 就可以*/
a[src$=".pdf"]

伪类/伪元素

在这里插入图片描述

CSS中颜色值表示

十六进制："#ff0000"
RGB：“rgb(255,0,0)”
颜色名称：“red”

Serif和Sans-serif字体区别

在这里插入图片描述

盒子模型(Box Model)

在这里插入图片描述

@media媒体类型

为不同的设备设置不同的样式，一般用来响应式布局

/*语法规则*/
@media mediatype and|not|only (media feature) {
    CSS-Code;
}
/*当页面小于960px的时候执行它下面的CSS
screen的意思是在告知设备在打印页面时使用衬线字体，在屏幕上显示时用无衬线字体。但是目前很多网站都会直接省略screen,因为一般网站可能不需要考虑用户去打印的情况
*/
@media screen and (max-width: 960px){
    body{
        background: #000;
    }
}
/*混合使用大于与等于，意思是当页面宽度大于960px小于1200px的时候执行下面的CSS*/
@media screen and (min-width:960px) and (max-width:1200px){
    body{
        background:yellow;
    }
}
/*竖屏*/
@media screen and (orientation: portrait) and (max-width: 720px) { 对应样式 }
/*横屏*/
@media screen and (orientation: landscape) { 对应样式 }

用min-width时，小的放上面大的在下面

@media (min-width: 1200px){ //>=1200的设备 }
@media (min-width: 992px){ //>=992的设备 }
@media (min-width: 768px){ //>=768的设备 }

用max-width时，大的放上面小的在下面

@media (max-width: 1199px){ //<=1199的设备 }
@media (max-width: 991px){ //<=991的设备 }
@media (max-width: 767px){ //<=768的设备 }