`css`

  • css全称层叠样式表（Cascading Style Sheet）——修饰、美化网页，化妆师

css样式的多种形式

一、行间样式				-----内部样式
	<div style="width: 200px;height: 200px;background: red"></div>
	
二、内嵌（css）样式		    -----内部样式
	div{
            width: 200px;
            height: 200px;
            background: red
        }
        
三、外链（css）样式 		------外部样式
	 <link rel="stylesheet" href="url.css">

 

样式优先级

外链css样式 < （内嵌css）样式 < 行间样式

 

css选择器

  • *(通用元素选择器) 匹配任何元素

    *{ margin: 0;padding: 0;}

  • 元素选择器

    • 选中相同的元素，对相同的元素设置同一种css样式

    • div{width: 200px;height: 200px;background: red;}

    • 选中页面中所有的的div元素

  • class选择器

    • 给标签设置一个class属性，在写样式时，在class名字前面加个.

    • .box{width: 200px; height: 200px;background: red;}

    • 一般给具有相同属性的元素设置同一个class

  • id选择器

    • 给标签设置一个id属性，在写样式时，在id名字前面加个#

    • #box{width: 200px; height: 200px;background: red;}

    • id具有唯一性，在一个页面中，同一个id只能出现一次

  • 群组选择器

    • 对几个有相同属性的选择器进行操作时，一个一个分开写，显得代码冗余

    • p,div{width: 200px; height: 200px;background: red;}
.box,.wrap{width: 200px; height: 200px;background: red;}

    • 两个选择器之间必须用 ，隔开

  • 相邻选择器

    • 相邻选择器操作的对象是该元素的同级元素

    • div + p{ background: green; }

    • 选择div相邻的下一个兄弟元素p

  • 兄弟选择器

    • 兄弟选择器操作的对象是该元素下的所有同级元素

    • div ~ p{background: green;}

    • 选择div相邻的所有兄弟元素p

  • 子代选择器

    • 选择某个元素下面的子元素

    • div > p{background: green;}

  • 后代选择器

    • 选择某个元素下面的子元素

    • div p{background: green;}

  • 伪类选择器

    • :link 匹配所有未被点击的链接

    • :visited 匹配所有已被点击的链接

    • :hover 匹配鼠标悬停其上的元素

    • :active 匹配鼠标已经在其上按下但是还没有释放的元素

  • hover拓展

    • .box:hover{}		改变元素本身
    • .box:hover p{}     改变元素下面的p子元素

  • cursor鼠标移入时以何种状态显示

    • defult 通常是一个箭头

    • wait光标指示正忙

    • help光标指示帮助

    • pointer 小手

选择器优先级

  • 基本选择器优先级排序（从低到高）

    • *{}

    • tagName{}

    • .class{}

    • #id{}

特殊情况

  • 级别相同的选择器：后面的样式会覆盖前面的（后来居上）

    .wrap{background:red}

    .wrap{background:green}

  • 复杂后代选择器

    • 比高低顺序依次是：id 选择器 class选择器 tanName{}

    • id选择器个数不相等，id个数越多的优先级越高，后面不用比

    • id选择器个数相等，则看class个数，多的优先级高，后面不用比

    • class个数相等，再看tagName个数

    • #wrap ul li .list{}和.wrap ul li #list{}优先级一样

  • 选择器使用原则：准确的选中元素，并且不影响其他元素

    ​

table表格

表格的常用标签

  • table表格

  • thead表格头

  • tbody表格主体

  • tfoot表格尾

  • th元素定义表头单元格

  • tr定义表格行

  • td元素定义内容单元格

  • caption表格标题

  • rowspan合并行

  • colspan合并列