CSS

最新推荐文章于 2024-01-15 00:00:00 发布

Aurora·

最新推荐文章于 2024-01-15 00:00:00 发布

阅读量87

点赞数

文章标签： CSS

本文链接：https://blog.csdn.net/weixin_44040583/article/details/102504751

版权

一、CSS简介
CSS指层叠样式表 (Cascading Style Sheets) 用于渲染HTML元素标签的样式，它的优点有：
1.结构清晰，容易被搜索引擎搜索到
2.大大缩减页面代码，提高页面浏览速度
3.更好的控制页面布局
4.表现和内容相分离

二、 CSS三大特性
1.层叠性
当多个样式作用于同一个或同一类标签时，样式发生了冲突，总是执行后边的代码(后边代码会层叠前边的代码)。
2.继承性
并不是所有的属性都可以继承, 只有以color/font-/text-/line-开头的属性才可以继承
3.优先级
行内样式>id选择器>类选择器>标签选择器>默认样式

三、样式表
CSS 可以通过以下方式添加到HTML中:
1.内联样式 : 在HTML元素中使用"style" 属性

<p style="color: red;font-weight: bold;">这是内联样式</p>

2.内部样式表 : 在HTML文档头部区域使用

<head>
	<meta charset="utf-8" />
	<title></title>
	<style type="text/css">
		p{
			color: red;
			font-weight: bold;
		}
	</style>
</head>
<body>
	<p >这是内部样式表</p>
</body>

3.外部引用 : 使用外部 CSS 文件

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

最好的方式是通过外部引用CSS文件

注：多重样式优先级：
一般情况下，优先级如下：
内联样式 > 内部样式 >外部样式> 浏览器默认样式

四、选择器
如果你要在HTML元素中设置CSS样式，你需要在元素中设置"id" 和 "class"选择器。
1.通用选择器

*{
	padding: 0;
	margin: 0;
 }

2.标签选择器

p{
	font-weight: bold;
	color: red;
  }
h2{
	font-size: 30px;
  }

3.id选择器
id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。（id具有唯一性）
#自定义名称{属性:值;}

#content{
	width: 100px;
	height: 100px;
	background: pink;
}

4.类选择器
class 选择器用于描述一组元素的样式，class可以在多个元素中使用。
.自定义名称{属性:值;}

.top{
	text-align: center;
	font-size: 14px;
}

5.群组选择器
要为不同的HTML对象定义相同的样式时，可以采用群组声明。

#content.top{
	font-size: 20px;
	font-weight: bold;
}

6.后代选择器
选择器+空格+选择器{属性：值;}

#pic img{
	width: 60px;
	height: 60px;
	margin-top: 10px;
}

7.子代选择器

父子关系选择器>选择器{属性:值;}

#nav>ul{
	list-style: none;
}

同辈关系选择器+选择器{属性:值;}

#nav+ul{
	list-style: none;
}

8.属性选择器

#info input[type=text],[type=tel]{
	width: 250px;
	height: 40px;
	margin-top: 10px;
}

9.并且选择器
选择器+，+选择器+，选择器{属性:值;}

table.top{
	width: 80px;
	height: 20px;
	background: firebrick;
}

10.伪类选择器
CSS伪类是用来添加一些选择器的特殊效果。
伪类可以与 CSS 类配合使用：

a:link {color:red;} /* 未访问的链接 */
a:hover {color:blue;} /* 鼠标划过链接 */
a:visited {color:green;} /* 已访问的链接 */
a:active {color:yellow;} /* 已选中的链接 */

Aurora·

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS

一、CSS简介CSS指层叠样式表 (Cascading Style Sheets) 用于渲染HTML元素标签的样式.CSS 可以通过以下方式添加到HTML中:1.内联样式 : 在HTML元素中使用"style" 属性<p style="color: red;font-weight: bold;">这是内联样式</p>2.内部样式表 : 在HTML文档头部区域使用...
复制链接

扫一扫

CSS

“相关推荐”对你有帮助么？