CSS选择器

最新推荐文章于 2024-04-06 19:41:17 发布

Michael_lcf

最新推荐文章于 2024-04-06 19:41:17 发布

阅读量271

点赞数

分类专栏：大前端文章标签： CSS选择器

^_^ ^_^ ^_^

本文链接：https://blog.csdn.net/Michael_lcf/article/details/88889281

版权

大前端专栏收录该内容

16 篇文章 0 订阅

订阅专栏

语法结构：
选择器{属性:值;属性:值;…….}

选择器分类：

基础选择器
1.1 标签选择器
1.2 类选择器
1.3 ID选择器
复合选择器

标签选择器其实就是html代码中的标签
HTML中标签:<html>、<body>、<h1>、<p>、<img>等等
CSS简单属性:
width：设置宽度，单位px像素
height：高度
color：前景色，也就是文字的颜色
background-color：背景色。
font-size:字体的大小。

设置p标签的背景色为红色，设置H1标签的字体颜色为绿色，设置span标签的文本为14像素

<style type="text/css">
	p {
		background-color: red;
	}
	h1 {
		color: green;
	}
	span {
		font-size: 14px;
	}
</style>

<style type="text/css">
	.p1 {
		color: green;
	}
	#my-id {
		font-size: 14px;
	}
</style>

页面布局常见命名规范


头	header
内容	content/container
尾	footer
导航	nav
侧栏	sidebar
栏目	column
页面外围控制整体布局宽度	wrapper
左右中	left right center
登录条	loginbar
标志	logo
广告	banner
页面主体	main
热点	hot
新闻	news
下载	download
子导航	subnav
菜单	menu
子菜单	submenu
搜索	search
友情链接	friendlink
页脚	footer
版权	copyright
滚动	scroll
内容	content

通配符选择器用“*”号表示，他是所有选择器中作用范围最广的，能匹配页面中所有的元素。（一般不用）其基本语法格式如下：

*{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }

例如下面的代码，使用通配符选择器定义CSS样式，设置所有HTML标记字体大小

* { font-size:18px; }

属性	值	描述
text-align	center,left,right	文字居中格式
font-size	18px	设置文字大小
font-family	微软雅黑,宋体	设置字体
font-weight	Normal默认，bold粗体，100px	设置字体加粗
font-style	Normal默认，italic斜体	设置字体风格
color	颜色	设置文字颜色

字体名称	英文名称	Unicode 编码
宋体	SimSun	\5B8B\4F53
新宋体	NSimSun	\65B0\5B8B\4F53
黑体	SimHei	\9ED1\4F53
微软雅黑	microsoft yahei	\5FAE\8F6F\96C5\9ED1
楷体_GB2312	KaiTi_GB2312	\6977\4F53_GB2312
隶书	LiSu	\96B6\4E66
幼园	YouYuan	\5E7C\5706
华文细黑	STXihei	\534E\6587\7EC6\9ED1
细明体	MingLiU	\7EC6\660E\4F53
新细明体	PMingLiU	\65B0\7EC6\660E\4F53

CSS字体合写语法格式：

选择器{font: font-style font-weight font-size/line-height font-family}

注意:必须有 字体大小 (font-size )和字体(font-family) , 必须严格按顺序写;

css复合选择器
复合选择器是由两个或多个基础选择器，通过不同的方式组合而成的，具体如下
1、标签指定式选择器（即…又…）
标签指定式选择器又称交集选择器，由两个选择器构成，其中第一个为标记选择器，第二个为class选择器或id选择器，两个选择器之间不能有空格，如h3.special 或 p#one。
h3.class { color: red;}
2、后代选择器(包含选择器)
后代选择器用来选择元素或元素组的后代，其写法就是把外层标记写在前面，内层标记写在后面，中间用空格分隔。当标记发生嵌套时，内层标记就成为外层标记的后代。
.class h3 { color: red;}
3、并集选择器
并集选择器是各个选择器通过逗号连接而成的，任何形式的选择器（包括标记选择器、class类选择器id选择器等），都可以作为并集选择器的一部分。如果某些选择器定义的样式完全相同，或部分相同，就可以利用并集选择器为它们定义相同的CSS样式。
.class, h3 { color: red; font-size:25px;}

请根据以下Css样式写出对应的html结构
<style>
	div.div1 ul.box li, div.div1 p {
		color : red;
	}
</style>

<style>
	div.box p.p1, div.box div.div1 p, p {
		color : red;
	}
</style>