CSS样式技巧精要-优快云博客

本文链接：https://blog.youkuaiyun.com/Coldzerace/article/details/78801861

first-child伪类

:first-child CSS 伪类代表了一组兄弟元素中的第一个元素。被匹配的元素需要具有一个父级元素。

element:first-child { style properties }

first-line伪类

"first-line" 伪元素用于向文本的首行设置特殊样式。

在下面的例子中，浏览器会根据 "first-line" 伪元素中的样式对p元素的第一行文本进行格式化：

<style>
p:first-line {
color:red;
}
</style>
<body>
<p>A smooth, mild blend of coffees from Mexico, A smooth, mild blend of coffees from Mexico,A smooth, mild blend of coffees from Mexico,A smooth, mild blend of coffees from Mexico,A smooth, mild blend of coffees from Mexico,A smooth, mild blend of coffees from Mexico,A smooth, mild blend of coffees from Mexico,A smooth, mild blend of coffees from Mexico,A smooth, mild blend of coffees from Mexico,A smooth, mild blend of coffees from Mexico,A smooth, mild blend of coffees from Mexico,A smooth, mild blend of coffees from Mexico,A smooth, mild blend of coffees from Mexico,A smooth, mild blend of coffees from Mexico,</p>
</body>

注意："first-line" 伪元素只能用于块级元素。

下面的属性可应用于 "first-line" 伪元素：

font properties

color properties

background properties

word-spacing

letter-spacing

text-decoration

vertical-align

text-transform

line-height

clear

before伪类

":before" 伪元素可以在元素的内容前面插入新内容。

下面的例子在每个<h1>元素前面插入一幅图片：
<style>
p:before
{
content:"台词：-";
background-color:yellow;
color:red;
font-weight:bold;
}
</style>
大家应该想到了，既然有:before伪类，自然就有:after伪类，大家可以自行学习。
background-color  
body {background-color:#b0c4de;}    
body {background-color:#b0c4de;}
背景平铺重复设置

background-repeat属性控制背景图像的平铺重复效果。
背景图片固定
body{background-attachment: fixed;}
背景图片的定位

可以利用 background-position 属性改变图像在背景中的位置。

背景图片大小
div
{
background:url(img_flwr.gif);
background-size:80px 60px;
background-repeat:no-repeat;
}
当使用简写属性时，属性值的顺序为：

background-color

background-image

background-repeat

background-attachment

background-position
当text-align设置为"justify"，每一行被展开为宽度相等，左，右外边距是对齐（如杂志和报纸）
文本修饰

text-decoration属性一般用于删除链接的下划线。

值描述
none 默认。定义标准的文本。
underline 定义文本下的一条线。
overline 定义文本上的一条线。
line-through 定义穿过文本下的一条线。
blink 定义闪烁的文本。
inherit 规定应该从父元素继承 text-decoration 属性的值。
<style>
a {
text-decoration:none;
}
</style>

<body>
<a href="#">百度</a>
</body>
文本转换

文本转换属性是用来指定在一个文本中的大写和小写字母。

可用于所有字句变成大写或小写字母，或每个单词的首字母大写。
<style>
.uppercase {
text-transform:uppercase;
}
.lowercase {
text-transform:lowercase;
}
/* 首字母大写 */
.capitalize {
text-transform:capitalize;
}
</style>
<body>
<p class="uppercase">Hello,World!</p>
<p class="lowercase">Hello,World!</p>
<p class="capitalize">hello,world!</p>
</body>
文本缩进

text-indent属性控制首行文本的缩进。

属性值可以是固定值（包括负数），也可是百分比。

注意em单位一般代表网页中一个字符的大小。
<style>
p {
text-indent:2em;
}
</style>
字符间距和字间距

letter-spacing属性控制字符的间距。属性值可以是正负数。
word-spacing属性控制字间距。

我们在这里设置CODING COFFEE的产品页和首页。
p{
word-spacing: 5px;
letter-spacing: 5px;
}
行间距

line-height属性控制行间距（简称行高）。
<style>
p{
word-spacing: 5px;
letter-spacing: 5px;
line-height: 20px;
}
</style>
元素的垂直对齐方式

vertical-align属性控制元素垂直对齐方式。

vertical-align被用于垂直对齐inline元素，也就是display值为inline和inline-block的元素。

也就是垂直居中是运用在行内元素的。

值描述
baseline 默认。元素放置在父元素的基线上。
sub 垂直对齐文本的下标。
super 垂直对齐文本的上标。
top 把元素的顶端与行中最高元素的顶端对齐
text-top 把元素的顶端与父元素字体的顶端对齐
middle 把此元素放置在父元素的中部。
bottom 把元素的顶端与行中最低的元素的顶端对齐。
text-bottom 把元素的底端与父元素字体的底端对齐。
inherit 规定应该从父元素继承 vertical-align 属性的值。
使用不同的列表项标记

使用list-style-type改变列表项标记。
<style>
    ul.a {list-style-type:circle;}
    ul.b {list-style-type:square;}
    ol.c {list-style-type:upper-roman;}
    ol.d {list-style-type:lower-alpha;}
</style>
<ul class="a">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
<ul class="b">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
<p>有序列表实例:</p>
<ol class="c">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
<ol class="d">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
使用list-style-image可以用图片作为列表的标记项。
<style>
ul
{
list-style-image:url('sqpurple.gif');
}
</style>
<ul>
    <li>Coffee</li>
    <li>Tea</li>
    <li>Coca Cola</li>
</ul>
属性描述
height 设置元素的高度。
line-height 设置行高。
max-height 设置元素的最大高度。
max-width 设置元素的最大宽度。
min-height 设置元素的最小高度。
min-width 设置元素的最小宽度。
width 设置元素的宽度。

值	描述
none	默认。定义标准的文本。
underline	定义文本下的一条线。
overline	定义文本上的一条线。
line-through	定义穿过文本下的一条线。
blink	定义闪烁的文本。
inherit	规定应该从父元素继承 text-decoration 属性的值。

值	描述
baseline	默认。元素放置在父元素的基线上。
sub	垂直对齐文本的下标。
super	垂直对齐文本的上标。
top	把元素的顶端与行中最高元素的顶端对齐
text-top	把元素的顶端与父元素字体的顶端对齐
middle	把此元素放置在父元素的中部。
bottom	把元素的顶端与行中最低的元素的顶端对齐。
text-bottom	把元素的底端与父元素字体的底端对齐。
inherit	规定应该从父元素继承 vertical-align 属性的值。

属性	描述
height	设置元素的高度。
line-height	设置行高。
max-height	设置元素的最大高度。
max-width	设置元素的最大宽度。
min-height	设置元素的最小高度。
min-width	设置元素的最小宽度。
width	设置元素的宽度。

12.14笔记

first-child伪类

first-line伪类

before伪类

背景平铺重复设置

背景图片固定

背景图片的定位

背景图片大小

文本修饰

文本转换

文本缩进

字符间距和字间距

行间距

元素的垂直对齐方式

使用不同的列表项标记