标签：04 color 元素 28 样式 2021 选择器 CSS 属性

什么是css：

CSS是Cascading Style Sheets（层叠样式表单）的简称。CSS是一种用来表现HTML或XML等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。

css选择器：

每一条css样式定义由两部分组成，形式如下：
[code] 选择器{样式} [/code] 在{}之前的部分就是“选择器”。 “选择器”指明了{}中的“样式”的作用对象，也就是“样式”作用于网页中的哪些元素
1.1 类别选择器
类选择器根据类名来选择
前面以”.”来标志，如：
.demoDiv{
color:#FF0000;
}
在HTML中，元素可以定义一个class的属性。
如：
< div class=“demoDiv” >
这个区域字体颜色为红色
< /div >
同时，我们可以再定义一个元素：
< p class=“demoDiv” >
这个段落字体颜色为红色
< /p >
最后，用浏览器浏览，我们可以发现所有class为demoDiv的元素都应用了这个样式。包括了页面中的div元素和p元素。
上例我们给两个元素都定义了class，但如果有很多个元素都会应用这个元素，那得一个个的定义元素，就会造成页面重复的代码太多，这种现象称为“多类症”。
我们可以改成这样来定义。
< div class=“demoDiv” >
< div >
这个区域字体颜色为红色
< /div >
同时，我们可以再定义一个元素：
< p >
这个段落字体颜色为红色
< /p >
< /div >
这样，我们就只是定义了一个类，同时把样式应用到了所有的元素当中。
1.2 标签选择器
一个完整的HTML页面是有很多不同的标签组成，而标签选择器，则是决定哪些标签
采用相应的CSS样式，(在大环境中你可能处于不同的位置，但是不管怎么样，你总
是穿着同一套衣服，这件衣服就是由标签选择器事先给你限定好的，不管走到哪里
都是这身衣服)比如，在style.css文件中对p标签样式的声明如下：
p{
font-size:12px;
background:#900;
color:090;
}
复制代码则页面中所有p标签的背景都是#900(红色)，文字大小均是12px，颜色为#090(绿色)
，这在后期维护中，如果想改变整个网站中p标签背景的颜色，只需要修改
background属性就可以了，就这么容易！
1.3 ID选择器
ID 选择器可以为标有特定 ID 的 HTML 元素指定特定的样式。 根据元素ID来选择元素，具有唯一性，这意味着同一id在同一文档页面中只能出现一次，例如，你将一个元素的id取值为”navi”，那么在同一页面你就不能再将其他元素id取名为”navi”了。尽管你会发现即便你把几个元素都命名成相同的id名字，css选择器还是会把这些元素都选中应用样式（如class选择器那样），对于css选择器，id属性的唯一性似乎不存在。然而，对于js而言，它只会选择具有相同id名字元素中的第一个。出于一个好的编程习惯，同一个id不要在页面中出现第二次。
前面以”#”号来标志，在样式里面可以这样定义：
#demoDiv{
color:#FF0000;
}
这里代表id为demoDiv的元素的设置它的字体颜色为红色。
我们在页面上定义一个元素把它的ID定义为demoDiv，如：
< div id=“demoDiv” >
这个区域字体颜色为红色
< /div >
用浏览器浏览，我们可以看到因为区域内的颜色变成了红色
再定义一个区域
< div >
这个区域没有定义颜色
< /div >
用浏览器浏览，与预期的一样，区域没有应用样式，所以区域中的字体颜色还是默认的颜色黑色。
1.4 后代选择器
后代选择器也称为包含选择器，用来选择特定元素或元素组的后代，将对父元素的选择放在前面，对子元素的选择放在后面，中间加一个空格分开。后代选择器中的元素不仅仅只能有两个，对于多层祖先后代关系，可以有多个空格加以分开，如id为a、b、c的三个元素，则后代选择器可以写成#a #b #c{}的形式，只要对祖先元素的选择在后代元素之前、中间以空格分开即可。
如：
< style >
.father.child{
color:#0000CC;
}
< /style >
< p class=“father” >
黑色
< label class=“child” >蓝色
< b >也是蓝色< /b >
< /label >
< /p >
这里我们定义了所有class属性为father的元素下面的class属性为child的颜色为蓝色。后代选择器是一种很有用的选择器，使用后代选择器可以更加精确的定位元素。
1.5 子选择器
请注意这个选择器与后代选择器的区别，子选择器（child selector）仅是指它的直接后代，或者你可以理解为作用于子元素的第一个后代。而后代选择器是作用于所有子后代元素。后代选择器通过空格来进行选择，而子选择器是通过“>”进行选择，我们看下面的代码：
Example Source Code
CSS：
#links a {color:red;}
#links > a {color:blue;}
HTML：
< p id=“links” >
< a href="#">Div+CSS教程< /a > >
< span>< a href="#" >CSS布局实例< /a >< /span >
< span >< a href="#">CSS2.0教程< /a >< /span >
< /p >
我们将会看到第一个链接元素“Div+CSS教程”会显示成蓝色，而其它两个元素会显示成红色。当然，或许你的浏览器并不支持这样的CSS选择符。我们在一开始也强调了不太兼容的现状。
子选择器（>）和后代选择器（空格）的区别：都表示“祖先-后代”的关系，但是>必须是“爸爸>儿子”，而空格不仅可以是“爸爸儿子”，还能是“爷爷儿”、“太爷爷儿子”。
1.6 伪类选择器
有时候还会需要用文档以外的其他条件来应用元素的样式，比如鼠标悬停等。这时候我们就需要用到伪类了。以下是链接应用的伪类定义。
a:link{
color:#999999;
}
a:visited{
color:#FFFF00;
}
a:hover{
color:#006600;
}
/* IE不支持，用Firefox浏览可以看到效果 /
input:focus{
background:# E0F1F5;
}
Link表示链接在没有被点击时的样式。Visited表示链接已经被访问时的样式。Hover表示当鼠标悬停在链接上面时的样式。
伪类不仅可以应用在链接标签中，也可以应用在一些表单元素中，但表单元素的应用IE不支持，所以一般伪类都只会被应用在链接的样式上。
1.7 通用选择器
通用选择器用来表示。例如：
*{
font-size: 12px;
}
表示所有的元素的字体大小都是12px；同时通用选择器还可以和后代选择器组合。
例如：
p {
……
}
表示所有p元素后代的所有元素都应用这个样式。但是与后代选择器的搭配容易出现浏览器不能解析的情况，比如像这样子：
< p >
所有的文本都被定义成红色
< b >所有这个段落里面的子标签都会被定义成蓝色< /b >
< p >所有这个段落里面的子标签都会被定义成蓝色< /p >
< b >所有这个段落里面的子标签都会被定义成蓝色< /b >
< em >所有这个段落里面的子标签都会被定义成蓝色< /em >
< /p >
这个例子里面p标签里面嵌套了一个p标签，这个时候样式可能会出现与预期结果不相同的结果。
1.8 群组选择器
当几个元素样式属性一样时，可以共同调用一个声明，元素之间用逗号分隔。如：
p, td, li {
line-height:20px;
color:#c00;
}
#main p, #sider span {
color:#000;
line-height:26px;
}
.#main p span {
color:#f60;
}
.text1 h1,#sider h3,.art_title h2 {
font-weight:100;
}
使用群组选择器，将会大大的简化CSS代码，将具有多个相同属性的元素，合并群组进行选择，定义同样的CSS属性，这大大的提高了编码效率，同时也减少了CSS文件的体积。
1.9 相邻同胞选择器
我们除了上面的子选择器与后代选择器，我们可能还希望找到兄弟两个当中的一个，如一个标题h1元素后面紧跟了两个段落p元素，我们想定位第一个段落p元素，对它应用样式。我们就可以使用相邻同胞选择器。看下面的代码：
Example Source Code CSS
h1 + p {color:blue}
HTML
< h1 >一个非常专业的CSS站点< /h1 >
< p >Div+CSS教程中，介绍了很多关于CSS网页布局的知识。 < /p >
< p >CSS布局实例中，有很多与CSS布局有关的案例。< /p >
我们将会看到第一个段落“Div+CSS教程中，介绍了很多关于CSS网页布局的知识。”文字颜色将会是蓝色。而第二段则不受此CSS样式的影响。
+和_{的区别：类似上面一个，两者都表示兄弟关系，但是+必须是“大哥+二哥”，}还能是“大哥_{三弟”、“二哥}四妹”
1.10 属性选择器
您可以用判断html标签的某个属性是否存在的方法来定义css
属性选择器，是根据元素的属性来匹配的，其属性可以是标准属性也可以是自定义属性；!ie6，0 0 1 0
　　当然，也可以同时匹配多个属性；
　　[attr]
　　[title] {margin-left: 10px}
　　//选择具有 title 属性的所有元素；
　　[attr=val]
　　[title = ‘this’] {margin-right: 10px}
　　//选择属性 title 的值等于 this 的所有元素
　　[attr^=val]
　　[title ^= ‘this’] {margin-left: 15px}
　　//选择属性title的值以this开头的所有元素
　　[attr$=val]
　　[title $= ‘this’] {margin-right: 15px}
　　//选择属性title的值以this结尾的所有元素
　　[attr=val]
　　[title *= ‘this’] {margin: 10px}
　　//选择属性title 的值包含 this 的所有元素
　　[attr~=val]
　　[title ~= ‘this’] {margin-top: 10px}
　　//选择属性 title 的值包含一个以空格分隔的词为 this 的所有元素，即 title 的值里必须要有 this 这个单词并且this要与其他单词之间有空格分隔
　　[attr|=val]
　　[title |= ‘this’] {margin-bottom: 10px}
　　//选择属性 title 的值等于this，或值以 this- 开头的所有元素
1.11 伪元素选择器
所有伪元素选择器都必须放在出现该伪元素的选择器的最后面，也就是说伪元素选择器不能跟任何派生选择器，如：p:first-letter em {} 这就是不合法的，ie6不支持
:first-letter，设置块元素首字母样式，行内元素转换成块元素和行内块元素也支持；
　　div p:first-letter {font-size: 20px}
　　//选择div元素里所有的p元素的第一个字母或汉字，如果把块元素转换成行内元素则就不支持了；
　　:first-line，设置第一个文本行样式；
　　.box .main:first-line {color: #f00}
　　//只有部分属性允许first-line：所有font属性、color、所有background属性、word-spacing、letter-spacing、text-decoration、vertical-align、text-transform、line-height
　　:before，设置之前的样式，可以插入生成的内容，并设置其样式；
　　body:before {content: ‘The Start:’; display: block}
　　//在body元素前插入文本内容’The Start:’，并设置其为块元素
　　:after，设置之后的样式，可以插入生成的内容，并设置其样式；
　　body:after {content: ‘The End.’; display: block}
　　//在body元素最后插入文本内容’The End.’，并设置其为块元素
1.12 结构性伪类选择器
HTML CODE:
　　1.

　　2. First span
　　3.

First p

　　4. First div Strong text
　　5.

Second p

　　6. Second div Second span Third span
　　7.

结构性伪类选择器的冒号前边可以跟一个其他选择器做为限定；
　　带括号的选择器，里面一定要有参数；
　　匹配子元素，同时也会匹配孙子元素，因为子元素是孙子元素的父元素；
下面的 !lte8是指IE8一下浏览器不支持，包括IE8也不支持
:first-of-type，选择相对父元素里同类型子元素中的第一个，!lte8
　　.box :first-of-type {color: #f00}
　　//匹配2.3.4以及4里面的strong和6里面的第一个span，因为这个span是6里的第一个span子元素
　　.box .ft:first-of-type {color: #ff0}
　　//匹配3和4里面的strong，因为3是box里面的第一个p且class=”ft”，而4里只有一个strong且class=”ft”，而5和6虽然class=”ft”但是他们相对于box的同类型中不是第一个出现的；
:last-of-type，选择相对父元素里同类型子元素中的最后一个，!lte8
　　.box :last-of-type {color: #f00}
　　//匹配2.5.6以及4里的strong和6里的最后一个span
:only-of-type，选择相对父元素里同类型子元素中只有一个的元素，!lte8
　　.box :only-of-type {color: #f00}
　　//匹配2以及4里的strong，类为box里同类型元素只有一个的只有span
　　.box .ft:only-of-type {color: #f00}
　　//只匹配4里的strong
　　:only-child，选择的元素相对于其父元素是唯一的子元素，!lte8
　　.box :only-child {color: #f00}
　　//只匹配4里的strong
:nth-child(n)，选择其父元素的第n个子元素或多个子元素，索引从1开始，当n用于表达式时索引从0开始!lte8
　　.box :nth-child(3) {color: #f00}
　　//匹配第三个子元素即这里的4
　　.box :nth-child(odd) {color: #f00} 等价于 .box :nth-child(2n + 1) {color: #f00}
　　//匹配奇数即这里的2.4.6以及4里的strong和6里的第一个span
　　.box :nth-child(even) {color: #f00} 等价于 .box :nth-child(2n + 2) {color: #f00}和.box :nth-child(2n)
　　//匹配偶数即这里的3.5以及6里的第二个span
　　.box :nth-child(n + 1) {color: #f00}
　　//匹配 n + 1开始的所有子元素即.box里所有的子元素以及子孙元素，因为这里n是从1开始的即：
　　n = 0 ----> n + 1 = 0 + 1 = 1，即这里的2
　　n = 1 ----> n + 1 = 1 + 1 = 2，即这里的3
　　… …
　　n = 4 ----> n + 1 = 4 + 1 = 5，即这里的6
:nth-last-child(n)，跟:nth-child(n)使用类似，只是索引是从最后开始往前数，!lte8
　　.box :nth-last-child(3) {color: #f00}
　　//匹配倒数第三个子元素即这里的4
:nth-of-type(n)，选择父元素的第n个或多个同类型的子元素，!lte8
　　.box :nth-of-type(2) {color: #f00}
　　//匹配5和6以及6里面的第二个span
:nth-last-of-type(n)，同上，只是从最后开始往前数，!lte8
　　.box :nth-last-of-type(2) {color: #f00}
　　//匹配3和4以及6里面的第一个span
　　
　　:first-child，选择父元素里的第一个子元素，!ie6
　　.box :first-child {color: #f00}
　　//匹配2和4里的strong以及6里的第一个span
:last-child，选择父元素里的最后一个子元素，!lte8
　　.box :last-child {color: #f00}
　　//匹配6和6里的最后一个span以及4里的strong
:root，选择文档的根元素，在HTML中就是指标签，!lte8
　　:empty，选择没有任何内容的元素，那怕是有一个空格也不行，!lte8
　　table td:empty {background-color: #ffc}
　　//匹配表格里没有内容的td
　　:target，选择当前活动的元素，指锚点点击后跳转到的那一个元素，!lte8
　　:not(selector)，选择排除selector以外的其他所有元素，!lte8
　　.box *:not(div) {background-color: #ffc}
　　//选择box里除div以外的所有后代元素，如果div里有其他非div元素，也会选择上，如上的HTML CODE就会选择上div里面的span和strong
1.13 UI元素状态伪类选择器
:enabled，指定元素处于可用状态时的样式，一般用于input，select和textarea
　　:disabled，指定元素处于不可用状态时的样式，一般用于input，select和textarea
:read-only，指定元素为只读状态时的样式，FF为-moz-read-only，一般用于input和textarea
　　:read-write，指定元素为只可写状态时的样式，FF为-moz-read-write，一般用于input和textarea
　　:checked，指定元素被选中状态时的样式，FF为-moz-checked一般用于checkbox和radio
　　:default，指定元素默认选中的样式，一般用于checkbox和radio
　　:indeterminate，指定默认一组单选或复选都没被选中的样式，只要有一个被选中则样式被取消，一般用于checkbox和radio
　　::selection，指定元素处理选中状态时的样式，可用于所有元素，上面的几个基本上只用于表单元素；!lte8
　　FF为::-moz-selection，不能用群组选择器来写；
　　::selection {background-color: #ffc; color: #fff}
　　::-moz-selection {background-color: #ffc; color: #fff}
注意事项
由于对CSS的解释是自上而下的，对于一个元素的相同属性描述，放在下面的会覆盖掉位于上面的属性描述，因此我们在对元素的选择中一定要注意书写顺序，如：
a:visited {color: #00FF00; text-decoration: none}
　　a:hover {color: #FF00FF; text-decoration: underline}
采用这样的书写顺序，无论链接有没有被访问过，只要当鼠标移到链接上，链接都会变成蓝色并有下划线。但是，如果采用下面的书写顺序：
a:hover {color: #FF00FF; text-decoration: underline}
a:visited {color: #00FF00; text-decoration: none}
如果链接被访问过，则当你鼠标移到链接上时不会变成蓝色并有下划线，依然保持绿色。

css常用属性：

CSS 背景
CSS 背景属性用于定义HTML元素的背景。
CSS 属性定义背景效果:
**background-color **
设置背景颜色，颜色值通常以下面几种方式定义：
十六进制 - 如："#ff0000"
RGB - 如：“rgb(255,0,0)”
颜色名称 - 如：“red”

h1
{
background-color:#6495ed;
}
p
{
background-color:#e0ffff;
}
div
{
background-color:#b0c4de;
}
background-image
设置背景图片，通常以图片的链接方式定义值

body {
background-image:url(‘paper.gif’);
}
background-repeat
设置背景如何重复平铺，默认情况下 background-image 属性会在页面的水平或者垂直方向平铺。
可设置以下几个属性值：
no-repeat 不平铺
x-repeat 只在水平方向上平铺
y-repeat 只在竖直方向上平铺

body
{
background-image:url(‘gradient2.png’);
background-repeat:repeat-x;
}
background-attachment
定义背景图片随滚动轴的移动方式，有以下几种属性值
scroll:默认值，背景图相对于元素固定，背景随页面滚动而移动，即背景和内容绑定。
fixed：背景图相对于视口固定，所以随页面滚动背景不动，相当于背景被设置在了body上。
local：背景图相对于元素内容固定，
inhert:继承

body
{
background-image:url(‘back.png’);
background-attachment:fixed;
}
background-position
设置背景图像的起始位置

body
{
background-image:url(‘img_tree.png’);
background-repeat:no-repeat;
background-position:right top;
}
为了简化这些属性的代码，我们可以将这些属性合并在同一个属性中.
背景颜色的简写属性为 “background”:

body {background:#ffffff url(‘img_tree.png’) no-repeat fixed right top;}

CSS文本
文本属性：
color 设置文本颜色

body{
color:gray;
}
direction 设置文本方向
rtl:从右到左
ltr:从左到右
inhreit:继承

p{
direction:rtl;
}
letter-spacing 设置字符间距

p{
letter-spacing:normal;//默认间距为0
}
1
2
3
line-height 设置行高
可设置具体值，也可设置字体大小的倍数

p{
line-height：1.5;
}
text-align 对齐元素中的文本

h1 {
text-align:center;
}//文本居中
p.date {
text-align:right;
}//向右对齐
text-decoration 向文本添加修饰

h1 {text-decoration:overline;}//上划线
h2 {text-decoration:line-through;}//中划线
h3 {text-decoration:underline;}//下划线
h4 {text-decoration:none;}
text-indent 缩进元素中文本的首行

p {text-indent:50px;}
text-shadow 设置文本阴影
三个值分别为，向右偏移长度，向下偏移长度，颜色

h1
{
text-shadow: 2px 2px #ff0000;
}
text-transform 控制元素中的字母

p.uppercase {text-transform:uppercase;}//转为大写
p.lowercase {text-transform:lowercase;}//转为小写
p.capitalize {text-transform:capitalize;}//转为首字母大写其他小写

unicode-bidi 设置或返回文本是否被重写
normal 默认。不使用附加的嵌入层面
embed 创建一个附加的嵌入层面
bidi-override 创建一个附加的嵌入层面。重新排序取决于 direction 属性
initial 设置该属性为它的默认值
inherit 从父元素继承该属性

div
{
direction:rtl;
unicode-bidi:bidi-override;
}vertical-align 设置元素的垂直对齐
baseline 默认。元素放置在父元素的基线上。
sub 垂直对齐文本的下标。
super 垂直对齐文本的上标
top 把元素的顶端与行中最高元素的顶端对齐
text-top 把元素的顶端与父元素字体的顶端对齐
middle 把此元素放置在父元素的中部。
bottom 把元素的底端与行中最低的元素的顶端对齐。
text-bottom 把元素的底端与父元素字体的底端对齐。
length
% 使用 “line-height” 属性的百分比值来排列此元素。允许使用负值。
inherit 规定应该从父元素继承 vertical-align 属性的值。

vertical-align:text-top;
white-space 设置元素中空白的处理方式
normal 默认。空白会被浏览器忽略。
pre 空白会被浏览器保留。其行为方式类似 HTML 中的pre 标签。
nowrap 文本不会换行，文本会在在同一行上继续，直到遇到 br 标签为止。
pre-wrap 保留空白符序列，但是正常地进行换行。
pre-line 合并空白符序列，但是保留换行符。
inherit 规定应该从父元素继承 white-space 属性的值。

p
{
white-space:nowrap;
}
word-spacing 设置字间距

p{
letter-spacing:2px;
}
CSS字体
font-family
设置文本的字体系列

p{
font-family:“Times New Roman”,Georgia,Serif;
}
1
2
3
font-size
设置文本的字体大小
xx-small,x-small,small,medium,large,x-large,xx-large
把字体的尺寸设置为不同的尺寸，从 xx-small 到 xx-large。
默认值：medium。
smaller 把 font-size 设置为比父元素更小的尺寸。
larger 把 font-size 设置为比父元素更大的尺寸。
length 把 font-size 设置为一个固定的值。
% 把 font-size 设置为基于父元素的一个百分比值。
inherit 规定应该从父元素继承字体尺寸。

p{
font-szie:14px;
}
font-style
设置文本的字体样式
normal 默认值。浏览器显示一个标准的字体样式。
italic 浏览器会显示一个斜体的字体样式。
oblique 浏览器会显示一个倾斜的字体样式。
inherit 规定应该从父元素继承字体样式。

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

p.small
{
font-variant:small-caps;
}
font-weight
指定字体的粗细
normal 默认值。定义标准的字符。
bold 定义粗体字符。
bolder 定义更粗的字符。
lighter 定义更细的字符。
100-900。

p.normal {font-weight:normal;}
p.thick {font-weight:bold;}
p.thicker {font-weight:900;}
CSS 链接
a:link - 正常，未访问过的链接
a:visited - 用户已访问过的链接
a:hover - 当用户鼠标放在链接上时
a:active - 链接被点击的那一刻

a:link {color:#000000;} /* 未访问链接*/
a:visited {color:#00FF00;} /* 已访问链接 /
a:hover {color:#FF00FF;} / 鼠标移动到链接上 /
a:active {color:#0000FF;} / 鼠标点击时 */
CSS 列表
list-style
list-style 简写属性在一个声明中设置所有的列表属性。
可以设置的属性（按顺序）： list-style-type, list-style-position, list-style-image.
可以不设置其中的某个值，比如 “list-style:circle inside;” 也是允许的。未设置的属性会使用其默认值。
list-style-image
指定列表项标记的图像

ul{
list-style-image:url(‘sqpurple.gif’);
}
list-style-position
指定列表项标记的位置
inside或者outside

ul {
list-style-position: inside;
}
list-style-type
指定列表项标记的类型
none 无标记。
无序列表标记：
disc 默认。标记是实心圆。
circle 标记是空心圆。
square 标记是实心方块。
有序列表标记：
decimal 标记是数字。
decimal-leading-zero 0开头的数字标记。(01, 02, 03, 等。)
lower-roman 小写罗马数字(i, ii, iii, iv, v, 等。)
upper-roman 大写罗马数字(I, II, III, IV, V, 等。)
lower-alpha 小写英文字母The marker is lower-alpha (a, b, c, d, e, 等。)
upper-alpha 大写英文字母The marker is upper-alpha (A, B, C, D, E, 等。)
lower-greek 小写希腊字母(alpha, beta, gamma, 等。)
lower-latin 小写拉丁字母(a, b, c, d, e, 等。)
upper-latin 大写拉丁字母(A, B, C, D, E, 等。)
hebrew 传统的希伯来编号方式
armenian 传统的亚美尼亚编号方式
georgian 传统的乔治亚编号方式(an, ban, gan, 等。)
cjk-ideographic 简单的表意数字
hiragana 标记是：a, i, u, e, o, ka, ki, 等。（日文片假名）
katakana 标记是：A, I, U, E, O, KA, KI, 等。（日文片假名）
hiragana-iroha 标记是：i, ro, ha, ni, ho, he, to, 等。（日文片假名）
katakana-iroha 标记是：I, RO, HA, NI, HO, HE, TO, 等。（日文片假名）

ul.circle {list-style-type:circle}
ul.square {list-style-type:square}
ol.upper-roman {list-style-type:upper-roman}
ol.lower-alpha {list-style-type:lower-alpha}
CSS 表格
表格边框

table, th, td{
border: 1px solid black;
}
折叠边框
border-collapse 属性设置表格的边框是否被折叠成一个单一的边框或隔开

table{
border-collapse:collapse;
}
table,th, td{
border: 1px solid black;
}

css盒子模型：

简介编辑
CSS （Cascading Style Sheet）可译为“层叠样式表 ”或“级联样式表”，它定义如何显示HTML 元素，用于控制Web页面的外观。通过使用CSS实现页面的内容与表现形式分离，极大提高了工作效率。CSS 假定所有的HTML 文档元素都生成了一个描述该元素在HTML文档布局中所占空间的矩形元素框，可以形象地将其看作是一个盒子。CSS 围绕这些盒子产生了一种“盒子模型”概念，通过定义一系列与盒子相关的属性，可以极大地丰富和促进各个盒子乃至整个HTML文档的表现效果和布局结构。对于是盒子的元素，如果没有特殊设置，其默认总是占独立的一行，宽度为浏览器窗口的宽度，在其前后的元素不管是不是盒子，都只能排列在它的上面或者下面，即上下累加着进行排列。HTML文档中的每个盒子都可以看成是由从内到外的四个部分构成，即内容区（content）、填充(padding)、边框(border)和空白边(margin)。 CSS 为四个部分定义了一系列相关属性，通过对这些属性的设置可以丰富盒子的表现效果。
组成编辑
内容区（content）
内容区是盒子模型的中心，它呈现了盒子的主要信息内容，这些内容可以是文本、图片等多种类型。内容区有三个属性，width、height 和overflow。使用width和height属性可以指定盒子内容区的高度和宽度，当内容信息太多，超出内容区所占范围时，可以使用overflow 溢出属性来指定处理方法。当overflow 属性值为hidden时，溢出部分将不可见；为visible时，溢出的内容信息可见，只是被呈现在盒子的外部；当为scroll时，滚动条将被自动添加到盒子中，用户可以通过拉动滚动条显示内容信息；当为auto时，将由浏览器决定如何处理溢出部分。
填充（padding）
填充是内容区和边框之间的空间。填充的属性有五种 ，即padding -top、padding -bottom、padding -left、padding-right 以及综合了以上四种方向的快捷填充属性padding。使用这五种属性可以指定内容区信息内容与各方向边框间的距离。设置盒子背景色属性时，可使背景色延伸到填充区域。
边框（border）
边框是环绕内容区和填充的边界。边框的属性有border-style、border-width和border-color 以及综合了以上三类属性的快捷边框属性 border。border-style 属性是边框最重要的属性，如果没有指定边框样式，其他的边框属性都会被忽略，边框将不存在。CSS规定了dotted（点线）、dashed（虚线）、solid(实线)等九种边框样式。使用border-width属性可以指定边框的宽度，其属性值可以是长度计量值，也可以是CSS规定的thin、medium 和thick。使用border-color属性可以为边框指定相应的颜色，其属性值可以是RGB值，也可以是CSS 规定的17个颜色名 。在设定以上三种边框属性时，既可以进行边框四个方向整体的快捷设置，也可以进行四个方向的专向设置，如border: 2px solid green 或border-top-style: solid、border-left-color: red等。设置盒子背景色属性时，在IE中背景不会延伸到边框区域，但在FF等标准浏览器中，背景颜色可以延伸到边框区域，特别是单边框设置为点线或虚线时能看到效果 [1] 。
空白边（margin）
空白边位于盒子的最外围，是添加在边框外周围的空间。空白边使盒子之间不会紧凑地连接在一起，是CSS 布局的一个重要手段。空白边的属性有五种 ，即margin-top、margin-bottom、margin- left、margin-right以及综合了以上四种方向的快捷空白边属性margin，其具体的设置和使用与填充属性类似。对于两个相邻的（水平或垂直方向 ）且设置有空白边值的盒子，他们邻近部分的空白边将不是二者空白边的相加，而是二者的并集。若二者邻近的空白边值大小不等，则取二者中较大的值。同时，CSS 容许给空白边属性指定负数值，当指定负空白边值时，整个盒子将向指定负值方向的相反方向移动，以此可以产生盒子的重叠效果。采用指定空白边正负值的方法可以移动网页中的元素，这是CSS 布局技术中的一个重要方法。
盒子模型的定位编辑
网页默认的布局方式
文档流指文档中能够明确显示对象在排列时所占用的具体方位。文档流不但是盒子模式定位的基础所在，它也是HTML中默认的网页布局模式，在没有特殊要求的情况下，页面中的块状元素呈现自上而下的动态分布形式，内联元素则是按照从左到右的方式存在。如果我们想要改动某一汉字或是符号在网页中的具体方位，只能有一种方式可以选择，就是通过操作网页结构中汉字或是符号的先后位置和分布位置来实现自己的目的和想法。
浮动
所谓浮动就是让设置的标签产生漂浮效果，脱离原来在页面本应出现的空间位置，不再占用任何文档流空间。元素设置为浮动以后，会生成一个块级元素，而不论它本身是何种元素。且要指明一个宽度，否则它会尽可能地窄；另外当可供浮动的空间小于浮动元素时，它会跑到下一行，直到拥有足够放下它的空间。
Position定位
页面布局使用最多的是相对定位和绝对定位。
相对定位：这种定位方式下元素不脱离文档流，仍然保持其未定位前的形态并且保留它原来所占空间。偏移时以自身位置的左上角作为参照物，通过left、top、right和bottom四个方向的属性来定义偏移的位置。下面通过比较定位前和定位后的两种状态来分析相对定位的效果。
绝对定位：这种定位方式下元素将脱离文档流，不占据空间，文档流中的后续元素将填补它留下的空间。下面通过比较定位前和定位后的两种状态来分析绝对定位的效果 [2] 。

标签：04,color,元素,28,样式,2021,选择器,CSS,属性
来源： https://blog.csdn.net/m0_50690327/article/details/116207978

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。