学习笔记4"/>
HtmlCSS学习笔记4
如何设置样式？
在此之前要知道，有一些属性具有继承特性，但都能修改起默认特性。
继承：
inherit;/继承父类的属性/
initial;/*不继承父类属性/
颜色单位：
1.关键字
bluelightblue
2.rgb(r,g,b):0-255之间
3.rgba(r,g,b,a):
a:0-1之间：0代表完全透明 1代表完全不透明
4.16进制的颜色值
拾色器/取色器：
<!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>div{width: 10px;height: 100px;border: 1px solid red;color: red;/*在没有其他设置的情况下，div下的子标签默认继承div的属性*/}div p{width: 50px;/* height: 50px; */height: inherit;/*强制继承父类height属性*/border: 1px solid blue;color: initial;/*不去继承父类color属性*/}div#color{background-color: cornflowerblue;/*rgba(r,g,b,a) a:0-1之间：0代表完全透明1代表完全不透明*/}</style>
</head>
<body><div>hello<p>world!</p></div><div id="color"></div>
</body>
</html>
尺寸单位
| px | 绝对单位 | 无论其他相关的设置怎么变化，像素指定的值是不会变化的。 |
| em | 相对单位 | 1em与当前元素的字体大小相同（一个大写字母M的宽度）默认1em=16px |
| % | 相对单位 | 它们的长度总是保持相同的长度，即使它们的父容器的宽度发生变化。 |
字体样式
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>字体</title><style>span{font-style: oblique;/*用于打开和关闭斜体文本，italic:斜体，oblique:模拟斜体*/font-weight: bold;/*代表字体的粗细程度，取值范围100-900，bold:700,normal:400*/font-size: 20px;/*改变字体的大小*/}div{width: 10px;height: 10px;border: 1px solid red ;text-align:center;/*设置文本对其方式：left,center,right 均为水平对齐*/text-transform: uppercase;/*允许字体改变，none:不做任何改变uppercase:将文本转换为大写lowercase:将文本转换为小写capitalize:将所有单词第一个字母转换为大写full-width:转换为类似于一个等宽字体*/text-decoration: underline;/*设置或取消文本修饰 none:取消所有文本修饰underline:添加下划线overline：添加上划线line-through：为文本添加删除线*/text-shadow:red;/*设置或取消文本阴影，语法：text-shadow:h-shadow v-shadow blur color none取消所有阴影h-shadow:水平阴影的位置，必须v-shadow:垂直阴影的位置，必须blur:模糊的距离color:阴影的颜色*/text-indent: 2em;/*定义一个块元素首行文本缩进量 */}p{font-family: "黑体2";}@font-face {font-family: 黑体2;src: url('');}</style>
</head>
<body><span>hello</span><i>hello</i><div>hello</div><p>一二三四1234</p>
</body>
</html>
引用网络字体：
1.下载对应字体2.设置字体@font-face{font-famliy:'sd';src:url(xxx);}
3.引用字体div{font-family:'sd'}
字体图标库：
fontawesome：
.css
一句话将Font Awesome加入您的网页中。您完全不用下载或者安装任何东西！
1.引入外部样式文件
link标签将以下代码粘贴到网页HTML代码的 < head > 部分
<link href="//netdna.bootstrapcdn/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
2.使用行内元素
<span class='fa fa-xxx'></span>outer.css.one{color:red}index.html:<div class='one'></div>
iconfont
1.引入css
2.使用
<i class='iconfont xxxx'></i>
列表样式
ol有序列表
私有属性:start(从哪开始)
reversed:布尔属性，反转
| list-style-type | 设置列表项标志类型 |
| list-style-position | 设置列表项标志出现的位置 |
| list-style-image | 自定义设置列表项标志 |
| list-style | 列表样式的速记写法 |
#outer{list-style-type: upper-roman;/**/}
| list-style-type取值 | 说明 |
|---|---|
| none | 取消所有样式 |
| disc | 实心圆 |
| circle | 空心圆 |
| square | 实心正方形 |
| upper-roman | 大写罗马数字 |
| lower-roman | 小写罗马数字 |
| list-style-position 取值 | 说明 |
|---|---|
| outside | 列表项标志出现在主块框的外部 |
| inside | 列表项标志出现在主块框的内部 |
#outer li{list-style-image: url('./2.png');}
list-style速记写法
[<type>][<image>][<position>]
属性中带有[ ]是可选属性
#outer li{list-style:none url('./2.png') inside;}
line-height 设置列表的行高
当一个块级元素中只有一行文字时，将列表的行高和height的设置成同一个值，可以将文字垂直居中。
补充
块级元素可以设置宽高
行内元素不能设置宽高
img:
特殊的行内元素
私有属性：width height
更多推荐
HtmlCSS学习笔记4
发布评论