CSS层叠样式表与表相分离。常用CSS2和CSS3。
HTML引入CSS
1.行内样式
2.内部样式
div {
color:red;
}
3.外部样式
4.导入样式
/*在css导入样式*/
@import url(../Content/bootstrap.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;
}
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;)
HTML&;CSS基础-属性选择器
HTML&CSS基础-属性选择器 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.html源代码 & ...
HTML&;CSS基础-常用选择器
HTML&CSS基础-常用选择器 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.html源代码 & ...
CSS基础和选择器
什么是CSS? CSS是指层叠样式表(CascadingStyleSheets),样式定义如何显示HTML元素,样式通常又会存在于样式表中.也就是说把HTML元素的样式都统一收集起来写在一个地方或 ...
李洪强和你一起学习前端之(3)Css基础和选择器
大家好! 经过了前面的学习,是不是对前端的学习有了初步的了解.虽然我之前有iOS开发的经验,现在接触一门新的语言,对我来说 有一定的优势,但是一门技术对于谁来说都是公平的,我承认,我在接触新知识的时候 ...
CSS基础--属性选择器、伪类选择器
属性选择器
Hello css #pid { color:red; }
phpize增加php模块
phpize增加php模块 张映 发表于 -02-09 分类目录:php 一,phpize的好处 什么时候我们要用phpize呢?我们在安装php时: './configure' '--pr ...
[py]python中的特殊类class type和类的两面性图解
生活中的模具 生活中 编程 万物都从无到有, 起于烟尘 () 生产原料,铁 object 车床-生产各类模具 元类即metaclass,对应python的class type 模具-生产各类实在的物品 ...
“全栈”Java多线程第二十一章:同步代码块产生死锁的例子
难度 初级 学习时间 10分钟 适合人群 零基础 开发语言 Java 开发环境 JDK v11 IntelliJ IDEA v.3 文章原文链接 "全栈"Java多 ...
苹果电脑(Mac mini或Macbook或iMac)恢复出厂设置
苹果电脑(Mac mini或Macbook或iMac)恢复出厂设置,首先要做好如下的准备: 第一:数据的备份:第二:保证正常的wifi连接:第三:有线的鼠标键盘连接: 具体恢复操作步骤: 步骤一:电脑 ...