前端web之CSS基础(2)

介绍

CSS用于设计风格和布局,是HTML页面美观。
比如,使用CSS来更改内容的字体、颜色、大小、间距,将内容分为多列,或者添加动画及其他的装饰效果。

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选择器

元素选择器
最常见的 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;}
  • 注意:
    在一个 HTML 文档中,同一种元素的ID 选择器会使用一次,而且仅一次。
    ID 选择器不能结合使用,因为 ID 属性不允许有以空格分隔的词列表。

属性选择器
属性选择器可以根据元素的属性及属性值来选择元素

  • 选择有某个属性的元素,而不论属性值是什么,可以使用简单属性选择器
/*匹配含有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中没有为标签设置样式,则浏览器会按照自己的样式来显示。

  • 注意
    不同浏览器的默认样式有些地方是不一样的。我们在写css时,因为有浏览器兼容性问题,可以首先设置 * {margin:0; padding:0;},全部弄成0,确保各个浏览器都统一。

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)会被内部样式表中的规则取代。

CSS样式

单位

  • em:
    1em 等于当前的字体尺寸。如果一个元素的 font-size 为 16 像素,那么对于该元素,1em 就等于 16 像素。在设置字体大小时,em 的值会相对于父元素的字体大小改变。
    浏览器中默认的文本大小是 16 像素。因此 1em 的默认尺寸是 16 像素。
  • px:
    对于低分辨率设备(绝大部分显示器,手机屏幕),1个css像素相当于最接近参考像素的整数个设备像素
  • %百分比
    相对于父元素的大小比例

背景
可以使用 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 中,有两种不同类型的字体系列名称:

  • 通用字体系列 - 拥有相似外观的字体系统组合(比如 “Serif” 或 “Monospace”)
  • 特定字体系列 - 具体的字体系列(比如 “Times” 或 “Courier”)

除了各种特定的字体系列外,CSS 定义了 5 种通用字体系列:

  • Serif 字体,
  • Sans-serif 字体
  • Monospace 字体
  • Cursive 字体
  • Fantasy 字体

常用属性如下:

属性 说明 示例
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 - 普通的、未被访问的链接
  • a:visited - 用户已访问的链接
  • a:hover - 鼠标指针位于链接的上方
  • a:active - 链接被点击的时刻
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 设置轮廓的宽度。

CSS框模型

框模型 (Box Model) 规定了元素框处理元素内容、内边距、边框 和 外边距 的方式。
前端web之CSS基础(2)_第1张图片
内边距、边框和外边距都是可选的,默认值是零。但是,许多元素将由用户代理样式表设置外边距和内边距。可以通过将元素的 margin 和 padding 设置为零来覆盖这些浏览器样式。这可以分别进行,也可以使用通用选择器对所有元素进行设置:

* {
  margin: 0;
  padding: 0;
}

padding 属性定义元素边框与元素内容之间的空白区域。
border 属性允许你规定元素边框的样式、宽度和颜色。
margin 属性设置外边距。margin 可以设置为 auto。更常见的做法是为外边距设置长度值。

CSS定位

CSS定位

即利用定位和浮动属性,定义元素框相对于其正常位置应该出现的位置,或者相对于父元素、另一个元素甚至浏览器窗口本身的位置。

一切元素皆为框

div、h1 或 p 元素常常被称为块级元素。这意味着这些元素显示为一块内容,即“块框”。与之相反,span 和 strong 等元素称为“行内元素”,这是因为它们的内容显示在行中,即“行内框”。

定位机制

CSS 有三种基本的定位机制:普通流、浮动和绝对定位。
块级框从上到下一个接一个地排列,框之间的垂直距离是由框的垂直外边距计算出来。
通过使用 position 属性,我们可以选择 4 种不同类型的定位,这会影响元素框生成的方式

  • static
    元素框正常生成。块级元素生成一个矩形框,作为文档流的一部分,行内元素则会创建一个或多个行框,置于其父元素中。
  • relative
    元素框偏移某个距离。元素仍保持其未定位前的形状,它原本所占的空间仍保留。
    如果对一个元素进行相对定位,它将出现在它所在的位置上。然后,可以通过设置垂直或水平位置,让这个元素“相对于”它的起点进行移动。
    例如:
    将 top 设置为 20px,那么框将在原位置顶部下面 20 像素的地方。如果 left 设置为 30 像素,那么会在元素左边创建 30 像素的空间,也就是将元素向右移动。
#box_relative {
  position: relative;
  left: 30px;
  top: 20px;
}

效果如下:
前端web之CSS基础(2)_第2张图片
注意,在使用相对定位时,无论是否进行移动,元素仍然占据原来的空间。因此,移动元素会导致它覆盖其它框。

  • absolute
    元素框从文档流完全删除,并相对于其包含块定位。包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭,就好像元素原来不存在一样。元素定位后生成一个块级框,而不论原来它在正常流中生成何种类型的框。
    绝对定位使元素的位置与文档流无关,因此不占据空间。这一点与相对定位不同,相对定位实际上被看作普通流定位模型的一部分,因为元素的位置相对于它在普通流中的位置。
    普通流中其它元素的布局就像绝对定位的元素不存在一样,
    例如。
#box_relative {
  position: absolute;
  left: 30px;
  top: 20px;
}

效果如下:
前端web之CSS基础(2)_第3张图片
绝对定位的元素的位置相对于最近的已定位祖先元素,如果元素没有已定位的祖先元素,那么它的位置相对于最初的包含块。

  • fixed
    元素框的表现类似于将 position 设置为 absolute,不过其包含块是视窗本身。

浮动

浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止。
由于浮动框不在文档的普通流中,所以文档的普通流中的块框表现得就像浮动框不存在一样。
前端web之CSS基础(2)_第4张图片

参考文献:
如何创建CSS
CSS选择器
CSS样式

你可能感兴趣的:(前端)