二锅头帮你整理CSS

什么是CSS？

中文名称：层叠样式表 。  英文全称：Cascading Style Sheets ，简称CSS。

CSS的作用：在网页制作时采用CSS技术，可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。

CSS的优势

1.内容与表现分离

2.减少网页代码量

3.有利于被搜索引擎收录

4.提高网页浏览速度

5.网页布局灵活

6.网页风格统一

CSS选择器
1.标签选择器：html中的所有标签都可以作为选择器

2.类（class）选择器：body内的所有元素都有class属性。

3.id选择器：body内的所有元素都有 id 属性。

类（class）选择器

定义：body标签中的所有标签都有class属性。 注：class名称可以重复使用。

使用：类（class）选择器使用标志符（句点）开头 后面写上类的名称。

id选择器

定义：body标签中的所有标签都有id属性。 注：一个页面中只能使用一个id名，id名必须是唯一。

使用：id选择器使用散列符号（#）开头，后面写上id的名称。

网页中引入CSS样式

内联（行内）样式：html中的所有标签都有style属性，在style属性中直接写入css样式。 示例： <div style=“color:red;font-size:20px;”>          这是内联样式 </div>

内部样式表：将html代码和css样式做简单分离，在网页头部创建style标签，在其中写入css样式。

外部样式表：将css样式单独写入到一个 xxx.css外部文件中。 （1）使用link标签引入外部css文件。 （2）使用@import导入外部css文件

link标签引入外部样式文件

声明外部样式表：rel=“stylesheet”

引入的文件类型：type=“text/css”

引入的文件地址：href=”style.css“

样式优先级         行内（内联）样式   >  内部样式表   >   外部样式表

选择器优先级       id选择器  >  类（class）选择器  >  标签选择器

字体样式

字体类型	font-family
字体大小	font-size
字体风格	font-style
字体粗细	font-weight
字体属性	font

文本样式

color   设置文本颜色 red #362596 rgb(32,250,50)

text-align   设置元素水平对齐方式 left   center   right

text-indent 设置首行文本的缩进

line-height    设置文本的行高

text-decoration 设置文本的装饰 none:默认，标准文本 underline：定义文本下划线 overline：定义文本上划线 line-through：定义穿过文本的一条线

鼠标样式

defalut	默认光标
pointer	超链接指针
wait	等待状态
help	指示可用的帮助
text	指示文档
crosshair	鼠标呈现十字状

背景样式

背景颜色：background-color red #536256 rgb(30,250,13)

背景图片地址：background-image:url(图片路径) 图片绝对路径 图片相对路径

背景重复方式：background-repeat no-repeat   不重复 repeat-x      水平重复 repeat-y      垂直重复 repeat         默认重复

背景定位：background-position 像素：px 水平方向：left、center、right 垂直方向：top、center、bottom

CSS高级选择器

并集选择器         交集选择器        后代选择器       子元素选择器       属性选择器

并集选择器

多个选择器通过逗号连接而成 示例：      div,p,span,.codeup,#helloid{         

交集选择器 

由两个选择器连接构成，选中二者范围的交集，两个选择器之间不能有空格 第一个必须是标签选择器，第二个必须是类选择器或者ID选择器 示例：     div.codeup{

后代选择器 

外层的选择器写在前面  内层的选择器写在后面  之间用空格分隔

标签嵌套时，内层的标签成为外层标签的后代

  使用标签选择器、id选择器、类选择没有先后顺序

示例：      div  .codeup{

子元素选择器

通过  >  连接在一起而成   仅作用于子元素

示例：      div>.codeup{          color:red;          font-size:20px;      }

属性选择器

选取带有指定属性的元素   选取带有指定属性和值的元素

示例：    input[name]{          border:1px soild red;     }     input[type=”text”]{          border:1px soild red;     }     div[ class=“codeup”]{          color:red;     }

边框样式

 边框颜色：border-color

边框粗细：border-width

边框简写：border

盒子模型之内边距：padding

盒子模型之外边距：margin

css浮动

float 属性：left  right  none

clear 属性：none    left    right    both

overflow 属性

auto	自适应，如果内容被修剪，则浏览器会显示滚动条来查看超出内容
scroll	内容会被修剪，但是浏览器会显示滚动条以便查看超出内容
hidden	内容会被修剪，并且超出的内容是不可见的
visible	默认值。内容不会被修剪，会呈现在盒子之外

verflow：visible：超出内容不会被修剪，会正常显示在容器外部

overflow：hidden：超出内容会被修剪，并且超出内容是不可见的，隐藏的

overflow：scroll：超出内容会被修剪，但是浏览器会显示滚动条以便查看超出内容

overflow：auto：自适应，如果内容被修剪，则浏览器会显示滚动条来查看超出内容