css:
Cascading Style Sheet 层叠样式表——修饰、美化网页,化妆师
CSS优先级,即是指CSS样式在浏览器中被解析的先后顺序。
行间样式 > 内嵌css样式 > 外链css样式(在style之前引入)
如果外链css样式在style之后引入,则外链css样式覆盖内嵌css样式,谁在后面以谁为准。
行间样式直接写在标签里:
<div style="width: 100px;height: 100px;background: bisque"></div>
内嵌css样式写在head的style里:
<style>div{ width: 100px; height: 100px; background: red;}</style>外链css样式:
通过link标签,引用一个外部的css文件
<link rel="stylesheet" href="index.css">
基本选择器:
<style>/* *通配符选择器 匹配任何元素 */*{ margin: 0; padding: 0;}/*元素选择器 选择相同的元素对相同的元素设置一种css样式选中页面中所有的此元素*/div{ width: 100px; height: 100px; background: red;}/* id选择器 给标签设置一个id属性,在写样式时,在id名字前面加个 # */#box{ width: 150px; height: 150px; background: bisque;}/* class选择器 给标签设置一个class属性,在写样式时,在class名字前面加个.一般给具有相同属性的元素设置同一个class */.box{ width: 120px; height: 120px; background: blueviolet;}</style>复杂选择器:
<style>/* 群组选择器 对几个有相同属性的选择器进行样式设置 两个选择器之间必须用逗号隔开*/div,p{ width: 120px; height: 120px; background: bisque;}/* ~ 兄弟选择器 操作的对象是该元素下的所有兄弟元素*/div ~ p{ width: 100px; height: 100px; background: blueviolet;}/* > 子代选择器 选择某个元素下面的子元素*/div > div{ width: 50px; height: 50px; background: blue;}/* + 相邻选择器操作的对象是该元素的同级元素选择div相邻的下一个兄弟元素选择到紧随目标元素后的第一个元素*/div + p{ width: 100px; background: blueviolet; height: 100px;}</style>后代选择器:
<style>li{/*去掉li标签前面的东西*//*list-style: none;*/ width: 50px; height: 50px; background: bisque;}div ol li{ list-style: none;}</style> ???伪类选择器:
<style>/*LoVe HAte*/a:link{/*link 未被点击的链接*/ color: red;}a:visited{/*已被点击的链接*/ color: blueviolet;}a:hover{/*鼠标悬停其上的元素 这个一定要掌握*/ color: yellowgreen;}a:active{/*鼠标已经再其上按下但是还没有释放的元素*/ color: aqua;}div{ width: 100px; height: 100px; background: bisque;}div:hover{ /*改变的是div本身*/ background: blueviolet; cursor: pointer;/*手指*/ cursor: help;/*帮助*/ cursor: wait;/*等待*/ cursor: default;/*默认*/}div:hover p{ !*改变的是p*! width: 50px; height: 50px; background: blue;}a:link,a:visited,a:hover,a:active{ color: blue; cursor: pointer; /*去掉下划线*/ text-decoration: none;}</style>选择器优先级:
1.先比id(最高位) class(中间位) tagName(个数位)
??????????? 1 ????????????????2 ?????????3
???2.id选择器个数不相等,id越多,优先级越高
???3.id选择器个数相同,则看class,class多的优先级高
???4.class个数相等,就看tagName个数
前端(2)CSS
原文地址:https://www.cnblogs.com/ikamu/p/8447657.html