CSS层叠样式表与表相分离。常用CSS2和CSS3。

HTML引入CSS

1.行内样式

 <div style="color:red"></div>

2.内部样式

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

3.外部样式

<link rel="stylesheet" type="text/css" href="css/table.css">

4.导入样式

        /*在css导入样式*/
@import url(../Content/bootstrap.css);

样式选择器

    <style type="text/css">
/*标签选择器*/
a {
color: red;
}
/*类选择器*/
.top {
color: yellow;
}
/*ID选择器*/
#DivTop {
color: green;
}
/*后代继承选择器*/
table tr td {
color: orange;
}
/*群选择器*/
a, span, h1 {
font-size: 18px;
}
/*属性选择器*/
input[type=text] {
color: aqua;
}
/*伪选择器*/
a::after {
content: "aa";
color: red;
} a::before {
content: "bb";
color: burlywood;
}
a:hover {
color:azure;
}
</style>

CSS选择器优先级计算

inportant>内联>ID>类>标签|伪类|属性选择器>伪对象>继承>通配符>继承

权值:
style=“”——1000
id选择器 ——100
类选择器/属性选择器/伪类选择器 ——10
标签/伪对象 ——1
通配选择器 ——0
例子:
img.thumb:after,总纬度是0,0,1,2(即:1+10+1=12;)
[data-job="frontend"]::first-letter,总纬度是0,0,1,1(即:10+1=11;)
#main::before,总纬度是0,1,0,1(即:100+1=101;)
[type="checkbox"]:checked,总纬度是0,0,2,0(即:10+10=20;)
ul#shop-list,总纬度是0,1,0,1(即:1+100=101;)

CSS基础及选择器的更多相关文章

  1. HTML&CSS基础-属性选择器

    HTML&CSS基础-属性选择器 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.html源代码 <!DOCTYPE html> <html> & ...

  2. HTML&CSS基础-常用选择器

    HTML&CSS基础-常用选择器 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.html源代码 <!DOCTYPE html> <html> & ...

  3. CSS基础和选择器

    什么是CSS? CSS是指层叠样式表(Cascading Style Sheets),样式定义如何显示HTML元素,样式通常又会存在于样式表中.也就是说把HTML元素的样式都统一收集起来写在一个地方或 ...

  4. 李洪强和你一起学习前端之(3)Css基础和选择器

    大家好! 经过了前面的学习,是不是对前端的学习有了初步的了解.虽然我之前有iOS开发的经验,现在接触一门新的语言,对我来说 有一定的优势,但是一门技术对于谁来说都是公平的,我承认,我在接触新知识的时候 ...

  5. CSS基础--属性选择器、伪类选择器

    属性选择器 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...

  6. Css基础-id选择器

    id 选择器以#来定义 <p id="pid">Hello css</p> #pid { color:red; } <div id="div ...

  7. CSS 基础 优先级 选择器 继承

    1.样式优先级 (内联样式)Inline style     >    (内部样式)Internal style sheet     >     (外部样式)External style ...

  8. CSS基础之选择器

    一:CSS介绍 CSS(Cascading Style Sheet,层叠样式表)定义如何显示HTML元素. 当浏览器读到,一个样式表时,就会按照. 二:CSS语法 每个CSS有两部分组成:选择器和声明 ...

  9. CSS基础2——选择器

    前面说过样式规则.也知道了样式规则语法形式为:选择器+声明块 如:div{ color:black:padding:10px; }   div即表示选择器(此处是元素选择器),花括号里的内容就是声明块 ...

随机推荐

  1. 给td添加滚动条

    <td><div style="overflow-y:scroll;height:330px;">test</div></td>

  2. java高新技术-可变参数与OverLoad相关面试题分析

    可变参数 可变参数的特点: 只能出现在参数列表的最后: ...位于变量类型和变量名之间,前后有无空格都可以: 调用可变参数的方法时,编译器为该可变参数隐含创建一个数组,在方法中以数组的形式访问可变参数 ...

  3. 选择QT作为自己的图形库

    图形库太多,公司里面一直使用自己的图形库,换一家公司,就换个图形库,现在公司没有对我开放图形库代码. 想来想去还是自己要有一套图形库,拿来主义最方便,选来选去感觉还是QT比较方便.同时能学习一下C++ ...

  4. asp.net mvc 通过T4模板生成框架

    http://www.cnblogs.com/rdst/archive/2012/08/13/2637210.html http://www.kuqin.com/shuoit/20140716/341 ...

  5. Google Map API V3开发(1)

    Google Map API V3开发(1) Google Map API V3开发(2) Google Map API V3开发(3) Google Map API V3开发(4) Google M ...

  6. C语言基础(3)-二进制、八进制、十六进制

    1.二进制 一个位只能表示0或者1两种状态,简称bit(比特) 一个字节为8个二进制数,称为8位,简称BYTE(字节) 一个字为2个字节,简称WORD. 两个字为双字,简称DWORD,占32个bit ...

  7. CF451E Devu and Flowers (隔板法 容斥原理 Lucas定理 求逆元)

    Codeforces Round #258 (Div. 2) Devu and Flowers E. Devu and Flowers time limit per test 4 seconds me ...

  8. NGUI 学习笔记

    1.NGUI中UI的深度关系(新版NGUI 3.9): 在同一个Panel中,不管同不同Altas,各个UI的顺序受Depth影响 在不同Panel中,UI的顺序受Panel的Depth影响 例如Pa ...

  9. getcwd()和dirname(__FILE__)的区别

    我个人理解:getcwd()会随着包含文件的改变而改变,而dirname(__FILE__)不会.即 getcwd() 表示获取当前执行文件的物理路径. 如 getcwd()显示: /www/proj ...

  10. 【Go入门教程1】Go 安装,GOROOT,GOPATH,Go工作空间

    Go安装 Windows 安装 访问Golang Code下载页,32 位请选择名称中包含 windows-386 的 msi 安装包,64 位请选择名称中包含 windows-amd64 的.下载好 ...