目录
CSS的基本概念
Cascading Style Sheet 层叠样式表
选择器
标签：<p><div> 之类的标签 使用方式：直接输入标签名
类（class）：class名字 使用方式：输入点+class名
ID：ID名 使用方式：输入#+id名
一般来说我们写CSS文件的时候用的都是第二种选择器，class名
这是因为ID名一般被用作JS的选择器
给class命名也是有规范的，像xxx-xxxx这样做的好处是让你的代码更清晰
别人也更容易看懂
三种连接样式
行 内 样 式（内 嵌 样 式）：
<div class="poetry1">
<h1>望月怀远</h1>
<p class="text5">海上升明月，天涯共此时。</p>
<p class="text6">情人怨遥夜，竟夕起相思。</p>
<p>灭烛怜光满，披衣觉露滋。</p>
<p class="text8">不堪盈手赠，还寝梦佳期。</p>
</div>
直接写在标签里，使用style属性，支队当前标签有效，页面内容和表现形式是高度耦合的，不利于分工合作
内 部 样 式(内 联 样 式)：
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
p{
font-size: 24px;
}
</style>
</head>
内部样式是在head部分使用<style>标签，样式对当前页面有效，内容和表现形式实现了一定程度的分离，但不彻底
外 部 样 式（外 联 样 式）：
外部样式需要一个link标签与html连接起来，内容与表现形式完全分离，而且任何需要用到改样式的页面都可以通过link标签连接的方式来实现
字体相关属性
text-align（对齐方式）：center（居中） /left（靠左） /right（靠右）
font-size（字体大小）：56px /24px /xxpx
font-family（字体体系）：“黑体”/“幼圆”/“仿宋”
font-style（是否倾斜）：italic（倾斜）/normal（正常）
font-weight（字体粗细）：100/200/normal（400） /bold（700） /bolder
font-variant（是否大写）：normal/small-caps（小型大写）
color（字体颜色）：blue/red/green/black/#FFFFFF/#F6F6F6
text-decoration：none（默认格式，无） /underline（下划线） /overline（上划线） /line-through（删除线）
<p style="text-decoration: line-through;">123456</p>
<p style="text-decoration: underline;">123456</p>
<p style="text-decoration: overline">123456</p>
direction（文本方向）： ltr（letf to right从左到右） /rlt（right to lift从右到左）
text-transform：none /capitalize（首字母大写） /uppercase（所有字母都大写） /lowercase（所有字母都小写）
<p style="text-transform: capitalize;<!-- 首字母大写 -->">Welcome to Jiaxing</p>
<p style="text-transform: uppercase;<!-- 所有字母都大写 -->">Welcome to Jiaxing</p>
<p style="text-transform: lowercase;<!-- 所有字母都大写 -->">Welcome to Jiaxing</p>
line-heigh（行高）：normal /xx px
letter-spacing（字符间距）：2px /5px /xx px
<p style="letter-spacing: normal;">welcome</p>
<p style="letter-spacing: 10px;">welcome</p>
word-spacing（单词间距）：normal /2px /5px /xx px
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
