本文共 4719 字，大约阅读时间需要 15 分钟。

CSS和HTML分开的优点

HTML负责基本的内容展示，而CSS负责样式的控制，制造效果。

1、实现解耦合的作用 2、使得协作更加明确 3、开发效率得到提高

CSS和HTML的结合方式

内联：就是在想要控制样式的的标签内直接控制，只能作用于该部分，范围最小。

内部：直接在head内部中控制该文件的样式。

外部：通过link标签链接一个外部的css文件，而控制方式就直接书写在这个外部css文件中。

CSS的基本语法

格式：

选择器{ 属性：属性值; 属性：属性值;

}

选择器：就是用于筛选特征相似的元素

基础选择器：

id选择器：#id属性值{}

优先级很高，只能渲染一次 元素选择器：直接筛选元素相对应的内容 类选择器：class属性值{} 优先级中等，可以渲染多次 优先性上id>calss>元素

扩展选择器：

通用选择器：*{}选择所有元素

并集选择器：选择器1，选择器2{} 子集选择器：选择器1 选择器2{} 父集选择器：选择器1>选择器2（选择选择器2上的选择器1） 属性选择器：元素名称[属性=“属性值”]{} 伪类选择器：元素：状态{}

• 链接伪类选择器
  一 链接伪类选择器注意事项.
  二 链接伪类选择器实际开发中的写法.
  链接伪类选择器注意事项

1. 为了确保生效，请按照 LVHA 的循顺序声明 :link－:visited－:hover－:active。
2. 记忆法：love hate 或者 lv 包包 hao 。
3. 因为 a 链接在浏览器中具有默认样式，所以我们实际工作中都需要给链接单独指定样式。

/* a 是标签选择器 所有的链接 */  a {     color: gray; } /* :hover 是链接伪类选择器 鼠标经过 */ a:hover {     color: red; /* 鼠标经过的时候，由原来的 灰色 变成了红色 */ }

• :focus 伪类选择器
  :focus 伪类选择器用于选取获得焦点的表单元素。
  焦点就是光标，一般情况 类表单元素才能获取，因此这个选择器也主要针对于表单元素来说

input:focus {     background-color:yellow;}

  状态：linked:初始化

     hover:鼠标悬浮状态      active：鼠标点击但是未打开状态       visited:访问过状态

CSS属性

字体（Font）属性

font-size：字体大小

font-family：字体系列 font-weight:字体粗细，400代表去除加粗 font-style:代表是否斜体，normal/italic 字体复合属性

body {     font: font-style font-weight font-size/line-height font-family; }

使用 font 属性时，必须按上面语法格式中的顺序书写，不能更换顺序，并且各个属性间以空格隔开

不需要设置的属性可以省略（取默认值），但必须保留 font-size 和 font-family 属性，否则 font 属性将不起作用

文本（Text） 属性

color：文本的颜色

text-align：对其方式 line-height：行高 text-decoration:是否有下划线 text-indent：文本缩进（2em即两个字体单位）

边框（Border）属性

border：设置边框，复合属性

尺寸(Dimension) 属性

width：设置宽度

height：设置高度

背景（background）属性

background：设置背景，复合属性

background-color:颜色值;

background-color:transparent;

background-image

属性描述了元素的背景图像。实际开发常见于 logo 或者一些装饰性的小图片或者是超大的背景图片, 优点是非常便于控制位置.

background-image : none | url (url)

background-repeat：背景平铺

background-repeat: repeat | no-repeat | repeat-x | repeat-y

background-position：背景位置

background-position: x y;

1. 参数是方位名词
   如果指定的两个值都是方位名词，则两个值前后顺序无关，比如 left top 和 top left 效果一致
   如果只指定了一个方位名词，另一个值省略，则第二个值默认居中对齐
2. 参数是精确单位
   如果参数值是精确坐标，那么第一个肯定是 x 坐标，第二个一定是 y 坐标
   如果只指定一个数值，那该数值一定是 x 坐标，另一个默认垂直居中
3. 参数是混合单位
   如果指定的两个值是精确单位和方位名词混合使用，则第一个值是 x 坐标，第二个值是 y 坐标

background-attachment：背景固定

background-attachment : scroll | fixed

背景复合写法

为了简化背景属性的代码，我们可以将这些属性合并简写在同一个属性 background 中。从而节约代码量. 当使用简写属性时，没有特定的书写顺序,一般习惯约定顺序为：

background: 背景颜色 背景图片地址 背景平铺 背景图像滚动 背景图片位置;background: transparent url(image.jpg) repeat-y fixed top ;

CSS 的元素显示模式

• 块元素

常见的块元素有
~
、
、
    
     、
     
      、
      
       、
       
等，其中 
        
          标签是最典型的块元素。
        
      
     
    

块级元素的特点：

① 比较霸道，自己独占一行。 ② 高度，宽度、外边距以及内边距都可以控制。 ③ 宽度默认是容器（父级宽度）的100%。 ④ 是一个容器及盒子，里面可以放行内或者块级元素。 注意：

文字类的元素内不能使用块级元素 
 标签主要用于存放文字，因此 
 里面不能放块级元素，特别是不能放
   
      同理， 
    
~
    
等都是文字类块级标签，里面也不能放其他块级元素
   

• 行内元素

常见的行内元素有 、、、、、、、、、等，其中 标签是最典型的行内元素。有的地方也将行内元素称为内联元素。

行内元素的特点：

① 相邻行内元素在一行上，一行可以显示多个。 ② 高、宽直接设置是无效的。 ③ 默认宽度就是它本身内容的宽度。 ④ 行内元素只能容纳文本或其他行内元素。 注意： 链接里面不能再放链接 特殊情况链接 <a> 里面可以放块级元素，但是给 <a> 转换一下块级模式最安全

• 行内块元素

在行内元素中有几个特殊的标签 —— 、、，它们同时具有块元素和行内元素的特点。有些资料称它们为行内块元素。

行内块元素的特点：

① 和相邻行内元素（行内块）在一行上，但是他们之间会有空白缝隙。一行可以显示多个（行内元素特点）。 ② 默认宽度就是它本身内容的宽度（行内元素特点）。 ③ 高度，行高、外边距以及内边距都可以控制（块级元素特点）。

• 元素显示模式转换
  转换为块元素：display:block;
  转换为行内元素：display:inline;
  转换为行内块：display: inline-block;

Chrome浏览器调试

登录案例

HTML展示

    
           
   
   
    
        
    
        
     
新用户注册
        
     
USER REGISTER
    
    
    
        
    
        
     
            
      
                
       
                            
         
           
用户名
           
          
          
           
密码
           
 
          
          
           
Email
           
          
          
           
姓名
           
          
          
           
手机号
           
          
          
           
性别
           
 男 女 
          
          
           
出生日期
           
  
          
          
           
验证码
           
   
          
          
           
  
          
         
       
            
      
        
     
    
    
    
        
    
        
     
已有账号?立即登陆
    
    
   

CSS展示

*{       margin: 0px;    padding: 0px;    box-sizing: border-box;}body{       background: url("../img/register_bg.png") no-repeat center;}.rg_layout{       width: 900px;    height: 500px;    border: 8px solid #EEEEEE;    background-color: white;    /*让div水平居中*/    margin: auto;    margin-top: 25px;}.rg_left{       /*border: 1px solid red;*/    float: left;    margin: 15px;}.rg_left_chinese{       color:#FFD026;    font-size: 20px;}.rg_left_english{       color:#A6A6A6;    font-size: 20px;}.rg_center{       /*border: 1px solid red;*/    float: left;    margin: 15px;}.td_left{       width: 100px;    text-align: right;    height: 45px;}.td_right{       padding-left: 50px ;}#username,#password,#email,#name,#phone,#birthday,#checkcode{       width: 251px;    height: 32px;    border: 1px solid #A6A6A6 ;    /*设置边框圆角*/    border-radius: 5px;    padding-left: 10px;}#checkcode{       width: 110px;}#img_check{       height: 32px;    /*设置垂直居中*/    vertical-align: middle;}#btn_sub{       width: 150px;    height: 40px;    margin-top: 15px;    margin-left: 50px;    background-color: #FFD026;    border: 1px solid #FFD026 ;}.rg_right{       /*border: 1px solid red;*/    float: right;    margin: 15px;}.rg_right_login{       font-size: 15px;}.rg_right_login a{       color: pink;}

转载地址：http://jpux.baihongyu.com/