行内样式：
直接将style属性写在标签里面，不建议使用
<p style="display:inline-block;width:200px"></p>
1
内部样式：
将style标签写在head标签里面
<style>
div{
display: inline-block;
width:200px;
}
</style>
1
2
3
4
5
6
7
引入外部样式
<head>
<link rel="stylesheet" href="main.css"/>
</head>
1
2
3
Main.css
@charset "utf-8"
1
选择器
标签选择器
选中所有的同类标签
div{}
1
类选择器(class)
通过 . 语法来选择
.div{}
<div class="div"></div>
1
2
3
id选择器
通过#语法来选择
#nav{}
<div id="div"></div>
1
2
3
后代选择器
通过中间空格来选择控制所有后代，如果用>隔开，那么就只影 响直系。
div>span
<div>
<span></span>
</div>
1
2
3
4
5
交集选择器
同时满足所有条件,不常用
div.c1{}
<div>
<span class="c1"></span> √
<span class="c1"></span> √
<span class="c2"></span> ×
</div>
1
2
3
4
5
6
并集选择器
有满足的条件即可
#img1,.img{}
<div id="img1"></div> √
<div class="img1"></div> √
<div class="img1"></div> √
1
2
3
4
5
优先级： id>类>标签
字体样式
谷歌浏览器默认16号字体，最小显示12号字体
代码 用法
font-weight:bold 字体加粗
text-align: center 文本水平居中
font-style: italic 斜体
line-height:10px 通过行高进行垂直居中
letter-spacing: 10px 字符间距
text-decoration: underline0 文本修饰下划线
text-decoration: overline 上划线
text-decoration:line-through; 中划线
text-decoration: none 去掉线
text-indent: 文本缩进
-webkit-text-stroke: 1px red 文本描边
text-shadow: 10px 5px 1px black(右移动10;下移动5;字体清晰度-越小越清晰;阴影颜色) 文字阴影
border:1px soild red 边框粗细 实心 颜色
---------------------
作者：Mode Cheng
来源：CSDN
原文：blog.csdn.net/weixin_4388…
版权声明：本文为博主原创文章，转载请附上博文链接！
