CSS基础及选择器
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基础及选择器的更多相关文章
- HTML&CSS基础-属性选择器
HTML&CSS基础-属性选择器 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.html源代码 <!DOCTYPE html> <html> & ...
- HTML&CSS基础-常用选择器
HTML&CSS基础-常用选择器 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.html源代码 <!DOCTYPE html> <html> & ...
- CSS基础和选择器
什么是CSS? CSS是指层叠样式表(Cascading Style Sheets),样式定义如何显示HTML元素,样式通常又会存在于样式表中.也就是说把HTML元素的样式都统一收集起来写在一个地方或 ...
- 李洪强和你一起学习前端之(3)Css基础和选择器
大家好! 经过了前面的学习,是不是对前端的学习有了初步的了解.虽然我之前有iOS开发的经验,现在接触一门新的语言,对我来说 有一定的优势,但是一门技术对于谁来说都是公平的,我承认,我在接触新知识的时候 ...
- CSS基础--属性选择器、伪类选择器
属性选择器 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...
- Css基础-id选择器
id 选择器以#来定义 <p id="pid">Hello css</p> #pid { color:red; } <div id="div ...
- CSS 基础 优先级 选择器 继承
1.样式优先级 (内联样式)Inline style > (内部样式)Internal style sheet > (外部样式)External style ...
- CSS基础之选择器
一:CSS介绍 CSS(Cascading Style Sheet,层叠样式表)定义如何显示HTML元素. 当浏览器读到,一个样式表时,就会按照. 二:CSS语法 每个CSS有两部分组成:选择器和声明 ...
- CSS基础2——选择器
前面说过样式规则.也知道了样式规则语法形式为:选择器+声明块 如:div{ color:black:padding:10px; } div即表示选择器(此处是元素选择器),花括号里的内容就是声明块 ...
随机推荐
- 给td添加滚动条
<td><div style="overflow-y:scroll;height:330px;">test</div></td>
- java高新技术-可变参数与OverLoad相关面试题分析
可变参数 可变参数的特点: 只能出现在参数列表的最后: ...位于变量类型和变量名之间,前后有无空格都可以: 调用可变参数的方法时,编译器为该可变参数隐含创建一个数组,在方法中以数组的形式访问可变参数 ...
- 选择QT作为自己的图形库
图形库太多,公司里面一直使用自己的图形库,换一家公司,就换个图形库,现在公司没有对我开放图形库代码. 想来想去还是自己要有一套图形库,拿来主义最方便,选来选去感觉还是QT比较方便.同时能学习一下C++ ...
- asp.net mvc 通过T4模板生成框架
http://www.cnblogs.com/rdst/archive/2012/08/13/2637210.html http://www.kuqin.com/shuoit/20140716/341 ...
- 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 ...
- C语言基础(3)-二进制、八进制、十六进制
1.二进制 一个位只能表示0或者1两种状态,简称bit(比特) 一个字节为8个二进制数,称为8位,简称BYTE(字节) 一个字为2个字节,简称WORD. 两个字为双字,简称DWORD,占32个bit ...
- CF451E Devu and Flowers (隔板法 容斥原理 Lucas定理 求逆元)
Codeforces Round #258 (Div. 2) Devu and Flowers E. Devu and Flowers time limit per test 4 seconds me ...
- NGUI 学习笔记
1.NGUI中UI的深度关系(新版NGUI 3.9): 在同一个Panel中,不管同不同Altas,各个UI的顺序受Depth影响 在不同Panel中,UI的顺序受Panel的Depth影响 例如Pa ...
- getcwd()和dirname(__FILE__)的区别
我个人理解:getcwd()会随着包含文件的改变而改变,而dirname(__FILE__)不会.即 getcwd() 表示获取当前执行文件的物理路径. 如 getcwd()显示: /www/proj ...
- 【Go入门教程1】Go 安装,GOROOT,GOPATH,Go工作空间
Go安装 Windows 安装 访问Golang Code下载页,32 位请选择名称中包含 windows-386 的 msi 安装包,64 位请选择名称中包含 windows-amd64 的.下载好 ...