CSS,基本语法

简介:
	在CSS的第一篇博客中看到了CSS带给我们的不一样的视觉体验,本篇博客将继续学习CSS,让我们一起在它的基本语法中领悟它的强大之处。
		一.选择器的类型
	1.标记选择器
	一个HTML页面由很多不同的标记组成,而CSS标记选择器就是声明哪些标记采用哪种CSS样式。
	下图为一个h1选择器代码及说明:

<style>
h1{
    color:red;
    font-size:25px;
}
</style>
	2.类别选择器
	很明显上面的标记选择器适用于全部范围内的设置,而如果想对某个标记设置不一样的属性值,那就无法实现了。所以,接下来介绍类别(Class)选择器。
			类别选择器可以由用户自定义,根据提前设置好的class值进行修改样式即可。
	代码示例:

<title>class选择器</title>
<style type="text/css">
.one{
    color:red;
    font-size:18px;
}
.two{
    color:green;
    font-size:20px;
}
</style>
<body>
    <p class="one">class选择器1</p>
    <p class="two">class选择器2</p>
</body>
	3.ID选择器
	ID选择器的使用方法和class选择器基本相同,不同之处在于ID选择器只能在HTML页面中使用一次,针对性更强。
			代码示例:

<title>ID选择器</title>
<style type="text/css">
#one{
    font-weight:bold;   /*粗体*/
}
#two{
   font-size:30px;
    color:#009900;
}
</style>
<body>
    <p id="one">ID选择器1</p>
    <p id="two">ID选择器2</p>
</body>
	二.选择器声明
	1.集体声明
	在声明各种CSS选择器时,如果某些选择器的风格是完全相同的,或者部分相同,这时便可以利用集体声明的方式,将风格相同的CSS选择器同时声明。
			2.选择器的嵌套
	在CSS选择器中,可以通过嵌套的方式,对特殊位置的HTML标记进行声明。
	如:
					三.CSS的继承
	所有的CSS语句都是基于各个标记之间的父子关系的,下面一张图很详细清晰的展现了它们的关系:
			看到这层层嵌套的关系,不知道大家是否想起了什么呢?CSS的名称,层叠样式表,正是因它而来。
	CSS的基本语法内容也就这些了,学习完后,挺清楚的。在以后的实践中,想要页面布局更吸引人,CSS就可以帮到我们了。


目录
打赏
0
0
0
0
2
分享
相关文章
|
24天前
|
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
40 1
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
139 21
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
61 14
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
|
2月前
css3 svg制作404页面动画效果HTML源码
css3 svg制作404页面动画效果HTML源码
68 34
|
2月前
html+js+css实现的建筑方块立体数字时钟源码
html+js+css实现的建筑方块立体数字时钟源码
96 33

热门文章

最新文章

AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等