CSS知识点整理

作者: OnePi | 来源:发表于2016-12-04 23:01 被阅读370次

写在前面：这是一篇学习CSS的笔记。重点在于罗列CSS的知识点。

CSS

㈠ CSS入门

什么是CSS？

CSS 指层叠样式表 (Cascading Style Sheets)
作用：
定义如何显示 HTML 元素，修改和美化网页！
CSS的书写形式：内联样式、内部样式表、外链样式表

样式表的优先级：

一般，所有的样式会根据下面的规则层叠于一个新的虚拟样式表中，其中数字 4 拥有最高的优先权。
- 1.浏览器缺省设置
- 2.外链样式表
- 3.内部样式表（位于 <head> 标签内部）
- 4.内联样式（在 HTML 元素内部）
因此，内联样式（在 HTML 元素内部）拥有最高的优先权。

4.1 外部加载的形式（最常用）
      //新建css文件：style.css
    <link rel="stylesheet" type="text/css" href="style.css" />

4.2 头部形式（写在HTML头部区域） 
    <style type="text/css">
        //CSS样式语法
        p{color: blue; text-align: center;}
        h1{color: #999999; font-size: 12px}
    </style>

4.3 内联形式（写在HTML标签中） 
     style="color: blue; text-align: center;"

e.g.
<!DOCTYPE html>
<html>
<head>
    <title></title>

    <link rel="stylesheet" type="text/css" href="style.css" /> //第一种：外部文件加载

    <style type="text/css">   //第二种：写在头部文件
        //CSS样式语法
        p{color: blue; text-align: center;}
        h1{color: #999999; font-size: 12px}
    </style>
</head>
<body>
    <p>头部CSS样式</p>

    <p style="color: blue; text-align: center;">内联CSS样式</p>  //第三种：内联方式 style属性

    <h1>我是标题</h1>

</body>
</html>

㈡ CSS语法

CSS的语法结构：
选择器{属性：值; 属性：值; 属性：值; …}

CSS 基础语法

花括号：{}
冒号：属性和值被冒号(:)分开
分号：用分号(;)将每个声明分

1. CSS选择器

常用的9个选择器！

1. 通配选择器

   <style type="text/css">
        *{color: red;}
   </style>


2. 标签选择器
//直接用标签名
   <style type="text/css">
        h1{width: 200px; height: 300px;border: 1px solid red;text-align: center;}
   </style>


3. id选择器
类似于类选择，但具有唯一性！
   <style type="text/css">
        //先给标签起一个名字:id="tag_01"
        #tag_01{color: red;border: 1px solid red;width: 100px;height: 200px;}
   </style>

</head> 
<body> 
   <p id="tag_01"></p>
</body> 


4. 类选择器(最常用)
<head> 
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
   <title>制作我的第一个网页</title> 

   <style type="text/css">
     //先给标签起一个名字:class =“tag01”
        .tag01{color: red;border: 1px solid red;width: 100px;height: 200px;}
        .tag02{list-style-type: none;}
      
     //结合标签选择器
        li.tag01 {color:red;}
   </style>

</head> 
<body> 
   <p class="tag01"></p>  //先给标签起一个名字:class =“tag01”
   <ul>
    <li class="tag01 tag02"></li>
    <li class="tag01 tag02"></li>
   </ul>
</body> 

注意：tag命名规则：必须以字母开头，字母数字下划线组成！



5. 属性选择器

   <style type="text/css">
    <!--属性-->
        [title]{border: 1px solid red;width: 200px;height: 20px;}
    <!--指定标签的属性-->
         img[title][id]{color: cyan;}
    <!--指定限定条件的标签的属性-->
         img[title][id="tag_01"]{color: cyan;}           
   </style>

</head> 
<body> 
    <img src="" title="image01" id="tag_01" />
    <img src="" title="image02" class="tag01" />
    <p>我是段落</p>
</body> 


<= === ===== ======= ==========>

6. 后代选择器<也很常用>

   <style type="text/css">
        <!--嵌套标签呈现后代关系-->
        table tr th a{text-decoration: none;color: red;font-size: 5cm;} 
        table a{text-decoration: none;color: red;font-size: 5cm;} //也可以跳跃代数
   </style>

</head> 
<body> 
    <table>
        <tr> <!--嵌套标签呈现后代关系-->
            <th></th>
                <a href="">删除下划线</a>
            <td></td>
        </tr>
    </table>
</body> 


7. 子代选择器

   <style type="text/css">
        tr > td{color: red;background-color: yellow;}
   </style>

</head> 
<body> 
    <table>
        <tr> 
            <td>子代选择器</td>
        </tr>
    </table>
</body> 

注意：只能两代。


8. 相邻兄弟选择器

   <style type="text/css">
       td + td{color: red;}   
   <!--限制范围-->
       .tag01 + .tag02{color: green;}
   </style>

</head> 
<body> 
    <table>
        <tr>
            <td>我是TD1</td> 
            <td>我是TD2</td> <!--被修改的相邻兄弟-->
            <td>我是TD5</td> <!--被修改的相邻兄弟-->
        </tr>
        <tr>
            <td>我是TD3</td>
            <td>我是TD4</td>
            <td>我是TD6</td> <!--被修改的相邻兄弟-->
        </tr>
        <tr>
            <td class="tag01">我是TD3</td>
            <td class="tag02">我是TD4</td> <!--被修改的相邻兄弟-->
            <td>我是TD6</td> 
        </tr>
    </table>
</body> 


9. 群组选择器

   <style type="text/css">
        //用逗号隔开
        li,td,.tag01,#tag_01{color: red;font-size: 12px;}
   </style>

CSS中的伪类

伪类的语法： selector : pseudo-class {property: value}
CSS 类与伪类搭配使用: selector.class : pseudo-class {property: value}

//超链接<a></a>的伪类
a:link{}    /* 没有访问链接的表现样式*/
a:visited{} /* 已经访问链接的表现样式*/
a:hover{}   /* 鼠标悬停链接时的表现的样式*/
a:active{}  /* 鼠标点击链接时的表现的样式*/

注意：必须按顺序写！
<head> 
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
   <title>CSS中的伪类</title> 

   <style type="text/css">
        a:link{color: red;} /* 点击之前表现的样式*/
        a:visited{color: #999999;} /* 点击之后表现的样式*/
        a:hover{color: green; text-decoration: none;} /* 鼠标悬停的表现的样式*/
        a:active{color: yellow;} /* 鼠标点击时的表现的样式*/
   </style>
</head> 
<body> 
    <a href="http://www.163.com">进入网页首页</a>
</body> 
</html>

2. CSS常用属性

详细属性：参考链接：http://wenku.baidu.com/view/f51f5d3710661ed9ad51f336.html

⑴ 样式属性

CSS 文字
CSS 文本
CSS 前景色
CSS 背景
CSS 列表

//CSS描述长度的单位：
cm 厘米
mm 毫米
em 当前字体m字母的宽度（代指一个字母的宽度）
ex 当前字体x字母的宽度（代指一个字母的宽度）

in 英寸，1in = 2.54cm 
pt 点，1pt = 1/72in
pc 皮卡，1pc = 12pt
px 像素

百分比(%)  相对值


//CSS中颜色表示方法：
英文单词：red blue ...
十六进制：#999 #FFF  #rrgggbb
RGB格式：rgb(x,y,z) 范围0~255之间整数
         rgb(x%,y%,z%)  范围0~100之间的整数




//字体设置
*{
font-family: "Arial","宋体"，"黑体"，"楷体"; //浏览器会依次查找字体是否安装
font-size: 30pt; //5种表示方式：长度值：30pt；相对默认的百分比：200%;绝对大小：large;相对上一元素：larger;增大值：+5pt
font-weight: normal; //值是100~900之间整百数：normal(400)：正常;blod(700):粗体;border：比上一级增加100；lighter：比上一级减少100
font-style: italic; //italic斜体；oblique:倾斜; normal正常
font-variant: normal; //normal正常；small-caps：小写字母都变成小型的大写字母
}


//文本设置
*{
    text-decoration: underline,blink; //（underline:下划线;overline:上划线;line-through:删除线；blink：闪烁；none：无);
    text-align: left,center; //水平对齐：(left | right | center | justify(两边对齐))
    vertical-align: middle; //垂直对齐：(baseline | sub | super | top | text-top | middle | bottom | text-bottom | 百分比)
    text-indent: 20pt;  //首行缩进:(20pt | 100%)
    text-transform: uppercase; //文本转换:(none | capitalize:首字母大写 | uppercase 字母大写 | lowercase 字母小写;
}


//文字布局：字间距&行间距
*{
    letter-spacing: normal; //字符间距：15px
    word-spacing: 15px; //字间距
    line-height: 20pt;  //行高&行间距：20pt | 120% | 2.0
}


//前景色
*{
    color: blue; //前景色:(red | #0000FF | rgb(0,0,255) | rgb(0,0,100%) )
}


//背景色
*{
    background-color: red; //背景色:(red | #0000FF | rgb(0,0,255) | rgb(0,0,100%) )
    background-image: url(images/abc.jpg); 
    background-attachment: scroll; //图像的滚动方式:(scroll:滚动 | fixed:固定);
    background-repeat: repeat; //设置图片重复方式(repeat | no-repeat | repeat-x | repeat-y)
    background-position: left center; //设置图片摆放位置

    background: red url(images/abc.png) repeat-y; //一次设置，必须按照顺序
}
  
  

//列表属性
*{
    list-style-type: disc; //(none | disc 实心黑点 | circle 空心圆点 | square 黑方块 | decimal 十进制123 | lower-roman 小写罗马数字 | upper-roman 大写罗马 | lower-alpha 小写字母 | upper-alpha 大写字母)
    list-style-image: url(); //设置图片为项目符号
    list-style-position: inside; //设置项目符号的位置（outside | inside）

    //一次性设置
    list-style: url() disc outside; //不限顺序，image优先于type
}

⑵ 盒子模型

CSS 内边距
CSS 边框
CSS 外边距

盒子模型：

盒子模型

//边框
*{
    border-color: red yellow blue green; //可以接受1~4个值:(1个值：四个边框同色，2个值：上下 左右；3个值：上 左右 下；4个值：上 右 下 左);
    border-top-color:red;
    border-right-color:red;
    border-bottom-color: red;
    border-left-color:red;

    border-width: 1pt thin 100%; //宽度：可以接受1~4个长度值，还可以接受3个关键词(thin | medium | thick)
    border-top-width: thick;
    border-right-width: 20pt;
    border-bottom-width: 100%;
    border-left-width: medium;

    border-style: none; //边框样式:(none: 无边框 | dotted：小点 | dashed 虚线 | solid 实线 | double 双线 | groove 四进线 | ridge 凸线 | inset 元素内凹 | outset 元素外凹)
    border-top-style: solid;
    border-right-style: dashed;
    border-bottom-style: double;
    border-left-style:none;


    //缩略设置方式:顺序不限;
    border: solid 15px red;
    border-top: 5pt red dashed;
    border-left: dashed red red;
    border-bottom: inset green;
    border-left: dashed;
}


//外边距margin
*{
    margin: 1pt auto 200% auto;//接受1~4长度值和百分数 和 auto 
    margin-top: auto;
    margin-right: 20pt;
    margin-bottom: 20%;
    margin-right: auto auto;
}


//内边距padding
*{
    padding: 3pt; ////接受1~4长度值和百分数
    padding-top: 200%;
    padding-right: 3pt 4pt;
    padding-bottom: 3pt 3pt 5pt;
    padding-left:3pt 3pt 5pt 6pt;
}

⑶ 定位和浮动

CSS 相对定位
CSS 绝对定位
CSS 浮动

内联元素与块级元素

//内联元素与块级元素

区别：块级元素独占一行；可以设置行高，内外边距等；
     内联元素只显示在一行！只能设置左右，不能设置宽高和上下内外边距！

块级元素：
<body></body>
<div></div>
<h1></h1>...<h6></h6>
<ol></ol>
<ul></ul>
<li></li>
<p></p>
<table></table>
<tr></tr>
<td></td>


内联元素：
<a href=""></a>
<i></i>
<u></u>
<b></b>
<span></span>  //文本标签
<font></font>

相对定位与绝对定位

1. 相对定位

相对于自己原来的位置发生改变，并且保留原有的位置空间。

   <style type="text/css">
        .div01{border: 1px solid red;width: 200px;height: 100px;}
        .div02{border: 3px dashed cyan;width: 200px;height: 100px;
            position: relative; /*相对定位*/
            top: -30px;
            left: 50px;}
   </style>



2. 绝对定位

相对于拥有position属性的父级元素的位置发生改变（如果父级元素没有position属性，就会查找父级的父级，直到body），并释放原有的位置空间！

   <style type="text/css">
        .div01{border: 1px solid red;width: 200px;height: 100px;}
        .div02{border: 3px dashed cyan;width: 200px;height: 100px;
            position: absolute; /*绝对定位*/
            top: 30px;
            left: 50px;}
        .div03{border: 1px solid green;width: 200px;height: 100px;}
   </style>



普通流定位：默认定位：
   块级框从上到下一个接一个地排列，框之间的垂直距离是由框的垂直外边距计算出来。
   行内框在一行中水平布置，可以使用水平内边距、边框和外边距调整它们的间距

CSS 定位属性
position    设置定位方式
top     定义了定位元素上外边距边界与其包含块上边界之间的偏移。
right   定义了定位元素右外边距边界与其包含块右边界之间的偏移。
bottom  定义了定位元素下外边距边界与其包含块下边界之间的偏移。
left    定义了定位元素左外边距边界与其包含块左边界之间的偏移。

overflow  设置当元素的内容溢出其区域时发生的事情。
z-index   设置元素的堆叠顺序。


//定位
*{
    position: relative; //设置定位方式:(static 常规 | relative 相对定位 | absolute 绝对定位)

    //元素上下左右的位置
    top: 10%;
    right: 2pt;
    bottom: 200%;
    left: 45pt;

    //元素所占空间
    width: 20%;
    height: 30pt;
}


//z-index(Z轴位置)
*{
    z-index: -1; //大于-1的自然数：-1最底层 值越大越靠近浏览者
}


//溢出
*{
    overflow: scroll; //内容大于元素指定空间产生溢出：(visible 溢出可见 | hidden 溢出隐藏 | scroll 滚动显示 | auto 自动判断)
}

浮动

浮动效果：使竖列的盒子可以横向排版。
         浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。

属性：float

//浮动
*{
    float: left; //元素浮动到页面的左边缘或右边缘:(left | right | none)
    clear: both; //元素旁边是否允许其他元素浮动:(left | right | both | none)
}





浮动的负效果:导致父级元素无法撑开。

清除负效果：(三种方法)

1.添加空盒子：

   <style type="text/css">
        .box{border: 1px solid red;}
        .box01{border: 3px dashed cyan;width: 150px;height: 100px;float: left;}
        .box02{border: 2px solid blue;width: 200px;height: 100px;float: left;}
        .clear{clear：both;} <!--空盒子类-->
   </style>

</head> 
<body> 
    <div class="box">
        <div class="box01"> 我是二个盒子！</div>
        <div class="box02"> 我是三个盒子！</div>
        <div class="clear"></div>  <!--添加空盒子：在被浮动元素的后面(同级元素)添加一个空盒子，并且定义一个clear类-->
    </div>
</body> 

优点：便捷 代码量少
缺点：增加很多空盒子


2..clear{display: block;overflow: hidden;}

   <style type="text/css">
        .box{border: 1px solid red;}
        .box01{border: 3px dashed cyan;width: 150px;height: 100px;float: left;}
        .box02{border: 2px solid blue;width: 200px;height: 100px;float: left;}
        .clear{display: block;overflow: hidden;}
   </style>

</head> 
<body> 
    <div class="box clear"> <!--定义一个clear类,赋给浮动元素的父级元素-->
        <div class="box01"> 我是二个盒子！</div>
        <div class="box02"> 我是三个盒子！</div>
    </div>
</body> 


3. 最流行 最常用 兼容所有浏览器
缺点：代码量多

   <style type="text/css">
        .box{border: 1px solid red;}
        .box01{border: 3px dashed cyan;width: 150px;height: 100px;float: left;}
        .box02{border: 2px solid blue;width: 200px;height: 100px;float: left;}
        .clear.after{display: block;clear: both;content: "." visibility: hidden;height: 0}
        .clear{zoom:"1";}
   </style>

</head> 
<body> 
    <div class="box clear"> <!--定义一个clear类,赋给浮动元素的父级元素-->
        <div class="box01"> 我是二个盒子！</div>
        <div class="box02"> 我是三个盒子！</div>
    </div>
</body>

⑷ 其他

//鼠标的属性
*{
    cursor: auto; //设置鼠标形状：(auto | hand 手型 | text 文本I型 | ....)
}

CSS知识点整理

CSS

㈠ CSS入门

㈡ CSS语法

1. CSS选择器

CSS中的伪类

2. CSS常用属性

⑴ 样式属性

⑵ 盒子模型

⑶ 定位和浮动

内联元素与块级元素

相对定位与绝对定位

浮动

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

编程学习

前端知识采集

我爱编程

沐汐技术博客

前端基础