[华为云WEB前端全栈成长计划]八、CSS常用属性
选择标签，然后就是设置样式属性。总不可能让你去非诚勿扰，选择心动嘉宾之后，你拍拍屁股走人吧，哈哈。所以接下来我们就了解一下CSS常用的属性。
字体
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.font1{
font-size: 30px;
font-family: serif;
}
.font2{
font-size: 30px;
font-family: sans-serif;
}
.font3{
font-size: 30px;
font-family: monospace,sans-serif;
}
.font4{
font-size: 30px;
font-family: serif;
font-style: italic;
}
.font5{
font-size: 30px;
font-family: sans-serif;
font-weight: 700;
}
.font6{
font: italic 40px/50px bold monospace;
}
</style>
</head>
<body>
<div>衬线字体<br />abcdefghijklmnopqrstuvwxyz</div>
<div>非衬线字体<br />abcdefghijklmnopqrstuvwxyz</div>
<div>等宽字体<br />abcdefghijklmnopqrstuvwxyz</div>
<div>衬线字体对照<br />abcdefghijklmnopqrstuvwxyz</div>
<div>非衬线字体对照<br />abcdefghijklmnopqrstuvwxyz</div>
<div>等宽字体对照<br />abcdefghijklmnopqrstuvwxyz</div>
</body>
</html>
字体 font-family 字体名称
尺寸 font-size 数字或者百分比
样式 font-style normal/italic
粗细 font-weight 100--900 或者为border等
整合简写 font ：样式 尺寸 粗细 字体(老师讲的)这里好像有歧义，样式 粗细 尺寸 字体(从W3C官网进去找到中文页面)
解释如下：
这里图片中所说的不过多解释，注意看.font3里面的字体设置，用，分隔设置多个值，这时会显示第一个支持的字体。.font6中的顺序为格式(是否斜体)、字体大小/行高，font-weight字体粗细，最后是字体样式。另外衬线字体一般用来设置标题。
上面歧义的地方，我自己进行了尝试，当为100-900值的时候，按照第二种会有效，但是当为bold值的属性放在第二个和放在第三个显示的效果不一样，但是都有相应的作用。
效果：
文本
颜色 color 颜色/rgb/十六进制 或者可以使用rgba其中a的值为0-1表示透明度
行高 line-height 数字或者百分比或者normal等
对齐方式 text-align left/right/center
方向 direction ltr/rtl
缩进 text-indent 默认为0，长度值、百分比
装饰线 text-decoration underline、overline、line-through
间隔 letter-spacing 长度值可为负
阴影 text-shadow X轴偏移量+Y轴偏移量+模糊距离+颜色
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>文本</title>
<style>
.text{
color: rgba(50,50,50,0.3);
line-height: 50px;
font-size: 50px;
text-align: center;
}
.text1{
color: rgb(50,50,50);
letter-spacing: 10px;
}
.text2{
direction: rtl;
text-shadow: 10px 10px 5px gray;
}
.text3{
direction: ltr;
text-indent: 2em;
text-decoration: underline;
}
</style>
</head>
<body>
<div class="text" >测试文本测试文本测试文本</div>
<hr />
<div class="text1" >测试文本测试文本测试文本对照</div>
<hr />
<div class="text2" >文本测试文本测试文本对照</div>
<hr />
<div class="text3" >本测试文本测试文本对照</div>
</body>
</html>
效果：
具体其他取值的效果，可以自己测试。
尺寸
宽度和高度 wight宽度 height高度---------------auto、长度、百分比
最小宽度和最小高度 min-width最小宽度、min-height最小高度
最大宽度和最大高度 max-width最小宽度、max-height最小高度
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>文本</title>
<style>
.div1{
background-color: yellow;
width: 80px;
height: 700px;
min-width: 100px;
max-height: 100px;
}
.div2{
background-color: red;
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<div class="div1" >测试文本测试文本测试文本</div>
<div class="div2" >测试文本测试文本</div>
</body>
</html>
效果：
使用了最小宽度和最大高度的设置后的黄色div块与红色div块大小相同
列表
list-style-image 用图片作为列表前面的标记
list-style-position 设置前面标志在列表项的内外
list-style-type 设置标记的类型
list-style：整合 list-style-image + list-style-position+list-style-type
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS</title>
<style>
.list1{
list-style-image: url(dogicon.png);
list-style-position: inside;
list-style-type: circle;
}
.list2{
list-style-type: circle;
}
.list3{
list-style-type: decimal;
}
.list4{
list-style: inside lower-alpha;
}
</style>
</head>
<body>
<ul class="list">
<li>行者孙</li>
<li>者行孙</li>
<li>孙行者</li>
</ul>
<ul class="list1">
<li>行者孙</li>
<li>者行孙</li>
<li>孙行者</li>
</ul>
<ul class="list2">
<li>行者孙</li>
<li>者行孙</li>
<li>孙行者</li>
</ul>
<ul class="list3">
<li>行者孙</li>
<li>者行孙</li>
<li>孙行者</li>
</ul>
<ul class="list4">
<li>行者孙</li>
<li>者行孙</li>
<li>孙行者</li>
</ul>
<ol class="list5">
<li>行者孙</li>
<li>者行孙</li>
<li>孙行者</li>
</ol>
</body>
</html>
效果：
背景
background-color：设置背景颜色 默认transparent 颜色名，十六进制，rgb/rgba都可以
background-image：设置元素背景图片 模拟值为none url()
background-repeat：配合background-image一起使用，设置图片的的平铺方式
background-position：配合background-image一起使用设置背景图片的初始位置
background-attachment：设置背景图片是否随页面的滚动而滚动 默认值 scroll 可设置为fixed
background：整合 background-color + background-image+background-repeat+background-position+background-attachment可以全部设置，也可以省略一部分
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>背景</title>
<style>
#div1{
height: 1500px;
/*background-color: yellow;
background-image: url(favicon.ico);
background-repeat:no-repeat ;
background-position: center center;
background-attachment: fixed;*/
background: url(favicon.ico) yellow no-repeat center center fixed;
}
</style>
</head>
<body>
<div id="div1"></div>
</body>
</html>
效果：
滚动滚动条发现图片也不会有位置的变化。
- 点赞
- 收藏
- 关注作者
评论（0）