CSS设置样式学习
1.如何选择元素?
选择器
2.如何设置样式?
1.继承/不继承
height: inherit;/*强制继承父类高度*/
color: initial; /*不继承父类的color属性*/
2.颜色单位:
1.关键字
blue
lightblue
2.rgb(r,g,b):0-255之间
3.rgba(r,g,b,a) rgb:0-255 a:0-1 透明度
4.16进制的颜色值
拾色器/取色器
3.尺度单位
px:绝对单位
width:100px;
em:相对单位
与当前元素的字体大小相同(默认情况下16px)
4.字体样式
1)font-size 字号
2)font-family 字体
3)font-style 样式(normal/italic/oblique))
4)font-weight 加粗(normal/bold/bolder/lighter/100-900)
5)line-height 行高(px/数字/em)
6)color 文字颜色
7)text-decoration 文字修饰
8)text-align 文本对齐方式
9)text-transform 字母大小写
10)text-indent 文本缩进
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
span{
font-style: italic;
}
i{
font-style: normal;
font-weight:bold/*700*/
}
b{
font-weight: normal;/*400*/
font-size: 20px;
}
div{
width: 100px;
height: 100px;
border: 1px solid red;
/* text-align: center; */
text-transform: full-width;
text-indent: 2em;
}
a,del{
text-decoration: none;
/*text-shadow:h-shadow v-shadow blur color*/
text-shadow: -10px -10px 1px red;
}
span{
text-decoration: line-through;
}
</style>
</head>
<body>
<a href="#">百度一下</a>
<del>hello</del>
<span>hello</span>
<div>hello HELLO
鸡蛋糕和你嘴角味道
</div>
<span>hello</span>
<i>hello</i>
<b>hello</b>
<strong>hello</strong>
</body>
</html>
#网络字体:(下载测试)
1.下载对应字体
2.设置字体
3.引用字体
字体图标库:
fontawesome iconfont
span class=“fa fa-xxxx”
i class=‘iconfont xxxxx’
补充学习 img:特殊的行内元素 有私有属性 width height
再次复习的代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>0729复习</title>
<link rel="stylesheet" href="./iconfont/iconfont.css">
<style>
/* div{
width: 100px;
height: 100px;
border: 1px solid red;
color: red;
}
div p{
width: 50px;
height: inherit;
继承父类的高度
border: 1px solid royalblue;
color: initial;
不继承父类颜色,按默认颜色显示
} */
div:first-child{
background-color: rgba(157,78, 45,0.3);
}
div:nth-child(2){
color: red;
font-size: 20px;
font-weight: 700;
font-style: italic;
text-decoration: overline;
}
div:nth-child(3){
color: springgreen;
font-size: 25px;
text-transform: lowercase;
font-family: 'Times New Roman', Times, serif;
}
div:nth-child(4){
color: yellow;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
text-decoration: underline;
}
del{
text-decoration: none;
}
span{
text-shadow: 3px 4px 2px red;
}
#outer{
list-style-type:decimal-leading-zero;
list-style-position: inside;
list-style-image: url(./1.png);
line-height: 1em;
text-align: center;
}
#outer li{
border: 1px solid red;
}
a{
cursor: pointer;
outline: rebeccapurple;
text-decoration: overline;
text-align: center;
}
i:hover{
color: red;
size: 50px;
}
</style>
</head>
<body>
<i class='iconfont icon-cry'></i>
<i class='iconfont icon-ashbin'></i>
<i class='iconfont icon-atm'></i>
<ol start="5" reversed>
<li>hi siri</li>
<li>hi siri</li>
<li>hi siri</li>
<li>hi siri</li>
<li>hi siri</li>
</ol>
<!-- <div>hello
<p>world</p>
</div> -->
<div>HI SIRI</div>
<div>HI SIRIbb</div>
<div>HI SIRI</div>
<div>HI SIRI</div>
<del>hi siri</del>
<span>百度一二三四五六七八下</span>
<ul id="outer">
<li>\\\
<ul>
<li>inner1</li>
</ul>
</li>
<li>outer
<ul>
<li>inner2</li>
</ul>
</li>
</ul>
<a href="#">百度一下</a>
<a href="#">百度二下</a>
<a href="#">百度三下</a>
<a href="#">百度四下</a>
</body>
</html>