CSS入门保姆级知识整理！！看到就是赚到！（1）

CSS基础知识

1.1基本概念

CSS（Cascading Style Sheet）层叠样式表，为了实现页面内容和表现形式的分离。层叠的含义是可以对一个元素多次设置样式，最后的结果是多次样式叠加的结果，如果有冲突，以后面的样式为准。

1.2 基本语法

选择器{
属性名1:属性值1;
属性名2:属性值2;
属性名3:属性值3;
……
}
选择器说明该样式施加于哪些元素；属性名和属性值说明是样式内容；
一般一行定义一条样式，当然也可以写在一行上，但每条样式都序号加上“；”
推荐用小写命名。

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><style>div {width: 400px;margin: 0 auto;text-align: center;}p {font-size: 24px;}#author {font-size: 18px;}#comment {font-size: 14px;color: gray;}</style><body><div><h1>望月怀远</h1><p id="author">唐·张九龄</p><p>海上生明月，天涯共此时。</p><p>情人怨遥夜，竟夕起相思。</p><p>灭烛怜光满，披衣觉露滋。</p><p>不堪盈手赠，还寝梦佳期。</p><p id="comment">注：这首诗乃望月怀思的名篇，写景抒情并举，情景交融；意境幽静秀丽，情感真挚；结构深入不紊，语言明快铿锵；其中“海上生明月，天涯共此时”为千古佳句。</p></div></body>
</html>

1.3 使用方式

内联形式
使用style属性，只对当前标签有效。页面内容和表现形式是高度耦合的，不利于维护和分工合作的。
`


```html
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><div style="width: 400px;margin: 0 auto;text-align: center;"><h1>望月怀远</h1><p style="font-size: 18px;">唐·张九龄</p><p style="font-size: 24px;">海上生明月，天涯共此时。</p><p style="font-size: 24px;">情人怨遥夜，竟夕起相思。</p><p style="font-size: 24px;">灭烛怜光满，披衣觉露滋。</p><p style="font-size: 24px;">不堪盈手赠，还寝梦佳期。</p><p style="font-size: 14px; color: gray;">注：这首诗乃望月怀思的名篇，写景抒情并举，情景交融；意境幽静秀丽，情感真挚；结构深入不紊，语言明快铿锵；其中“海上生明月，天涯共此时”为千古佳句。</p></div></body>
</html>``

内部样式
在head中使用

内容和表现形式完全分离，而且任何需要用到该样式表中样式的页面都可以通过链接该文件来实现。 my.css ```

div {width: 400px;margin: 0 auto;text-align: center;
}p {font-size: 24px;
}#author {font-size: 18px;
}#comment {font-size: 14px;color: gray;
}

引用外部css文件

<link type="text/css" rel="stylesheet" href="my.css"/>

1.4 颜色

自然界的颜色数量是无穷的，但是计算机只能表示有限的信息。
需要将连续的量（无穷）转化为离散的量（有限）的颜色可以由三种基本颜色调和而成，即红色Red、绿色Green和蓝色Blue
每种颜色用8位表示，可以表示256（28）种颜色。那么每个颜色值有24位来表示，可以表示256256256种颜色（真彩色）
进制……
CSS中颜色的表示方法：
（1）十六进制形式：#ff0000（掌握）
（2）RGB：rgb(128,0,0) 等价于#800000（掌握）
（3）RGBA：在RGB颜色的基础上增加了表示透明度的分量Alpha
（4）HSL：用色调、饱和度和明度三个分量表示颜色
（5）HSLA：在HSL颜色的基础上增加了表示透明度的分量Alpha
（6）预定义颜色：Red、Yellow等（掌握）

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head> <body><div><h3>颜色演示</h3><p style="color: green;">预定义颜色(color:green)</p><p style="color: RGB(255,0,0);">RGB颜色(color:RGB(255,0,0))</p><p style="color: #ff00ff;">十六进制颜色(color: #ff00ff)</p></div></body>
</html>

2 基础属性

2.1 字体相关属性

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head> <body><h1>字体属性演示</h1><p><label>字体体系：</label><span style="font-family: 宋体;">宋体</span><span style="font-family: 楷体;">楷体</span></p><p><label>字体大小：</label><span style="font-size: 12px;">12像素</span><span style="font-size: 24px;">24像素</span></p><p><label>字形倾斜：</label><span style="font-style: normal;">正常</span><span style="font-style: italic;">倾斜</span></p><p><label>字母大写：</label><span style="font-variant: normal;">正常hello</span><span style="font-variant: small-caps;">小型大写hello</span></p><p><label>字体粗细：</label><span style="font-weight: normal;">正常(400)</span><span style="font-weight: bold;">粗体(700)</span><span style="font-weight: bolder;">加粗</span><span style="font-weight: lighter;">更细</span><span style="font-weight: 500;">500</span></p></body>
</html>

字体属性
属性含义取值
font-family 字体体系字体名称，如宋体
font-size 字体大小
font-style 是否倾斜 normal/italic/oblique/inherit
font-variant 是否大写 normal/small-caps/inherit
font-weight 字体粗细 normal（400）/bold（700）/bolder/lighter
100/200/300……900

可以简写，书写顺序
font-style font-variant font-weight font-size font-family
前面三个可缺省，使用默认值，font-size和font-family必须指定值。
这种书写方式更加简洁

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>#p1{font-family: 宋体;font-size: 24px;font-weight: bold;}#p2{30px 楷体;}</style></head>  <body><div><h1>字体属性演示</h1><p id="p1">分开书写：font-family: 宋体;font-size: 24px;font-weight: bold;</p><p id="p2">简写形式：30px 楷体;</p></div></body>
</html>

2.2 文本相关属性

文本相关属性主要包括颜色、对齐方式、修饰效果等。
color：设置文本的颜色
text-decoration:
none：默认值，没有装饰效果
underline：加下划线
overline：加上划线
line-through：加删除线
direction：
ltr:自左至右；rtl:自右至左

text-align:文本对齐方式
left 左对齐
right 右对齐
center 居中对齐

text-indent:首行缩进
letter-spacing:字母之间的间距
word-spacing:字（单词）间距
line-height:设置行高，实际上是调整行间距

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><div style="width: 400px;"><h1>文本属性演示</h1><p><label>文本颜色：</label><span style="color: red;">红色</span><span style="color: rgb(0,255,0);">绿色</span></p><p><label>文本修饰：</label><span style="text-decoration: none;">无</span><span style="text-decoration: underline;">下划线</span><span style="text-decoration: overline;">上划线</span><span style="text-decoration: line-through;">删除线</span></p><label>文本方向：</label><div style="direction: ltr;">1 2 3 4 5</div><div style="direction: rtl;">1 2 3 4 5</div><label>文本对齐：</label><div style="text-align: left;">左对齐</div><div style="text-align: right;">右对齐</div><div style="text-align: center;">居中对齐</div><label>大小写：</label><p style="text-transform: none;">不转换：welcome to Beijing</p><p style="text-transform: capitalize;">首字母大写：welcome to Beijing</p><p style="text-transform: uppercase;">全部大写：welcome to Beijing</p><p style="text-transform: lowercase;">全部小写：welcome to Beijing</p><p style="text-indent: 2cm;">首行缩进</p><p style="line-height: normal;">正常行高<br>正常行高<br>正常行高</p><p style="line-height: 30px;">行高30px<br>行高30px<br>行高30px</p><p><label>字符间距：</label><span style="letter-spacing:10px;">welcome</span><span style="letter-spacing:2px;">welcome</span></p><p><label>单词间距：</label><span style="word-spacing:10px;">welcome to</span><span style="word-spacing:2px;">welcome to</span></p></div></body>
</html>

2.3 背景相关属性

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>div{border: 1px gray solid;}#div1{height: 100px; background-color: skyblue;}#div2{               height: 200px;background-image: url(pic2.jpg);background-repeat: no-repeat;background-position: bottom;}            #div3{              height: 200px;background-image: url(pic2.jpg);background-repeat: repeat-x;}#div4{height: 300px;background: green url(pic2.jpg) repeat-y right;}</style></head><body><div id="div1">背景色</div><div id="div2">背景图片不重复</div><div id="div3">背景图片横向重复</div><div id="div4">简写方式</div></body>
</html>

background-color:背景色
background-image:设定背景图片，需要设置图片的url地址
background-repeat:图片的复制选项
repeat：在水平和垂直两个方向上进行复制
no-repeat:不复制
repeat-x:在水平方向上复制
repeat-y：在垂直方向上复制
也可以将这一组属性值封装到一个属性background中，书写书序是：
背景色background-color
背景图片background-image
重复方式background-repeat
位置backgroud-position
表达更加简洁

background: green url("../pic/js.jpg") no-repeat right top;

2.4 尺寸相关属性

height:高度
width:宽度
max-width:最大宽度
max-height：最大高度
min-width：最小宽度
min-height：最小高度

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>div{border: 2px gray solid;}#div1{width: 200px;height: 80px;}#div3{min-height: 80px;}#div5{max-height: 80px;overflow: scroll;}</style></head><body><div id="div1">固定高度和宽度</div><div id="div2">自适应高度，即根据内容确定高度</div><div id="div3">指定最小高度</div><div id="div4"><p>自适应高度</p><p>自适应高度</p><p>自适应高度</p><p>自适应高度</p><p>自适应高度</p></div><div id="div5"><p>自适应高度</p><p>自适应高度</p><p>自适应高度</p><p>自适应高度</p><p>自适应高度</p></div></body>
</html>

2.5 显示相关属性

隐藏元素的方法：
（1）visibility：hidden，仅仅隐藏内容，该元素所占位置依然存在；
（2）display：none，不仅隐藏内容，且不占位置

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>div{border: 2px green solid;height: 200px;}#div1{visibility: hidden;}#div3{display: none;}</style></head><body><div id="div1">div1</div><div id="div2">div2</div><div id="div3">div3</div><div id="div4">div4</div></body>
</html>

display可以设置元素的显示模式
inline:将块级元素以内联元素形式显示，此时width和height属性无效，其空间取决于元素的内容。
inline-block: 将块级元素以内联元素形式显示,同时兼具块级元素的某些特征，比如可以使用width和height设置所占位置大小。
也可以将内联元素以块级元素形式来显示，即display:block。

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>p,span{border: 2px gray dotted;}#p2{display: inline;height: 100px;width: 200px;}#p3{display: inline-block;height: 100px;width: 200px;}#s2{display: block;}</style></head><body><p id="p1">P标签是块级元素，所以占据一整行</p><p id="p2">块级元素也可以显示为内联元素，宽度和高度设置将无效</p><p id="p3">如果既想显示为内联，又要设置高度和宽度，可用inline-block</p><p id="p4">第四段</p><span id="s1">第一句</span><span id="s2">第二句</span><span id="s3">第三句</span><span id="s4">第四句</span></body>
</html>

2.6 盒子模型

margin：外边距
margin-top、margin-right、margin-bottom、margin-left
使用方式
（1）margin:30px;表示上下左右外边距都未30px；
（2）margin-left：30px；单独设置上下左右外边距
（3）margin：10px 20px 30px 40px；分别设置上右下左四个边距为10px 20px 30px 40px

padding:内边距
也有上下左右边距，和margin类似，不再赘述。

border:边框
border-width: 边框宽度;
border-style: 边框线条类型;
border-color: 边框的颜色;
也可以使用更优化的书写方式
border:10px dashed blue;

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>div{border: 1px gray dotted;}#div1{width: 400px;}#div2{border: 20px green solid;margin: 50px;padding: 30px;}#div3{height: 100px;}</style></head><body><div id="div1"><div id="div2"><div id="div3"></div></div></div></body>
</html>

outline：轮廓线，用法同border