css01_选择器

最新推荐文章于 2024-08-18 09:18:56 发布

Luuuzi

最新推荐文章于 2024-08-18 09:18:56 发布

阅读量176

点赞数

分类专栏： web 文章标签： css html html5

本文链接：https://blog.csdn.net/qq_36366618/article/details/120083166

版权

web 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

HTML是超文本标记语言，从语义的角度描述页面结构。
css 层叠样式表，从审美的角度描述页面的样式。
js JavaScript，从交互的角度描述页面的行为。

CSS

CSS是W3C协会为弥补HTML在显示属性设定上的不足而制定的一套扩展样式标准。CSS标准中重新定义了HTML中原来的文字显示样式,增加了一些新概念,如类、层等,可以对文字重叠、定位等。在CSS还没有引入到页面设计之前,传统的HTML语言要实现页面美化在设计上是十分麻烦的。例如要设计页面中文字的样式,如果使用传统的HTML语句来设计页面就不得不在每个需要设计的文字上都定义样式。CSS的出现改变了这一传统。

css是cascading style sheet层叠式样式表的简写。在制作网页时采用CSS样式,可以有效地对页面的布局、字体、颜色、背景和其他效果实现更加精确的控制。只要对相应的代码做一些简单的修改,就可以改变整个页面的风格。CSS大大提高了开发者对信息展现格式的控制能力,特别是在目前比较流行的CSS+DIV布局的网站中,CSS的作用更是举足轻重。

css的最新版本是css3

1、简单使用

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>Document</title>
	<style type="text/css">
	/*css都是写在style标签里面 style表示类型，text表示纯文本，css也是纯文本*/
	/*p表示一个选择器*/
		p{

			/*颜色*/
			color:red;	
			/*字体大小设置*/
			font-size: 30px;
			/*文本加下划线*/
			text-decoration: underline;
			/*字体宽度，加粗等*/
			font-weight: bold;
			/*文本对齐方式*/
			text-align: center;
			/*字体样式*/
			font-style: italic;//斜体
		}
		/*h1标签表示一个选择器*/
		h1{
			color: blue;
			/*背景颜色*/
			background: pink;
			font-weight: bold;
			font-style: italic;
		}
	</style>
</head>
<body>
	<h1>我是一个标题</h1>
	<p>我是一个段落</p>
	<p>我是一个段落</p>
</body>
</html>

2、CSS规则

在CSS样式表中包括3部分内容:选择符、属性和属性值。语法格式如下

选择符{属性:属性值;}

选择器{
k:v;
k:v;
k:v;
k:v;
}

参数说明

css分为两部分

选择器：怎么选。所有HTML语言中的标记都是通过不同的CSS选择器进行控制的。
属性：样式是什么类型。主要包括字体属性、文本属性、背景属性、
布局属性、边界属性、列表项目属性、表格属性等內容。其中一些属性只有部分浏览器支持,因此应用起来有些复杂。
属性值:为某属性的有效值。属性与属性值之间以“:”分隔。当有多个属性时,使用“;”分隔。

3、常用属性

color: red;//字体颜色；属性值可以是英语单词,比如red，blue，yellow，也可以是rgb、16进制
font-size: 40px;//字体大小
background-color:blue;//背景颜色
font-weight: bold;//字体加粗 weight(重量) bold:(粗) normal(正常) 
font-style: italic;//字体样式，italic(斜体)
text-decoration: underline;//文本修饰。none：标准文本，underline：下划线，overline：上划线，line-through：定义穿过文本下的一条线，blink：闪烁的文本，inherit：继承父盒子的属性

4、选择器

CSS选择器常用的是标签选择器、类选择器、id选择器等。使用选择器可对不同的HTML标签进行控制,从而实现各种效果。下面对各种选择器进行详细介绍

1、标签选择器

HTML页面是由很多标签组成的,例如图像标签ing、超链接标签< a>、表格标签< table>等。CSS标签选择器就用于声明页面中哪些标记采用了哪些CSS样式。例如a选择器,就声明了页面中所有a标签的样式风格。

标签的名字：比如 h1选择器
所有的标签都可以做选择器，标签选择器选中的是当前页面的所有该标签的内容
不管这个标签藏的多深都可以被选上,选择的是所有，而不是某一个

举例
定义a标记选择器,在该标记选择器中定义超链接的字体与颜色。代码如下

<style type="text/css">
		a{
			font-size: 9px;
			color: #f93;
		}
	</style>

2、类选择器

使用标签选择器非常快捷,但却有一定的局限性。声明一个标签选择器后,页面中所有该标签的内容都会有相应的变化。假如页面中有3个< h2>标记,如果想要每个< h2>的显示效果都不一样,使用标签选择器就无法实现了,这时就需要引入类选择器。类选择器的名称由用户自己定义,并以“.”开头,定义的属性与属性值也要遵循CSS规范。要应用类别选择器的HTML标记,只需使用 class属性来声明即可

任何标签都可以有class属性，class属性和id属性相似，只是id属性在同一个页面不可以设置相同的属性值，class属性可以
class属性可以设置多个属性值，用空格隔开
应用在多个内容有这一些相同的样式，这些相同的样式就用类选择器来设置(类上样式，id行为)

举例

<!DOCTYPE html>
<html>
	<head>
		<style type="text/css">
			a{
				font-size: 9px;
				color: #f93;
			}

			.one{
				font-family: 宋体;
				font-size: 24px;
			}
			.tow{
				font-family: 宋体;
				font-size: 16px;
				color: red;
			}
			.three{
				font-family: 宋体;
				font-size: 30px;
				color: blue;
			}
		</style>
		<title>css</title>
	</head>
	<body>
		<a href="">我是a标签</a>
		<h2 class="one">我的类选择器:one</h2>
		<h2 class="tow">我的类选择器:tow</h2>
		<h2 class="three">我的类选择器:three</h2>
	</body>
</html>

效果图

3、id选择器

任何标签都可以有id属性，表示这标签的名字
名字可以随便取，要求：

只有包含字母，数字和下划线
必须以字母开头
不能和标签重名，一个页面中不能出现相同的id
命名id选择器要以“#”开始,后加HTML标记中的id属性值

举例

<!DOCTYPE html>
<html>
	<head>
		<style type="text/css">
			#frist{
				font-size: 18px;
			}
			#second{
				font-size: 24px;
			}
			#three{
				font-size: 8px;
			}
		</style>
		<title>css</title>
	</head>
	<body>
<hr/>
		ID选择器<br/>
		<h2 id="frist">我是id选择器：frist</h2>
		<h2 id="second">我是id选择器：second</h2>
		<h2 id="three">我是id选择器：three</h2>
	</body>
</html>

效果图

class和id的区别

class在页面上可以重复，id不可以
一个标签可以有多个class属性值(用空格隔开),id属性值不可以(只能有一个)
class用于css，id用于js

5、高级选择器

将标签选择器，类选择器和id选择器结合起来组成高级选择器

分类

后代选择器,交集选择器,并集选择器

1、后代选择器

空格代表后代，.div1 p就是给.div1的后代所有的p设置样式。
选择的是后代，不一定是儿子。描述的是祖先结构

举例
给class选择器 div1的后代的所有p标签设置样式

<!DOCTYPE html>
<html>
	<head>
	<!-- 后代选择器p -->
		<style type="text/css">
			.div1 p{
				color: red;
			}
		</style>
		<title>高级选择器</title>
	</head>
	<body>
<!-- 给div添加一个class属性 -->
		<div class="div1">
			<p>我是段落1</p>
			<p>我是段落1</p>
			<p>我是段落1</p>
			<div>
			<a href="">我是a标签</a>
			<p>我是段落4</p>
			<p>我是段落5</p>
			<p>我是段落6</p>
			</div>
		</div>
		<div>
			<p>我是段落1</p>
			<p>我是段落2</p>
			<p>我是段落3</p>
		</div>
	</body>
</html>

效果

空格可以多次出现

<!DOCTYPE html>
<html>
	<head>
	<!-- 后代选择器p -->
		<style type="text/css">
			.div1 .li2 p{
			color:red;
		}
		</style>
		<title>高级选择器</title>
	</head>
	<body>
<!-- 给div添加一个class属性 -->
	<div class="div1">
		<p>我是段落1</p>
		<p>我是段落1</p>
		<p>我是段落1</p>
		<ul>
			<li>
				<p>我是一个段落</p>
				<p>我是一个段落</p>
				<p>我是一个段落</p>
			</li>
			<li class="li2">
				<p>我是一个段落</p>
				<p>我是一个段落</p>
				<p>我是一个段落</p>
			</li>
		</ul>
	</div>
	<div>
		<p>我是段落1</p>
		<p>我是段落1</p>
		<p>我是段落1</p>
	</div>
	</body>
</html>

就是.div1里面的后代.li2里面的p
后代选择器就是一种平衡，共性和特性的平衡，当要把某一个部分所有需要改变的时候使用

2、儿子选择器

儿子选择器就是2个选择器写一起用大于号隔开，只有直接子类有效
ie7兼容，ie6不兼容

<body>
	<div>
		<p>段落1</p>
		<ol>
			<li>
				<p>段落2</p>
			</li>
		</ol>
	</div>
</body>

css

<style type="text/css">
<!--表示div标签的直接子类p标签有效，其他的都无效(与div p：div的后代p完全不同)-->
		div>p{
			color: red;
		}
	</style>

效果：段落1变红，段落2没变红

3、交集选择器

交集选择器就是多个选择器写在一起，中间没有空格

<body>
	<h3>我是一个标题</h3>
	<h3 class="teshu">我是一个标题</h3>
	<p class="teshu">我是一个标题</p>
	<p>我是一个标题</p>
	<p>我是一个标题</p>
</body>

css

<style type="text/css">
		h3.teshu{
			color: red;
		}
	</style>

同时满足两个条件，h3标签和类选择器teshu。
交集选择器可以连续交(从IE7开始兼容)

4、并集选择器

并集选择器就是多个选择器写一个，用逗号隔开

<body>
	<h1>我是一个标题</h1>
	<p>我是一个段落</p>
	<ol>
		<li>我是一个列表</li>
	</ol>
</body>

css

<style type="text/css">
		h1,li{
			color: red;
		}
	</style>

效果，h1和li都变红

5、序选择器

带序列号的选择器(ie8开始兼容，ie7和ie6不兼容)

<body>
	<ul>
		<li>序列1</li>
		<li>序列2</li>
		<li>序列3</li>
		<li>序列4</li>
		<li>序列5</li>
		<li>序列6</li>
		<li>序列7</li>
	</ul>
</body>

css

<style type="text/css">
    <!--选择第一个li-->
		ul li:first-child{
			color: red;
		}
	</style>

只有序列1变红，其他的都不变红

<style type="text/css">
<!--最后一个li变红-->
		ul li:last-child{
			color: red;
		}
	</style>

6、下一个兄弟选择器

+表示选择下一个兄弟(ie7开始兼容)

7、通配符

*表示所有元素，注意：效率不高，如果页面上标签越多，效率越低

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

css

<body>
	<h1>标题</h1>
	<p>段落</p>
	<ol>
		<li>列表1</li>
		<li>列表2</li>
	</ol>
</body>

效果：当前页面所有字体都变红

6、浏览器兼容问题

IE：微软的浏览器，随着操作系统的安装，所以每个Windows都有ie浏览器
windows xp操作系统安装的是ie6
windows vista操作系统安装的是ie7
windows 7操作系统安装的是ie8
windows 8操作系统安装的是ie9
windows 10操作系统安装的是edge

Luuuzi

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css01_选择器

文章目录CSS1、简单使用2、CSS规则参数说明3、常用属性4、选择器1、标签选择器2、类选择器3、id选择器class和id的区别5、高级选择器分类1、后代选择器2、儿子选择器3、交集选择器4、并集选择器5、序选择器6、下一个兄弟选择器7、通配符6、浏览器兼容问题HTML是超文本标记语言，从语义的角度描述页面结构。css 层叠样式表，从审美的角度描述页面的样式。js JavaScript，从交互的角度描述页面的行为。CSSCSS是W3C协会为弥补HTML在显示属性设定上的不足而制定的一套扩展样式
复制链接

扫一扫