（二）css

最新推荐文章于 2023-03-05 11:13:17 发布

呼哈呼

最新推荐文章于 2023-03-05 11:13:17 发布

阅读量110

点赞数 1

分类专栏：前端基础文章标签： css

本文链接：https://blog.csdn.net/weixin_44771551/article/details/108605199

版权

前端基础专栏收录该内容

5 篇文章 0 订阅

订阅专栏

（二）css

一、css简介

（1）什么是css

全称：Cascading Style Sheets 层叠样式表，定义如何显示HTML元素；
多个样式可以层层覆盖叠加，如果不同的css样式对同一html标签进行修饰，样式有冲突的应用优先级高的，不冲突的共同作用；
CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。

（2）CSS能干什么

修饰美化html网页；
外部样式表可以提高代码复用性从而提高工作效率；
html内容与样式表现分离，便于后期维护。

（3）CSS书写规范

CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明

选择器通常是您需要改变样式的 HTML 元素；
每条声明由一个属性和一个值组成。

（4）基础语法

<!-- 选择器 { 属性: 值; 属性: 值... } -->
p{color: red; font-size: 20px;}

注意事项：

请使用花括号来包围声明；
多个声明之间使用分号 ; 分开。

二、css导入方式

（1）内嵌方式（内联方式）

把CSS样式嵌入到html标签当中，类似属性的用法

<div style="color:red; font-size:20px">hello</div>

（2）内部方式

在head标签内使用style标签引入css

<style type=“text/css”>
	div{color:red; font-size:20px;}
</style>

（3）外部方式

将css样式写成一个单独文件，使用者直接引用，引用语句写在head标签内

<link href="css/index.css" rel="stylesheet" type="text/css" />
<!--
	href:css文件地址
	rel:代表当前页面与href所指定文档的关系
    type:文件类型，告诉浏览器使用css解析器去解析
-->

（4）@import方式

<style type="text/css">
	@import url("css/index.css")
</style>

link和@import方式的区别：

link所有浏览器都支持，@import某些版本低的IE不支持；
@import是等待html加载完成才加载；
@import不支持js动态修改。

三、css选择器

（一）基本选择器

（1）通配符选择器

格式：*{属性:属性值;}

<style type="text/css">
	*{color: #f00;}
</style>

（2）标签选择器

格式：标签名{属性:属性值;}

<style>
	h1{color: red;}
	h2{color: pink;}
</style>

（3）类选择器

格式：.class名{属性:属性值;}

<!--body中进行书写-->
<div class="one">hello</div>
<!--style中进行书写-->
<style>
	.one{color: red;}
</style>

（4）id选择器

格式：#id值{属性:属性值;}

<!--body中进行书写-->
<div id="one">hello</div>
<!--style中进行书写-->
<style>
	#one{color: red;}
</style>

备注：以上基本选择器的优先级从高到低：id选择器，class选择器，标签选择器，通配符选择器

id选择器的名字具有唯一性，一个html文件中只能有一个，class选择器的名字可以有多个，因此id选择器的优先级比class选择器高

（二）属性选择器

格式：

htm标签[属性=“属性值”]{css属性:css属性值;}
html标签[属性]{css属性:css属性值;}

<!--body中进行书写-->
<p name="one">hello</p>
<p name="two">hello</p>
<p name="three">hello</p>
<!--style中进行书写-->
<style>
	<!--将p标签中有name属性的p标签的字体颜色改为粉色-->
	p[name]{
		color: pink;
	}
	<!--将p标签中name属性的值为“one”的p标签的字体颜色改为红色-->
	p[name="one"]{
		color: red;
	}
</style>

（三）相邻选择器

格式：标签+标签{属性:属性值;}

<!--body中进行书写-->
<body>
	<ul>
		<li>基本选择器</li>
        <li>属性选择器</li>
        <li>相邻选择器</li>
        <li>层级选择器</li>
        <li>伪类选择器</li>
	</ul>
</body>
<!--style中进行书写-->
<style>
	<!--将前面有li标签的li标签的字体颜色改为红色-->
    li+li{
        color: red;
    }
</style>

（四）层级选择器

格式：父级标签子级标签 …{属性:属性值;}

<!--body中进行书写-->
<body>
	<ul>
		<li>基本选择器
			<ul>
				<li>通配符选择器</li>
				<li>标签选择器</li>
				<li>class选择器</li>
				<li>id选择器</li>
			</ul>
		</li>
        <li>属性选择器</li>
        <li>相邻选择器</li>
        <li>层级选择器</li>
        <li>伪类选择器</li>
	</ul>
</body>
<!--style中进行书写-->
<style>
	<!--将li标签的前面有ul标签的前面有li标签的前面有ul标签的li标签的字体颜色改为红色-->
    ul li ul li{
        color: red;
    }
</style>

（五）伪类选择器

主要是针对a标签；
格式：

未访问状态 a:link{css属性:css属性值;}
鼠标悬停状态 a:hover{css属性:css属性值;}
鼠标点击状态 a:active{css属性:css属性值;}
已访问状态 a:visited{css属性:css属性值;}

<!--body中进行书写-->
<body>
	<a href="#">超链接</a>
</body>
<!--style中进行书写-->
<style>
	<!--未访问是绿色，鼠标悬停时是紫色，鼠标点击时是粉色，已访问是黄色-->
    a:link{color: green;}
    a:hover{color: purple;}
    a:active{color: pink;}
    a:visited{color: yellow;}
</style>

呼哈呼

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
（二）css

（2）css一、css简介（1）什么是css全称：Cascading Style Sheets 层叠样式表，定义如何显示HTML元素；多个样式可以层层覆盖叠加，如果不同的css样式对同一html标签进行修饰，样式有冲突的应用优先级高的，不冲突的共同作用；CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。（2）CSS能干什么修饰美化html网页；外部样式表可以提高代码复用性从而提高工作效率；html内容与样式表现分离，便于后期维护。（3）
复制链接

扫一扫

专栏目录