CSS复习（上）——基础和样式

最新推荐文章于 2024-03-29 09:39:27 发布

百里一兔

最新推荐文章于 2024-03-29 09:39:27 发布

阅读量572

点赞数

分类专栏：阶段复习 Web_CSS 文章标签： 20190915

本文链接：https://blog.csdn.net/lb569484787/article/details/100848433

版权

阶段复习同时被 2 个专栏收录

25 篇文章 0 订阅

订阅专栏

Web_CSS

11 篇文章 0 订阅

订阅专栏

一、CSS简介

1.CSS概述
●CSS 指层叠样式表 (Cascading Style Sheets)
●样式定义如何显示 HTML 元素
●样式通常存储在样式表中
●把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题
●外部样式表可以极大提高工作效率
●外部样式表通常存储在 CSS 文件中
●多个样式定义可层叠为一

2.多重样式将层叠为一个
样式表允许以多种方式规定样式信息。样式可以规定在单个的 HTML 元素中，在 HTML 页的头元素中，或在一个外部的 CSS 文件中。甚至可以在同一个 HTML 文档内部引用多个外部样式表。

层叠次序：
一般而言，所有的样式会根据下面的规则层叠于一个新的虚拟样式表中，其中数字 4 拥有最高的优先权。优先权大小：1~4。
（1）浏览器缺省设
（2）外部样式表
（3）内部样式表（位于 <head> 标签内部）
（4）内联样式（在 HTML 元素内部）

因此，内联样式（在 HTML 元素内部）拥有最高的优先权，这意味着它将优先于以下的样式声明：<head> 标签中的样式声明，外部样式表中的样式声明，或者浏览器中的样式声明（缺省值）。

二、CSS语法

1.CSS基础语法
（1）CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明。

selector {declaration1; declaration2; ... declarationN }

选择器通常是您需要改变样式的 HTML 元素。
每条声明由一个属性和一个值组成。
属性（property）是您希望设置的样式属性（style attribute）。每个属性有一个值。属性和值被冒号分开。

selector {property: value}

（2）值的不同写法和单位
颜色例子：除了英文单词 red，

p { color: #ff0000; }//我们还可以使用十六进制的颜色值 #ff0000
p { color: #f00; }//CSS 的缩写形式,节约字节
p { color: rgb(255,0,0); }  //使用 RGB 值
p { color: rgb(100%,0%,0%); }

请注意，当使用 RGB 百分比时，即使当值为 0 时也要写百分比符号。但是在其他的情况下就不需要这么做了。比如说，当尺寸为 0 像素时，0之后不需要使用 px 单位，因为 0 就是 0，无论单位是什么。

（3）记得写引号
如果值为若干单词，则要给值加引号：

p {font-family: "sans serif";}

（4）多重声明
如果要定义不止一个声明，则需要用分号将每个声明分开。最后一个可写可不写。最好写“；”。

（5）空格和大小写
是否包含空格不会影响 CSS 在浏览器的工作效果，同样，与 XHTML 不同，CSS 对大小写不敏感。不过存在一个例外：如果涉及到与 HTML 文档一起工作的话，class 和 id 名称对大小写是敏感的。

2.高级语法
（1）选择器的分组
你可以对选择器进行分组，这样，被分组的选择器就可以分享相同的声明。
用逗号将需要分组的选择器分开。例如：

h1,h2,h3,h4,h5,h6 {
  color: green;
  }

（2）继承及其问题
根据 CSS，子元素从父元素继承属性。但是它并不总是按此方式工作。看看下面这条规则：

body {
     font-family: Verdana, sans-serif;
     }

根据上面这条规则，站点的 body 元素将使用 Verdana 字。

通过 CSS 继承，子元素将继承最高级元素（在本例中是 body）所拥有的属性（这些子元素诸如 p, td, ul, ol, ul, li, dl, dt,和 dd）。不需要另外的规则，所有 body 的子元素都应该显示 Verdana 字体，子元素的子元素也一样。并且在大部分的现代浏览器中，也确实是这样的。

怎么摆脱继承？
例如：创建一个针对 p 的特殊规则，这样它就会摆脱父元素的规则

body  {
     font-family: Verdana, sans-serif;
     }

td, ul, ol, ul, li, dl, dt, dd  {
     font-family: Verdana, sans-serif;
     }

p  {
     font-family: Times, "Times New Roman", serif;
     }

三、选择器基础

1.派生选择器
通过依据元素在其位置的上下文关系来定义样式，也称上下文选择器 (contextual selectors)。
比方说，你希望列表中的 strong 元素变为斜体字，而不是通常的粗体字，可以这样定义一个派生选择器：

li strong {
    font-style: italic;
    font-weight: normal;
  }

2.id 选择器
（1）id选择题
id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。
id 选择器以 “#” 来定义。
下面的两个 id 选择器，第一个可以定义元素的颜色为红色，第二个定义元素的颜色为绿色：

#red {color:red;}
#green {color:green;}

下面的 HTML 代码中，id 属性为 red 的 p 元素显示为红色，而 id 属性为 green 的 p 元素显示为绿色。

<p id="red">这个段落是红色。</p>
<p id="green">这个段落是绿色。</p>

（2）id 选择器和派生选择器
在现代布局中，id 选择器常常用于建立派生选择器。
id 选择器作为派生选择器也可以被使用很多次。

#sidebar p {
	font-style: italic;
	text-align: right;
	margin-top: 0.5em;
	}
	
#sidebar h2 {
	font-size: 1em;
	font-weight: normal;
	font-style: italic;
	margin: 0;
	line-height: 1.5;
	text-align: right;
	}

id 选择器即使不被用来创建派生选择器，它也可以独立发挥作用。

3.类选择器
（1）在 CSS 中，类选择器以一个点号显示：

.center {text-align: center}

类名的第一个字符不能使用数字！它无法在 Mozilla 或 Firefox 中起作用。

（2）和 id 一样，class 也可被用作派生选择器：

.fancy td {
	color: #f60;
	background: #666;
	}

（3）元素也可以基于它们的类而被选择：

 td.fancy {
    	color: #f60;
    	background: #666;
    	}

在上面的例子中，类名为 fancy 的表格单元将是带有灰色背景的橙色。

<td class="fancy">

4.属性选择器
对带有指定属性的 HTML 元素设置样式。
可以为拥有指定属性的 HTML 元素设置样式，而不仅限于 class 和 id 属性。
下面的例子为带有 title 属性的所有元素设置样式：

[title]
{
color:red;
}

属性和值选择器
下面的例子为 title=“W3School” 的所有元素设置样式：

[title=W3School]
{
border:5px solid blue;
}

设置表单的样式
属性选择器在为不带有 class 或 id 的表单设置样式时特别有用：

input[type="text"]
{
  width:150px;
  display:block;
  margin-bottom:10px;
  background-color:yellow;
  font-family: Verdana, Arial;
}

input[type="button"]
{
  width:120px;
  margin-left:35px;
  display:block;
  font-family: Verdana, Arial;
}

●总结：
（1）CSS [attribute] 选择器
用于选取带有指定属性的元素。
为带有 target 属性的 <a> 元素设置样式：

a[target]
{ 
background-color:yellow;
}

（2）CSS [attribute=value] 选择器
用于选取带有指定属性和值的元素。
为 target="_blank" 的 <a> 元素设置样式：

a[target=_blank]
{ 
background-color:yellow;
}

（3）CSS [attribute~=value] 选择器
用于选取属性值中包含指定词汇的元素。
选择 titile 属性包含单词 “flower” 的元素，并设置其样式：

[title~=flower]
{ 
background-color:yellow;
}

（4）CSS [attribute|=value] 选择器
用于选取带有以指定值开头的属性值的元素，该值必须是整个单词。
选择 lang 属性值以 “en” 开头的元素，并设置其样式：

[lang|=en]
{ 
background-color:yellow;
}

（5）CSS3 [attribute^=value] 选择器
匹配属性值以指定值开头的每个元素。
设置 class 属性值以 “test” 开头的所有 div 元素的背景色：

div[class^="test"]
{
background:#ffff00;
}

（6）CSS3 [attribute$=value] 选择器
匹配属性值以指定值结尾的每个元素。
设置 class 属性值以 “test” 结尾的所有 div 元素的背景色：

div[class$="test"]
{
background:#ffff00;
}

（7）CSS3 [attribute*=value] 选择器

匹配属性值中包含指定值的每个元素。
设置 class 属性值包含 “test” 的所有 div 元素的背景色：

div[class*="test"]
{
background:#ffff00;
}

四、CSS的创建

1.如何插入样式表
当读到一个样式表时，浏览器会根据它来格式化 HTML 文档。插入样式表的方法有三种：
（1）外部样式表
当样式需要应用于很多页面时，外部样式表将是理想的选择。在使用外部样式表的情况下，你可以通过改变一个文件来改变整个站点的外观。每个页面使用 <link> 标签链接到样式表。<link> 标签在（文档的）头部：

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>

浏览器会从文件 mystyle.css 中读到样式声明，并根据它来格式文档。
外部样式表可以在任何文本编辑器中进行编辑。文件不能包含任何的 html 标签。样式表应该以 .css 扩展名进行保存。
不要在属性值与单位之间留有空格。

（2）内部样式表
当单个文档需要特殊的样式时，就应该使用内部样式表。你可以使用 <style> 标签在文档头部定义内部样式表，就像这样:

<head>
<style type="text/css">
  hr {color: sienna;}
  p {margin-left: 20px;}
  body {background-image: url("images/back40.gif");}
</style>
</head>

（3）内联样式
由于要将表现和内容混杂在一起，内联样式会损失掉样式表的许多优势。
要使用内联样式，你需要在相关的标签内使用样式（style）属性。Style 属性可以包含任何 CSS 属性。本例展示如何改变段落的颜色和左外边距：

<p style="color: sienna; margin-left: 20px">
This is a paragraph
</p>

2.多重样式
如果某些属性在不同的样式表中被同样的选择器定义，那么属性值将从更具体的样式表中被继承过来。
注意优先级！属性叠加后自己筛选。

五、CSS样式

1.CSS背景
CSS 允许应用纯色作为背景，也允许使用背景图像创建相当复杂的效果。
CSS 在这方面的能力远远在 HTML 之上。
所有背景属性都不能继承。

●background 简写属性在一个声明中设置所有的背景属性。

background: #ff0000 url(/i/eg_bg_03.gif) no-repeat fixed center;

可以设置：

background-color         //规定要使用的背景颜色。
background-position      //规定背景图像的位置。
background-size<css3>    //规定背景图片的尺寸。          
background-repeat        //规定如何重复背景图像。
background-origin<css3>  //规定背景图片的定位区域。   
background-clip<css3>    //规定背景的绘制区域。      
background-attachment //规定背景图像是否固定或者随着页面的其余部分滚动。
background-image         //规定要使用的背景图像。
inherit	                 //规定应该从父元素继承 background 属性的设置。

（1）背景色
可以使用 background-color 属性为元素设置背景色。这个属性接受任何合法的颜色值。
background-color 不能继承，其默认值是 transparent。transparent 有“透明”之意。也就是说，如果一个元素没有指定背景色，那么背景就是透明的，这样其祖先元素的背景才能可见。

（2）背景图像
要把图像放入背景，需要使用 background-image 属性。background-image 属性的默认值是 none，表示背景上没有放置任何图像。

background-image：url（/i/eg_bg_04.gif）

（3）背景重复
如果需要在页面上对背景图像进行平铺，可以使用 background-repeat 属性。

属性值（默认）repeat 导致图像在水平垂直方向上都平铺，就像以往背景图像的通常做法一样。

repeat-x 和 repeat-y 分别导致图像只在水平或垂直方向上重复，no-repeat 则不允许图像在任何方向上平铺，背景图像将仅显示一次。nherit 规定应该从父元素继承 background-repeat 属性的设置。

（4）背景定位
可以利用 background-position 属性改变图像在背景中的位置。
属性值：top、bottom、left、right 和 center。
单位：cm,px……
下面的例子在 body 元素中将一个背景图像居中放置：

body
  { 
    background-image:url('/i/eg_bg_03.gif');
    background-repeat:no-repeat;
    background-position:center;
  }

1°关键字
图像放置关键字最容易理解，其作用如其名称所表明的。例如，top right 使图像放置在元素内边距区的右上角。
根据规范，位置关键字可以按任何顺序出现，只要保证不超过两个关键字 - 一个对应水平方向，另一个对应垂直方向。
如果只出现一个关键字，则认为另一个关键字是 center。

下面是等价的位置关键字：

单一关键字	等价的关键字
center	center center
top	top center 或 center top
bottom	bottom center 或 center bottom
right	right center 或 center right
left	left center 或 center left

2°百分数值
百分数值的表现方式更为复杂。
换句话说，百分数值同时应用于元素和图像

3°长度值
长度值解释的是元素内边距区左上角的偏移。偏移点是图像的左上角。

（5）背景关联
如果文档比较长，那么当文档向下滚动时，背景图像也会随之滚动。当文档滚动到超过图像的位置时，图像就会消失。

可以通过 background-attachment 属性防止这种滚动。通过这个属性，可以声明图像相对于可视区是固定的（fixed），因此不会受到滚动的影响

●background-attachment 属性设置背景图像是否固定或者随着页面的其余部分滚动。
scroll：默认值。背景图像会随着页面其余部分的滚动而移动。
fixed：当页面的其余部分滚动时，背景图像不会移动。
inherit：规定应该从父元素继承 background-attachment 属性的设置。

2.文本
通过文本属性，您可以改变文本的颜色、字符间距，对齐文本，装饰文本，对文本进行缩进，等等。
（1）缩进文本text-indent
text-indent 属性，所有元素的第一行都可以缩进一个给定的长度，甚至该长度可以是负值。
这个属性最常见的用途是将段落的首行缩进，下面的规则会使所有段落的首行缩进 5 em：

p {text-indent: 5em;}

一般来说，可以为所有块级元素应用 text-indent，但无法将该属性应用于行内元素，图像之类的替换元素上也无法应用 text-indent 属性。如果想把一个行内元素的第一行“缩进”，可以用左内边距或外边距创造这种效果。

text-indent 还可以设置为负值。利用这种技术，可以实现很多有趣的效果，比如“悬挂缩进”，即第一行悬挂在元素中余下部分的左边。

p {text-indent: -5em; padding-left: 5em;}

text-indent 可以使用所有长度单位，包括百分比值。
百分数要相对于缩进元素父元素的宽度。换句话说，如果将缩进值设置为 20%，所影响元素的第一行会缩进其父元素宽度的 20%。

text-indent 属性可以继承。

（2）水平对齐text-align
text-align 是一个基本的属性，它会影响一个元素中的文本行互相之间的对齐方式。
left、right 和 center 会导致元素中的文本分别左对齐、右对齐和居中。
justify：实现两端对齐文本效果。
inherit：规定应该从父元素继承 text-align 属性的值。

（3）字间隔word-spacing
word-spacing 属性可以改变字（单词）之间的标准间隔。其默认值 normal 与设置值为 0 是一样的。
word-spacing 属性接受一个正长度值或负长度值。如果提供一个正长度值，那么字之间的间隔就会增加。为 word-spacing 设置一个负值，会把它拉近。

（4）字母间隔letter-spacing
letter-spacing 属性与 word-spacing 的区别在于，字母间隔修改的是字符或字母之间的间隔。
与 word-spacing 属性一样，letter-spacing 属性的可取值包括所有长度。默认关键字是 normal（这与 letter-spacing:0 相同）。输入的长度值会使字母之间的间隔增加或减少指定的量。

（5）字符转换text-transform
text-transform 属性处理文本的大小写。
这个属性有 4 个值：

none、uppercase、lowercase、capitalize

默认值 none 对文本不做任何改动，将使用源文档中的原有大小写。顾名思义，uppercase 和 lowercase 将文本转换为全大写和全小写字符。
最后，capitalize 只对每个单词的首字母大写。

（6）文本装饰 text-decoration
text-decoration 属性，这是一个很有意思的属性，它提供了很多非常有趣的行为。
text-decoration 有 5 个值：
●none：默认。定义标准的文本。
●underline：定义文本下的一条线。
●overline：定义文本上的一条线。
●line-through：定义穿过文本下的一条线。
●blink：定义闪烁的文本。
●inherit：规定应该从父元素继承 text-decoration 属性的值。

不过要注意的是，如果两个不同的装饰都与同一元素匹配，胜出规则的值会完全取代另一个值。请考虑以下的规则：

h2.stricken {text-decoration: line-through;}
h2 {text-decoration: underline overline;}

对于给定的规则，所有 class 为 stricken 的 h2 元素都只有一个贯穿线装饰，而没有下划线和上划线，因为 text-decoration 值会替换而不是累积起来。

（7）处理空白符white-space
white-space 属性会影响到用户代理对源文档中的空格、换行和 tab 字符的处理。
可能的值
normal ：默认。空白会被浏览器忽略。
pre：空白会被浏览器保留。其行为方式类似 HTML 中的 <pre> 标签。
nowrap：文本不会换行，文本会在在同一行上继续，直到遇到 <br> 标签为止。
pre-wrap ：保留空白符序列，但是正常地进行换行。
pre-line ：合并空白符序列，但是保留换行符。
inherit ：规定应该从父元素继承 white-space 属性的值。
在这里插入图片描述
（8）文本方向direction
direction 属性规定文本的方向 / 书写方向。
该属性指定了块的基本书写方向，以及针对 Unicode 双向算法的嵌入和覆盖方向。
ltr ：默认。文本方向从左到右。
rtl：文本方向从右到左。
inherit：规定应该从父元素继承 direction 属性的值。

（9）文本颜色 color

（10）文本行高line-height

3.字体
CSS 字体属性定义文本的字体系列、大小、加粗、风格（如斜体）和变形（如小型大写字母）。
（1）字体类型font-family
使用 font-family 属性定义文本的字体系列。

（2）字体风格font-style
font-style 属性最常用于规定斜体文本。

该属性有三个值：
normal - 文本正常显示
italic - 文本斜体显示
oblique - 文本倾斜显示

（3）字体变形font-variant
font-variant 属性可以设定小型大写字母。
小型大写字母不是一般的大写字母，也不是小写字母，这种字母采用不同大小的大写字母。

（4）字体加粗font-weight
font-weight 属性设置文本的粗细。
使用 bold 关键字可以将文本设置为粗体。
normal ：默认值。定义标准的字符。
bold：定义粗体字符。
bolder：定义更粗的字符。
lighter ：定义更细的字符、
inherit ：规定应该从父元素继承字体的粗细。
定义由粗到细的字符。400 等同于 normal，而 700 等同于 bold。
关键字 100 ~ 900 为字体指定了 9 级加粗度。如果一个字体内置了这些加粗级别，那么这些数字就直接映射到预定义的级别，100 对应最细的字体变形，900 对应最粗的字体变形。数字 400 等价于 normal，而 700 等价于 bold。

（5）font 简写属性
作用是把所有针对字体的属性设置在一个声明中。
font-style：规定字体样式。参阅：font-style 中可能的值。
可能的值：
font-variant：规定字体异体。参阅：font-variant 中可能的值。
font-weight ：规定字体粗细。参阅：font-weight 中可能的值。
font-size/line-height：规定字体尺寸和行高。参阅：font-size 和 line-height 中可能的值。
font-family：规定字体系列。参阅：font-family 中可能的值。
caption ：定义被标题控件（比如按钮、下拉列表等）使用的字体。
icon：定义被图标标记使用的字体。
menu：定义被下拉列表使用的字体。
message-box：定义被对话框使用的字体。
small-caption： caption 字体的小型版本。
status-bar：定义被窗口状态栏使用的字体。

（6）字体大小 font-size

（7）font-variant 属性
设置小型大写字母的字体显示文本，这意味着所有的小写字母均会被转换为大写，但是所有使用小型大写字体的字母与其余文本相比，其字体尺寸更小。
normal ：默认值。浏览器会显示一个标准的字体。
small-caps：浏览器会显示小型大写字母的字体。
inherit ：规定应该从父元素继承 font-variant 属性的值。

4.链接
我们能够以不同的方法为链接设置样式。
（1）设置链接的样式
能够设置链接样式的 CSS 属性有很多种（例如 color, font-family, background 等等）。
链接的特殊性在于能够根据它们所处的状态来设置它们的样式。
链接的四种状态：
a:link - 普通的、未被访问的链接
a:visited - 用户已访问的链接
a:hover - 鼠标指针位于链接的上方
a:active - 链接被点击的时刻

love、hate原则
a:hover 必须位于 a:link 和 a:visited 之后
a:active 必须位于 a:hover 之后

（2）常见的链接样式
1° 文本修饰
text-decoration 属性大多用于去掉链接中的下划线。
●none：默认。定义标准的文本。
●underline：定义文本下的一条线。
●overline：定义文本上的一条线。
●line-through：定义穿过文本下的一条线。
●blink：定义闪烁的文本。
●inherit：规定应该从父元素继承 text-decoration 属性的值。

2° 背景色
background-color 属性规定链接的背景色。

六、CSS列表

2.列表项图像
有时，常规的标志是不够的。你可能想对各标志使用一个图像，这可以利用 list-style-image 属性做到。

ul li {list-style-image : url(xxx.gif)}

只需要简单地使用一个 url() 值，就可以使用图像作为标志。

3.列表标志位置
CSS2.1 可以确定标志出现在列表项内容之外还是内容内部。这是利用 list-style-position 完成的。
inside ：列表项目标记放置在文本以内，且环绕文本根据标记对齐。
outside：默认值。保持标记位于文本的左侧。列表项目标记放置在文本以外，且环绕文本不根据标记对齐。
inherit ：规定应该从父元素继承 list-style-position 属性的值。、
点击此处，查看例子

4.简写列表样式
为简单起见，可以将以上 3 个列表样式属性合并为一个方便的属性：list-style，就像这样：

li {list-style : url(example.gif) square inside}

list-style 的值可以按任何顺序列出，而且这些值都可以忽略。只要提供了一个值，其它的就会填入其默认值。

七、表格

1.表格边框
使用border属性。

table, th, td
  {
  border: 1px solid blue;
  }

请注意，上例中的表格具有双线条边框。这是由于 table、th 以及 td 元素都有独立的边框。
如果需要把表格显示为单线条边框，请使用 border-collapse 属性。

2.折叠边框
border-collapse 属性设置是否将表格边框折叠为单一边框。
separate ：默认值。边框会被分开。不会忽略 border-spacing 和 empty-cells 属性。
collapse ：如果可能，边框会合并为一个单一的边框。会忽略 border-spacing 和 empty-cells 属性。
inherit ：规定应该从父元素继承 border-collapse 属性的值。

●border-spacing：设置分隔单元格边框的距离（仅用于“分离边框”模式）。
如果定义一个 length 参数，那么定义的是水平和垂直间距。
如果定义两个 length 参数，那么第一个设置水平间距，而第二个设置垂直间距。

●empty-cells：设置是否显示表格中的空单元格（仅用于“分离边框”模式）。
hide ：不在空单元格周围绘制边框。
show ：在空单元格周围绘制边框。默认。
inherit ：规定应该从父元素继承 empty-cells 属性的值。

3.表格的宽度和高度
通过 width 和 height 属性定义表格的宽度和高度。

4.表格文本对齐
text-align 和 vertical-align 属性设置表格中文本的对齐方式。
text-align 属性设置水平对齐方式，比如左对齐、右对齐或者居中。
vertical-align 属性设置垂直对齐方式，比如顶部对齐、底部对齐或居中对齐。

5.表格内边距
如需控制表格中内容与边框的距离，请为 td 和 th 元素设置 padding 属性。

6.表格颜色
下面的例子设置边框的颜色，以及 th 元素的文本和背景颜色。

table, td, th
  {
  border:1px solid green;
  }

th
  {
  background-color:green;
  color:white;
  }

7.表格标题
caption-side 属性设置表格标题的位置。
top：默认值。把表格标题定位在表格之上。
bottom：把表格标题定位在表格之下。
inherit ：规定应该从父元素继承 caption-side 属性的值。

8.表格布局
table-layout 属性用来显示表格单元格、行、列的算法规则。
该属性指定了完成表布局时所用的布局算法。固定布局算法比较快，但是不太灵活，而自动算法比较慢，不过更能反映传统的 HTML 表。
automatic：默认。列宽度由单元格内容设定。
fixed：列宽由表格宽度和列宽度设定。
inherit ：规定应该从父元素继承 table-layout 属性的值。

八、轮廓

轮廓（outline）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。
outline 属性规定元素轮廓的样式、颜色和宽度。

注释：轮廓线不会占据空间，也不一定是矩形。

outline 简写属性在一个声明中设置所有的轮廓属性。
可以按顺序设置如下属性：
●outline-color

请始终在 outline-color 属性之前声明 outline-style 属性。元素只有获得轮廓以后才能改变其轮廓的颜色。

●outline-style
none :默认。定义无轮廓。
dotted :定义点状的轮廓。
dashed :定义虚线轮廓。
solid :定义实线轮廓。
double :定义双线轮廓。双线的宽度等同于 outline-width 的值。
groove: 定义 3D 凹槽轮廓。此效果取决于 outline-color 值。
ridge :定义 3D 凸槽轮廓。此效果取决于 outline-color 值。
inset :定义 3D 凹边轮廓。此效果取决于 outline-color 值。
outset :定义 3D 凸边轮廓。此效果取决于 outline-color 值。
inherit :规定应该从父元素继承轮廓样式的设置。

●outline-width

请始终在 outline-width 属性之前声明 outline-style 属性。元素只有获得轮廓以后才能改变其轮廓的宽度。

thin：规定细轮廓。
medium ：默认。规定中等的轮廓。
thick ：规定粗的轮廓。
length ：允许您规定轮廓粗细的值。
inherit ：规定应该从父元素继承轮廓宽度的设置。

百里一兔

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
CSS复习（上）——基础和样式

一、CSS简介1.CSS概述●CSS 指层叠样式表 (Cascading Style Sheets)●样式定义如何显示 HTML 元素●样式通常存储在样式表中●把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题●外部样式表可以极大提高工作效率●外部样式表通常存储在 CSS 文件中●多个样式定义可层叠为一2.多重样式将层叠为一个样式表允许以多种方式规定样式信息。样...
复制链接

扫一扫