• 技术文章 >web前端 >前端问答

    css样式表由哪三部分组成

    青灯夜游青灯夜游2022-05-18 17:16:30原创536

    css样式表的三个组成部分:1、选择器,用于告诉浏览器指定样式将作用于页面中哪些对象;2、属性,是CSS提供的设置好的样式选项,主要包括字体属性、文本属性、背景属性、布局属性等;3、属性值,是指定属性的有效值,属性与属性值间以“:”号分割。

    本教程操作环境:windows7系统、CSS3&&HTML5版、Dell G3电脑。

    css样式表的组成

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

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

    语法说明如下:

    在这里插入图片描述

    CSS选择器

    CSS选择器常用的是标记选择器、类别选择器、包含选择器、ID选择器、类选择器等。使用选择器即可对不同的HTML标签进行控制,从而实现各个效果。下面对三种基本选择器进行详细的介绍。

    1.标签选择器

    HTML页面是由很多标机组成,例如图片标记<img>、超链接标记<a>、表格标记<table>等,而CSS标记选择器就是声明页面中的哪些标记采用哪些CSS标记,例如a选择器,就是用于声明页面中所有<a>标记的样式风格。
    例如:定义a标记选择器,在该标记选择器中定义超链接的字体与颜色。

    <style>
    	a{
    		font_size:9px;
    		color:#F93;
    	}
    </style>

    2.类别选择器

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

    例:

    <html>
    	<style>
    	.one{
    			font-family:宋体;
    			font-size:24px;
    			color:red;
    		}
    	.two{
    			font-family:宋体;
    			font-size:16px;
    			color:red;
    		}
    	.three{
    			font-family:宋体;
    			font-size:12px;
    			color:red;
    		}
    	</style>
    	</head>
    	<body>
    		<h2 class="one">应用选择one</h2><!--定义样式后,页面会自动加载样式-->
    		<p>正文内容1</p>
    		<h2 class="two">应用选择器two</h2>
    		<p>正文内容2</p>
    		<h2 class="three">应用选择器three</h2>
    		<p>正文内容3</p>
    	</body>
    </html>

    在这里插入图片描述

    3.ID选择器

    ID选择器是通过HTML页面中的ID属性来进行选择增添样式的,它与类别选择器的基本相同,但是需要注意的是,由于HTML页面中不能包含两个相同的ID标记,因此定义的ID选择器也只能被使用一次。
    命名ID选择器要以“#”号开始,后加HTML标记中的ID属性值。
    例如:使用ID选择器控制页面中的样式。

    <html>
    	<style>
    	#first{
    			font-size:18px
    		}
    	#two{
    			font-size:24px
    		}
    	#three{
    			font-size:36px
    		}
    	</style>
    	<body>
    		<p id="first">ID选择器1</p>
    		<p id="two">ID选择器2</p>
    		<p id="three">ID选择器3</p>
    	</body>
    </html>

    在这里插入图片描述

    扩展知识:CSS 3的新特征

    模块与模块化结构

    在CSS 3中并没有采取总体结构,而是采用了分工协作的模块化结构。采用这种模式化结构,是为了避免产生浏览器对于某个模块支持不完全的情况。如果把整体分成几个模块,各浏览器可以选择支持哪个模块,不支持哪个模块。

    CSS 3中的常用模块如下表所示:

    模块名称功能描述
    Basic Box Model定义各种与盒子相关的模块
    Line定义各种与直线相关的样式
    Lists定义各种与列表相关的样式
    Text定义各种与文字相关的样式
    Color定义各种与颜色相关的样式
    Font定义各种与字体相关的样式
    Background and Border定义各种与背景和边框相关的样式
    Paged Media定义各种页眉、页脚、页数等页面元素数据的样式
    Writing Modes定义页面中文本数据的布局方式

    (学习视频分享:css视频教程web前端

    以上就是css样式表由哪三部分组成的详细内容,更多请关注php中文网其它相关文章!

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
    专题推荐:css CSS3 html
    上一篇:jquery中callback方法怎么用 下一篇:css能调字与字左右的间距吗
    20期PHP线上班

    相关文章推荐

    精选22门好课,价值3725元,开通VIP免费学习!• css3怎么设置动画旋转速度• css3怎么设置input不可编辑• css3怎么实现元素过渡效果• css3怎么实现高度渐变效果• 快看!10个不错的CSS实用小技巧(分享)• css中margin-right什么意思
    1/1

    PHP中文网