CSS用于设计风格和布局,是HTML页面美观。
比如,使用CSS来更改内容的字体、颜色、大小、间距,将内容分为多列,或者添加动画及其他的装饰效果。
CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明。
选择器通常是需要改变样式的 HTML 元素或者标签;
每条声明由一个属性和一个值组成。属性(property)是希望设置的样式属性(style attribute)。每个属性有一个值。属性和值被冒号分开。
例如:
h1 {color:red; font-size:14px;}
dd {
color: sienna;
text-align: left;
font-size: large;
}
如果有多个选择器的属性相同,可以对选择器进行分组,被分组的选择器就可以分享相同的声明。用逗号将需要分组的选择器分开,如:
h1,h2,h3,h4,h5,h6 {
color: green;
}
元素选择器
最常见的 CSS 选择器是元素选择器。
选择器通常将是某个 HTML 元素,比如 p、h1、em、a,甚至可以是 html 本身。
h1 {color:red; font-size:14px;}
类选择器
.important_class {color:blue;}
p.important_class {color:blue;}
一个 class 值中可能包含一个词列表,各个词之间用空格分隔。例如,如果希望将一个特定的元素同时标记为重要(important)和警告(warning),就可以写作:
"important warning">
This paragraph is a very important warning.
class 中同时包含 important 和 warning 的所有元素还有一个红色的背景 。CSS就可以写作:
.important.warning {color: red;}
ID 选择器
ID 选择器前面有一个 # 号 。
#intro {font-weight:bold;}
属性选择器
属性选择器可以根据元素的属性及属性值来选择元素
/*匹配含有title属性的元素*/
[title] {color:red;}
/*匹配含有name属性且属性值为“btn_sub”的元素*/
[name="btn_sub"] {color:red;}
/*匹配同时含有name属性和id属性的元素*/
[name][id] {color:green;}
/*匹配p标签且含有name属性的元素*/
p[name="p_aws"] {color:red;}
/*匹配含有name属性, 且属性中含有字段p_aws的元素*/
[name~="p_aws"] {color:green;}
html示例:
/* 能匹配 */
"p_aws swds", id="demo">W3School
/* 不能匹配 */
"p_awsd">python
类型 | 说明 |
---|---|
[abc^=“def”] | 选择 abc 属性值以 “def” 开头的所有元素 |
[abc$=“def”] | 选择 abc 属性值以 “def” 结尾的所有元素 |
[abc*=“def”] | 选择 abc 属性值中包含子串 “def” 的所有元素 |
常用选择器列表
选择器 | 例子 | 说明 |
---|---|---|
.class | .intro | 选择 class=“intro” 的所有元素。 |
#id | #firstname | 选择 id=“firstname” 的所有元素。 |
* | * | 选择所有元素。 |
element | p | 选择所有 元素。 |
element,element | div,p | 选择所有 元素和所有 元素。 |
element element | div p | 选择 元素内部的所有 元素。 |
element>element | div>p | 选择父元素为 元素的所有 元素。 |
element+element | div+p | 选择紧接在 元素之后的所有 元素。 |
[attribute] | [target] | 选择带有 target 属性所有元素。 |
[attribute=value] | [target=_blank] | 选择 target="_blank" 的所有元素。 |
[attribute~=value] | [title~=flower] | 选择 title 属性包含单词 “flower” 的所有元素。 |
[attribute|=value] | [lang | =en] |
:link | a:link | 选择所有未被访问的链接。 |
:visited | a:visited | 选择所有已被访问的链接。 |
:active | a:active | 选择活动链接。 |
:hover | a:hover | 选择鼠标指针位于其上的链接。 |
:focus | input:focus | 选择获得焦点的 input 元素。 |
:first-letter | p:first-letter | 选择每个 元素的首字母。 |
:first-line | p:first-line | 选择每个 元素的首行。 |
:first-child | p:first-child | 选择属于父元素的第一个子元素的每个 元素。 |
:before | p:before | 在每个 元素的内容之前插入内容。 |
:after | p:after | 在每个 元素的内容之后插入内容。 |
:lang(language) | p:lang(it) | 选择带有以 “it” 开头的 lang 属性值的每个 元素。 |
element1~element2 | p~ul | 选择前面有 元素的每个
|
[attribute^=value] | a[src^=“https”] | 选择其 src 属性值以 “https” 开头的每个 元素。 |
[attribute$=value] | a[src$=".pdf"] | 选择其 src 属性以 “.pdf” 结尾的所有 元素。 |
[attribute*=value] | a[src*=“abc”] | 选择其 src 属性中包含 “abc” 子串的每个 元素。 |
插入样式表有如下4种方式:
1. 浏览器缺省设置
当不为html设置任何样式时,显示在浏览器上,b标签会显示粗体、p有纵向margin、h1字号比p大一倍……这是为什么呢?
因为浏览器自带一个默认的样式,如果html中没有为标签设置样式,则浏览器会按照自己的样式来显示。
2. 外部样式表
使用场景
当样式需要应用于很多页面时,外部样式表将是理想的选择。在使用外部样式表的情况下,你可以通过改变一个文件来改变整个站点的外观。
用法
每个页面使用 标签链接到样式表。 标签在(文档的)头部。
有三个属性用于设置外部样式表:
href: 值为外部资源地址,这里是css的地址
rel:定义当前文档与被链接文档之间的关系,这里是外部css样式表即stylesheet
type: 规定被链接文档的 MIME 类,这里是值为text/css
示例
例如:定义网站所有页面中h,body,p标签风格一致整体风格保持一致
第一步:先在HTML网页文件同级目录创建css文件目录styles, 然后在该目录下创建mystyle.css文件。内容如下:
hr {color: sienna;}
p {margin-left: 20px;}
body {background-image: url("images/bg_img.gif");}
第二步:在网页文件 home.html的head标签中引用mystyle.css。
文件不能包含任何的 html 标签。样式表应该以 .css 扩展名进行保存。
"stylesheet" type="text/css" href="styles/mystyle.css" />
3. 内部样式表(位于 标签内部)
当单个文档需要特殊的样式时,就应该使用内部样式表。你可以使用
4. 内联样式(在 HTML 元素内部)
当样式仅需要在一个元素上应用一次时,使用内联样式。
要使用内联样式,需要在相关的标签内使用样式(style)属性。Style 属性可以包含任何 CSS 属性。
"demo" style="color: sienna; margin-left: 20px">段落示例
以上4中插入方式中,数字 4 拥有最高的优先权。
在有多种样式表定义时,内联样式(在 HTML 元素内部)拥有最高的优先权,这意味着它将优先于以下的样式声明: 标签中的样式声明,外部样式表中的样式声明,或者浏览器中的样式声明(缺省值)。
如果某些属性在不同的样式表中被同样的选择器定义,那么属性值将从更具体的样式表中被继承过来。
例如,外部样式表拥有针对 h3 选择器的三个属性:
h3 {
color: red;
text-align: left;
font-size: 8pt;
}
而内部样式表拥有针对 h3 选择器的两个属性:
h3 {
text-align: right;
font-size: 20pt;
}
假如拥有内部样式表的这个页面同时与外部样式表链接,那么 h3 得到的样式是:
color: red;
text-align: right;
font-size: 20pt;
即颜色属性将被继承于外部样式表,而文字排列(text-alignment)和字体尺寸(font-size)会被内部样式表中的规则取代。
单位
背景
可以使用 background-color 属性为元素设置背景色。这个属性接受任何合法的颜色值。
属性 | 说明 | 示例 |
---|---|---|
background | 简写属性,作用是将背景属性设置在一个声明中。 | |
background-color | 设置元素的背景颜色。 | p {background-color: gray;} |
background-position | 改变图像在背景中的位置,可以使用一些关键字:top、bottom、left、right 和 center | p {background-position:center;} |
background-image | 把图像放入背景,属性值 repeat 导致图像在水平垂直方向上都平铺 | body {background-image: url(/i/eg_bg_04.gif);} |
background-repeat | 在页面上对背景图像进行平铺 | body {background-repeat:no-repeat;} |
background-attachment | background-attachment 属性的默认值是 scroll,也就是说,在默认的情况下,背景会随文档滚动。 | body {background-attachment:fixed} |
文本
文本属性,您可以改变文本的颜色、字符间距,对齐文本,装饰文本,对文本进行缩进,等等。
属性 | 说明 | 示例 |
---|---|---|
text-indent | 文本缩进, 可以设置为text-indent 可以使用所有长度单位,包括百分比值和负值 。百分数要相对于缩进元素父元素的宽度。text-indent 属性可以继承 | 段落首行缩进 p {text-indent: 5em;} |
text-align | 元素中的文本行互相之间的对齐方式。共有5种对齐方式: 值 left、right 和 center 会导致元素中的文本分别左对齐、右对齐和居; justify为水平居中,两端对齐文本中,文本行的左右两端都放在父元素的内边界上。然后,调整单词和字母间的间隔,使各行的长度恰好相等。 inherit,规定应该从父元素继承 text-align 属性的值。该属性默认值为left。 |
设置标题居中 h1,h2,h3 { text-align:center; } |
word-spacing | 改变字(单词)之间的标准间隔。word-spacing 属性接受一个正长度值或负长度值。其默认值 normal 与设置值为 0 是一样。如果提供一个正长度值,那么字之间的间隔就会增加。为 word-spacing 设置一个负值,会把它拉近。 | 把段落p中文本拉近 p.tight {word-spacing: -0.5em;} |
letter-spacing | 字母间隔,字母间隔修改的是字符或字母之间的间隔。letter-spacing 属性与 word-spacing 的区别在于,字母间隔修改的是字符或字母之间的间隔。 | 设置标题字母之间间隔 h4 {letter-spacing: 20px} |
text-transform | 处理文本的大小写。有4个属性值:none,uppercase全部字母大写,lowercase全部字母小写,capitalize只对每个单词的首字母大写 | 标题大写 h1 {text-transform: uppercase} |
text-decoration | 向文本添加修饰,有 5 个值:none、underline 、overline、line-through、blink文本闪烁。还可以在一个规则中结合多种装饰 | 给超链接加上下划线和上划线 a {text-decoration: underline overline;} |
white-space | 通过使用该属性,可以影响浏览器处理字之间和文本行之间的空白符的方式。有4种值:normal,丢掉多余的空白符。如果给定这个值,换行字符(回车)会转换为空格,一行中多个空格的序列也会转换为一个空格;pre,浏览器将会注意额外的空格,甚至回;nowrap,会防止元素中的文本换行,除非使用了一个 br 元素,与pre相反 | 给定p段落中,它在 Web 浏览器中显示时,各个字之间只会显示一个空格,同时忽略元素中的换行 p {white-space: normal;} |
direction | 块级元素中文本的书写方向、表中列布局的方向、内容水平填充其元素框的方向、以及两端对齐元素中最后一行的位置。有2个属性值:ltr,默认值,横向排列;rtl,竖排。 | 定义堕落中古诗文竖排,p.old_poetry { direction: rtl; } |
字体
字体属性定义文本的字体系列、大小、加粗、风格(如斜体)和变形(如小型大写字母)。
在 CSS 中,有两种不同类型的字体系列名称:
除了各种特定的字体系列外,CSS 定义了 5 种通用字体系列:
常用属性如下:
属性 | 说明 | 示例 |
---|---|---|
font-family | 定义文本的字体系列 | 在所有 font-family 规则中都提供一个通用字体系列。这样就提供了一条后路,在用户代理无法提供与规则匹配的特定字体时,就可以选择一个候选字体。需要把这些字体按照优先顺序排列,然后用逗号进行连接: p {font-family: Times, TimesNR, ‘New Century Schoolbook’,Georgia, ‘New York’, serif;} |
font-style | 用于规定斜体文本,该属性有三个值:normal - 文本正常显示;italic - 文本斜体显示;oblique - 文本倾斜显示 | 段落中含有类oblique属性的文本斜体 p.oblique {font-style:oblique;} |
font-weight | 设置文本的粗细,使用 bold 关键字可以将文本设置为粗体。 | p.thick {font-weight:bold;} |
font-size | 设置文本的大小。font-size 值可以是绝对或相对值 | 二级标题为40px大小 h2 {font-size:2.5em;} |
font | 简写属性。作用是把所有针对字体的属性设置在一个声明中。 | p.ex2 { font:italic bold 12px/30px arial,sans-serif;} |
链接
能够设置链接样式的 CSS 属性有很多种(例如 color, font-family, background 等等)。
链接的特殊性在于能够根据它们所处的状态来设置它们的样式。
链接的四种状态:
a:link {color:#FF0000;} /* 未被访问的链接 */
a:visited {color:#00FF00;} /* 已被访问的链接 */
a:hover {color:#FF00FF;} /* 鼠标指针移动到链接上 */
a:active {color:#0000FF;} /* 正在被点击的链接 */
列表
列表属性允许你放置、改变列表项标志,或者将图像作为列表项标志。
例如,在一个无序列表中,列表项的标志 (marker) 是出现在各列表项旁边的圆点。在有序列表中,标志可能是字母、数字或另外某种计数体系中的一个符号。
常用属性如下:
属性 | 说明 | 示例 |
---|---|---|
list-style-type | 列表项的标志类型 | 把无序列表中的列表项标志设置为方块 ul {list-style-type : square} |
list-style-image | 对各标志使用一个图像 | 使用图像作为标志 ul li {list-style-image : url(xxx.gif)} |
list-style-position | 规定列表中列表项目标记的位置.可以确定标志出现在列表项内容之外还是内容内部 | ul {list-style-position:inside;} |
list-style | 3 个列表样式属性合并为一个方便的属性。list-style 的值可以按任何顺序列出,而且这些值都可以忽略。只要提供了一个值,其它的就会填入其默认值。 | li {list-style : url(example.gif) square inside} |
表格
CSS 表格属性可以改善表格的外观。
常用属性如下:
属性 | 说明 | 示例 |
---|---|---|
border-collapse | 设置是否将表格边框折叠为单一边框 | 将表格边框折叠为单一边框 table,th, td { border-collapse:collapse;} |
width | 表格的宽度 | 表格宽度设置为 100% table {width:100%;} |
height | 表格的高度 | 表格高度设置为 50px table {height:100%;} |
text-align | 设置水平对齐方式,比如左对齐、右对齐或者居中 | table {text-align:left;} |
vertical-align | 垂直对齐方式,比如顶部对齐、底部对齐或居中对齐 | table {vertical-align:bottom;} |
padding | 控制表格中内容与边框的距离 | table {padding:5px;} |
background-color | 设置表格的背景颜色 | th {background-color :green;} |
轮廓
轮廓(outline)是绘制于元素周围的一条线,位于边框边缘的外围,可起到突出元素的作用。
CSS outline 属性规定元素轮廓的样式、颜色和宽度。
常用属性如下:
属性 | 说明 |
---|---|
outline-color | 设置轮廓的颜色。 |
outline-style | 设置轮廓的样式。 |
outline-width | 设置轮廓的宽度。 |
框模型 (Box Model) 规定了元素框处理元素内容、内边距、边框 和 外边距 的方式。
内边距、边框和外边距都是可选的,默认值是零。但是,许多元素将由用户代理样式表设置外边距和内边距。可以通过将元素的 margin 和 padding 设置为零来覆盖这些浏览器样式。这可以分别进行,也可以使用通用选择器对所有元素进行设置:
* {
margin: 0;
padding: 0;
}
padding 属性定义元素边框与元素内容之间的空白区域。
border 属性允许你规定元素边框的样式、宽度和颜色。
margin 属性设置外边距。margin 可以设置为 auto。更常见的做法是为外边距设置长度值。
即利用定位和浮动属性,定义元素框相对于其正常位置应该出现的位置,或者相对于父元素、另一个元素甚至浏览器窗口本身的位置。
div、h1 或 p 元素常常被称为块级元素。这意味着这些元素显示为一块内容,即“块框”。与之相反,span 和 strong 等元素称为“行内元素”,这是因为它们的内容显示在行中,即“行内框”。
CSS 有三种基本的定位机制:普通流、浮动和绝对定位。
块级框从上到下一个接一个地排列,框之间的垂直距离是由框的垂直外边距计算出来。
通过使用 position 属性,我们可以选择 4 种不同类型的定位,这会影响元素框生成的方式
#box_relative {
position: relative;
left: 30px;
top: 20px;
}
效果如下:
注意,在使用相对定位时,无论是否进行移动,元素仍然占据原来的空间。因此,移动元素会导致它覆盖其它框。
#box_relative {
position: absolute;
left: 30px;
top: 20px;
}
效果如下:
绝对定位的元素的位置相对于最近的已定位祖先元素,如果元素没有已定位的祖先元素,那么它的位置相对于最初的包含块。
浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止。
由于浮动框不在文档的普通流中,所以文档的普通流中的块框表现得就像浮动框不存在一样。
参考文献:
如何创建CSS
CSS选择器
CSS样式