web零碎的基础知识之CSS_text-decoration: underline;断断续续的-CSDN博客

本文链接：https://blog.csdn.net/qq_43346086/article/details/109962478

本文介绍了CSS的基础语法，包括选择器的使用，如标签选择器、ID和类选择器，以及CSS的引入方式。详细讨论了基础选择器权重、后代和并集选择器，并探讨了高级权重对比，特别是不同引入方式的权重差异。此外，还涵盖了CSS的常用文字、行高、边框属性，以及盒子模型。最后提到了HTML5的新标签和Photoshop的基础操作技巧。

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

CSS：样式表、级联样式表、层叠样式表

基础语法

<head>
	<meta charset="UTF-8">
	<title></title>
	<style type="text/css">
		p{color:red;font-size:30px;font-family:"黑体";text-align:left;text-indent:2em;}
		/*实体化三属性*/
		p{width:200px;height:200px;background:pink;}
	</style>
</head>
<body>
	<p>hkahkahdiuhkjkjkj</p>
</body>

css代码写在style标签里面，放在head标签中；大括号中写键值对语法：属性名1：属性值1；属性值2：属性值2
color 文字颜色
font-family 字体
font-size 字号
text-indent 首行缩进单位是em 代表一个文字的间距
text-align 文本对齐方式，默认是left，还可以设置center居中，right居右
background 背景色属性

选择器

<head>
	<meta charset="UTF-8">
	<title></title>
	<style type="text/css">
		.p1{color:red;}
		.p2{color:blue;}
		.shxs{font-size:30px;}
		#p1{color:red;}
		#p2{color:blue;}
	</style>
</head>
<body>
	<p class="p1 shxs">111111111</p>
	<p class="p2">22222222</p>
	<p class="p3">33333333</p>
	<p id="p1">44444444</p>
	<p id="p2">55555555</p>
</body>

标签选择器

直接在css语法中写标签的名字就可以选中对应的标签；
div代表大容器
span代表小容器,一行可以有多个

id选择器和类选择器

id选择器语法：#名字
特点：不能重复，也不能一个人拥有多个
class类选择器语法：.名字
特点：可以重复使用，一个人可以有多个类名；使用频率更高
tips：ps吸取的颜色色号一般采用16进制，在代码中使用需要早色号代码前加#

css的引入方式

1.内嵌式：style标签放head中
优点：电商网站的首页必须使用这种方式，因为电商首页要求加载速度必须快，内嵌式比外链式快一些
缺点：HTML和css代码没有实现分离，不方便修改
2.外链式：通过link放在head标签中，把外部的css文件引入到HTML文件中

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

优点：实现了代码分离，方便修改和管理
缺点：运行速度比内嵌稍慢
3.行内式：
这种形式不会用，他会让代码量变得非常庞大，不方便修改！

基础选择器权重

id>class>标签

后代选择器

div span 用空格来连接，代表的意思是找到后代元素
注意：后代可以是儿子、儿子的儿子…

并集并列选择器

div,span,h1,.span,#span2
用逗号连接选择器，代表这些元素同时被选中

<head>
	<meta charset="UTF-8">
	<title></title>
	<style type="text/css">
		/*span{color:red;}*/
		/*后代选择器*/
		div span{color:blue;}
		/*并集选择器*/
		h1,h3,a,.div2,#id_div,div span{color:red;}
	</style>
</head>
<body>
	<div>
		<p>
			<span>我是老p家的span</span>
		</p>
		<div>
			<span>我是老div家的span</span>
		</div>
	</div>
	<h1>我是h1</h1>
	<p>我是p</p>
	<h3>我是h3</h3>	
	<a href="###">我是a链接</a>
	<div id="id_div">我是div1</div>
	<div class="div2">我是div2</div>
	<span>hahahaha</span>
	<div>
		<span>hehe</span>
	</div>	
	<p>
		<div>
			asd
		</div>
	</p>
</body>

标签指定式、指定标签式

div.类名
注意：标签和类名之间没有空格

<head>
	<meta charset="UTF-8">
	<title></title>
	<style type="text/css">
		p.p2{color:blue;}
	</style>
</head>
<body>
	<p>我是p1</p>
	<p class="p2">我是p2</p>
</body>

高级权重对比

引入方式对比：

外链和内嵌权重相同，先写的会被后写的覆盖
内嵌权重最大，如果想覆盖它，就只能给样式中添加！important来把权重提高

<head>
	<meta charset="UTF-8">
	<title></title>
	<link rel="stylesheet" type="text/css" href="my.css"/>
	<style type="text/css">
		p{color:blue!imporant;}
	</style>
</head>
<body>
	<p style="color:green;">我是p1</p>	
</body>

复合选择器权重：

假设id权值为100，class权值为10，标签权值为1
综合起来大的权重就高，如果权重一样，先写的被后写的覆盖

<head>
	<meta charset="UTF-8">
	<title></title>
	<style type="text/css">
		#span_id{color:orange;}
		.div span{color:darkgoldenrod;}
		span.span1{color:green;}
		.span1{color:pink;}
		p span1{color:blue;}
		span{color:red;}
	</style>
</head>
<body>
	<div class="div1">
		<p>
			<span class="span1" id="span_id">hehe</span>
		</p>
	</div>
</body>

css常用文字属性

font-weight :设置字体粗细 normal代表不加粗；bold代表加粗
font-style ：设置字体倾斜 italic代表倾斜；normal代表不倾斜
text-decoration ：设置线 none代表没有线；underline代表下划线；overline代表上划线；line-through代表管穿线（删除线）
word-break :break-all 强制换行
:hover 伪类写法代表鼠标悬停状态的样式

<head>
	<meta charset="UTF-8">
	<title></title>
	<style type="text/css">
		h1{font-weight:normal;}
		p{font-weight:bold;}
		em{font-style:normal;}
		em{font-style:italic;}
		a{text-decoration:none;}
		h2{text-decoration:line-through;}
		h3{text-decoration:underline;}
		h4{text-decoration:overline;}
		h5{width:200px;height:300px;background:pink;}
		h6{word-break:break-all;}
		a:hover{color:green;}
	</style>
</head>

行高属性

一行文字的结束到上一行文字结束的间距：line-height

p{width:200px;height:300px;background:pink;line-height:50px;}

边框属性

border:1px solid red;
粗细实线颜色
虚线：dashed 这样设置是四个方向相同；
如果想单独设置某个方向只需要：border-left（right、top、bottom）
注意：边框属性只有实线和虚线是没有兼容性问题的，其他方式的线都会有不同程度的兼容问题

div{width:200px;height:200px;background:pink;/*border:10px solid green;*/ 
	border-bottom:1px solid green;border-top:5px solid blue;
	border-left:10px dashed orange;border-right:15px dashed olivedrab;}

css盒子模型的组成

宽高+边框+内边距padding（内容和边框的距离）+外边距margin（盒子和盒子之间的距离）=盒子模型

HTML5新标签

<header>头部</header>
<nav>导航条</nav>
<aside>侧导航</aside>
<article>文章块</article>
<footer>底部</footer>

注意：这些HTML5的新标签只能使用在手机网站的书写中，可以提升搜索引擎对网站的优化，不能用在pc（电脑）端网站，因为ie低版本不识别这些新标签。

ps基础操作

图片放大缩小，alt+鼠标滚轮
按住空格不放，拖拽鼠标可以改变图片位置
英文状态下按字母t，再点击想要查看的文字，就可以在菜单栏上看到所有属性（取消选中按esc键）