一文了解CSS样式表结构
1.CSS规则
在CSS样式表中包括三个部分的内容:选择符、属性和属性值。语法样式如下:
选择符{属性:属性值;}
语法说明如下:
- 选择符:又称选择器,是CSS中很重要的概念,所有HTML中的标记都是通过不同的CSS选择器进行控制的。
- 属性:主要包括字体属性、文本属性、背景属性、布局属性、边界属性、列表项目属性、表格属性等内容。其中一些属性只有部分浏览器支持,因此使用CSS属性的使用变得更加复杂。
- 属性值:某属性的有效值。属性与属性值之间以“:”号分割。当有多个属性值时,使用“;”分隔。
2.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>
3.在页面中包含CSS
1.行内样式
- 行内样式是比较直观的一种样式,它直接定义在HTML标记之内,通过style属性来实现。这种方式比较容易接受但是灵活性不强。
2.内嵌式
- 内嵌式样式就是在页面中使用标记将CSS包含在页面中。内嵌样式表的形式没有行内标记表现的直接,但是能够使页面更加的规整。
- 与行内样式相比,内嵌式样式表更加便于维护,但是如果整个网站都由不同页面构成,而每个页面中相同的HTML标记都要求有相同的样式,此时使用内嵌式样式表就显得计较笨重,而用链接式可以解决这一问题。
3.链接式
- 链接外部CSS样式表是最常用的一种引用样式表的方式,他讲CSS样式定义在一个单独的文件中,然后在HTML页面中通过标记引用,是一种最为有效的使用CSS样式的方式。
标记的语法结构如下:
<link rel='stylesheet' href='path' type='text/css'>
参数说明如下:
- rel:定义外部文档和调用文档间的关系。
- href:CSS文档的绝对路径或相对路径。
- type:外部文件的MME类型
3.CSS 3的新特征
模块与模块化结构
在CSS 3中并没有采取总体结构,而是采用了分工协作的模块化结构。采用这种模式化结构,是为了避免产生浏览器对于某个模块支持不完全的情况。如果把整体分成几个模块,各浏览器可以选择支持哪个模块,不支持哪个模块。 CSS 3中的常用模块如下表所示:
模块名称 |
功能描述 |
---|---|
Basic Box Model |
定义各种与盒子相关的模块 |
Line |
定义各种与直线相关的样式 |
Lists |
定义各种与列表相关的样式 |
Text |
定义各种与文字相关的样式 |
Color |
定义各种与颜色相关的样式 |
Font |
定义各种与字体相关的样式 |
Background and Border |
定义各种与背景和边框相关的样式 |
Paged Media |
定义各种页眉、页脚、页数等页面元素数据的样式 |
Writing Modes |
定义页面中文本数据的布局方式 |
- HTML 教程
- HTML 简介
- html div 标签介绍
- html span 标签介绍
- html a 超链接标签
- HTML Br换行标签介绍
- HTML P段落标签介绍
- HTML br与p标签区别
- Html H 标题标签
- html px em pt长度单位
- HTML form 标签
- HTML radio 单选框
- HTML B 加粗标签
- HTML strong加粗粗体标签
- HTML em 强调标签
- HTML i 斜体标签
- HTML u下划线标签
- HTML s 删除线标签
- Html img 图片标签
- Html上标注sup与下标注sub标签
- HTML nobr 禁止换行标签
- HTML hr 水平线标签
- HTML label 标签
- HTML input 标签
- HTML textarea 标签
- HTML select下拉列表标签
- HTML checkbox 多选框
- HTML font color 标签
- HTML iframe 框架标签
- HTML Table 表格
- HTML dl dt dd 标签
- HTML ol li有序列表标签
- HTML ul li 无序列表标签
- HTML 注释
- CSS 教程
- CSS 简介
- CSS 语法
- CSS Id 和 Class选择器
- CSS 样式的创建
- CSS background 背景介绍
- CSS 文本样式
- CSS font 字体
- CSS A 链接
- CSS ul ol列表样式
- CSS TABLE 样式
- CSS 框模型
- CSS border 边框
- CSS Outlines 轮廓
- CSS 外边距 Margin
- CSS Padding 内边距
- CSS 分组和嵌套选择器
- CSS 尺寸 (Dimension)
- CSS Display 属性
- CSS Position 定位
- CSS Float 浮动
- CSS 水平对齐(Horizontal Align)
- CSS 组合选择符
- CSS 伪类
- CSS 伪元素
- CSS 导航栏
- CSS 下拉菜单
- CSS 图片廊
- CSS 图像透明/不透明
- CSS sprite 图像拼合技术
- CSS 媒体类型
- CSS 属性选择器
- CSS 实例
- 一天一大 leet(搜索插入位置)难度:简单-Day20200717
- 一天一大 leet(两数之和 II - 输入有序数组)难度:简单-Day20200720
- 一天一大 leet(分割数组的最大值)难度:困难-Day20200725
- 一天一大 leet(矩阵中的最长递增路径)难度:困难-Day20200726
- 一天一大 lee(克隆图)难度:中等-Day20200812
- 一天一大 lee(有效的括号)难度:简单-Day20200814
- 一天一大 leet(判断子序列)难度:简单-Day20200727
- 一天一大 leet(寻宝)难度:困难-Day20200729
- LeetCode刷题记录(easy难度21-40题)
- 一天一大 lee(移除盒子)难度:困难-Day20200815
- LeetCode刷题记录(easy难度1-20题)
- 改变 Python 中线程执行顺序的方法
- 一天一大 leet(整数拆分)难度:中等-Day20200730
- iOS客户端启动速度优化实践
- 一天一大 leet(魔术索引)难度:简单-Day20200731