css小知识

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

1.2 基本语法
标签：<p> <div>…之类的标签    使用方式：直接输入标签名

类（class）：class名字           使用方式：输入点+class名

ID:ID名                        使用方式：输入#+id名

一般来说我们写CSS文件的时候用的都是第二种方法，class名

这是因为ID名一般被用作JS的选择器

给class命名也是有规范的，像xxx-xxxx 这样做的好处是让你的代码更清晰

别人也更容易看懂

1.3使用方式
行内样式（内嵌样式）：

直接写在标签里，使用style属性，只对当前标签有效，页面内容和表现形式是高度耦合的，不利于分工合作

内部样式（内联样式）：

内部样式是在head部分使用<style>标签，样式对当前页面有效，内容和表现形式实现了一定程度的分离，但不彻底

外部样式（外联样式）：



外部样式需要一个link标签来与html连接起来，内容与表现形式完全分离，而且任何需要用到改样式的页面都可以通过link标签连接的方式来实现

2.基础属性
2.1字体相关属性
font-size（字体大小）：56px/24px px



font-family（字体体系）：“黑体”/“幼圆”



font-style（是否倾斜）: italic（倾斜）rmal（正常）



font-weight（字体粗细）：100/200rmal（400）/bold（700）/bolder



font-variant（是否大写）：normal/small-caps（小型大写）

案例：望月怀远
海上升明月，天涯共此时。    /大小24px 字体楷体  靠左

情人怨遥夜，竟夕起相思。    /颜色红色，靠右

灭烛怜光满，披衣觉露滋。    /左半句靠左，右半句靠右

不堪盈手赠，还寝梦佳期。    /大小30px 颜色蓝色 字体幼圆  居中



2.2文本相关属性
text-align（对齐方式）：center（居中）/left（靠左）/right（靠右）



color（字体颜色）：blue/red/pinkack/green/#FFFFFF/#F6F6F6



text-indent(首行缩进):2pxpx



text-decoration(上、下划线以及删除线): none（默认格式，无）/underline（下划线）/overline（上划线）ne-through



direction(文本方向):   ltr(left to right从左到右)/rtl（right to left从右到左）



text-transform(大小写): none（默认）/capitalize(首字母大写)/uppercase（全部大写）/lowercase(全部小写)



line-height(行高): normal  px



letter-spacing(字符间距): 2px/5px xpx



word-spacing(单词间距)：normal/2px/5pxxpx

案例：江西老表
我是江西小霸王     

江西这边我最狂

要说江西谁最帅

还得江西小霸王



行高5px

自己想一个题目，标签h1

第一句黑体，红色

第二句加删除线

第三句加上、下划线   从“西”处断开，分为“要说江西”    “谁最帅” 间距50px

第四句单词间距10px

2.3颜色
RGB（red greed bule）（0，10，256）

#0010FF

CSS中颜色的表示方法

预定义颜色：bule ，red，black。。。
十六进制颜色：#0f0f0f
RGB颜色（128，0，0）全红
RGBA，在RGB的基础上又添加了表示透明度的Alpha
HSl：用色调，饱和度，和透明度三个分量来表示颜色
HSLA：在HSL的基础上又添加了表示透明度的Alpha
代码实现：<p style="color: blue;">预定义颜色</p>

              <p style="color: rgb(0,255,0);">RGB颜色</p>

              <p style="color: #ff0000;">16进制颜色</p>

2.4背景相关属性
Background-color:背景颜色

Background-image：背景图片

Background-repeat：图片复制选项（repeat在水平，垂直两个方向复制）

                                                        （repeat-x/y 在水平/垂直方向进行复制）

                                                        （no-repeat 不复制）

Background-position：图片所在位置 上top   下bottom 左left   右right

简写：将所有元素放在一起

              有顺序要求：背景颜色->背景图片->重复方式->所在位置

       background: url(img/pic.jpg) #87CEEB repeat-y right;

2.5尺寸相关属性
（1）固定高度与宽度（height：200px）

（2）自适应高度（高度会根据内容的增加而增加）

（3）指定最大高度max-height（内容增加到指定高度的时候就不会再增加）

（4）指定最小高度min-height（开始时高度固定，内容增加到一定地步时开始增加高度）

2.6显示相关属性
(1)visibility：hidden 仅仅隐藏内容，该元素所占位置依然存在

(2)display：none  不仅隐藏内容，而且隐藏位置

Display:inline 将块级元素以内联元素形式显示，此时宽，高等属性对其无效

Display:inline-block  将块级元素以内联元素形式显示并且具有块级元素的特征，宽，高属性依然有效

Display：block 将内联元素以块级元素的形式展现

2.7盒子模型
Margin：外边距

Margin-top(上)   margin-bottom（下）   margin-left（左）   margin-right（右）

使用方式：

margin：30px ，表示上下左右外边距都设置30px
margin-left：30px ，表示设置距离左方30px
margin： 10px 20px 10px 20px 分别设置上右下左四个边的边距，顺序按照顺时针方向
margin：20px 30px  分别设置上下边距为20px ，左右边距为30px
Padding：内边距

与margin类似 上下左右边距都有

Border：边框





如果想让两个盒子在一行内，那么两个盒子都要浮动（float）并且给它们的父类清除浮动（overflow: hidden;）

什么是父类：



Box是div1和div2的父类