css引入以及选择器040

css的介绍: css(Cascading Style Sheet) 层叠样式表作用就是给HTML页面标签议案家各种样式定义网页效果简单来说就是讲网页内容和显示样式进行分离 , 提高了显示功能.

　　css 的优点: 1 使数据和显示分开 2 降低网络流量 3 使整个网页视觉效果一致 4 使开发效率提高了 (耦合性降低一人负责写HTML 一人负责写css)

　　三种引入方式 : 1 行内样式

 <div><p style="color: green">我是一个段落</p></div>

　　　　2 内接样式:

<style type="text/css">/* 位置是在head里边写我们的css代码*/ span{color: yellow;}
</style>

　　　　3 外界样式包括链接式和导入式

　　链接式

<link rel="stylesheet" href="./index.css">

　　导入式

<style type="text/css">@import url('./index.css');   //该方法类似于后端的导入模块方式 是css3中的方式 以后会用到
</style>

　　代码如下:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style type="text/css">/*内接式*//*找标签  选择器:选中标签*/p{color: red;font-size: 30px;}.fu{color: red;}</style><!--外接式--><!--<link rel="stylesheet" href="./css/index.css">--><style type="text/css">@import url('./css/index.css');</style>
</head>
<body>
<!--标准文档流下总结: 行内样式的优先级 1000 大于 内接和外接式
-->
<!--1.行内样式--><div class="fu" style="color: aqua">福彩</div><p>李凯</p><span>师宇</span>
</body>
</html>

View Code

优先级为行内样式 > 内接样式 > 外接样式

　　css的选择器基本选择器和高级选择器

　　　　基本选择器包含: 标签选择器 id选择器以及类的选择器(公共类即将类的相同属性写到一起继承避免代码的冗余) 标签选择器和类选择器比较类似可以选中所有的该元素标签的为标签元素类的为名称为该类的元素不管藏得有多深都能选中

　　代码如下:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style type="text/css">/*权重问题 数数  数选择器的数量 id class 标签*/   一定牢牢记住这个顺序/*1 0 0*/#box{color: darkorange;}/*0 1 0*/.box{color: green;}/*0 1 0*/.active{color: yellow;}/*001*/div{color: red;}/* 行内权重1000 > id 100 > 类 10 > 标签 1*/</style>
</head>
<body><div class="box active" id="box">哈哈哈<div><div><div>猜猜我的颜色</div></div></div></div>
</body>
</html>

　　权重问题: 行内权重 1000 > id 100 > 类 10 > 标签 1

　　高级选择器 : 后代选择器子代选择器并集选择器交集选择器

　　　　后代选择器 : 使用空格表示后代选择器顾名思义父元素的后代 (包括儿子孙子重孙子)

 .container p{color: red;        }.container .item p{color: yellow;}

　　　　子代选择器 > 仅仅包含当前元素的子代 (不包含孙子)

.container>p{color: yellowgreen;}

　　　　并集选择器多个选择器之间用逗号隔开表示选中的页面中的多个标签一些共性的元素可以使用并集选择器

/*并集选择器*/
h3,a{color: #008000;text-decoration: none;
}

　　　　交集选择器使用.表示交集选择器第一个标签必须是标签选择器第二个必须是类选择器语法 : div.active

h4{width: 100px;font-size: 14px;
}
.active{color: red;text-decoration: underline;
}
/* 交集选择器 */
h4.active{background: #00BFFF;
}
//它表示两者选中之后元素的共同特征

　　　　属性选择器就是根据标签中的属性选中当前的标签

/*根据属性查找*//*[for]{color: red;}*//*找到for属性的等于username的元素 字体颜色设为红色*//*[for='username']{color: yellow;}*//*以....开头  ^*/ /*[for^='user']{color: #008000;}*//*以....结尾   $*//*[for$='vvip']{color: red;}*//*包含某元素的标签*//*[for*="vip"]{color: #00BFFF;}*//**//*指定单词的属性*/label[for~='user1']{color: red;}input[type='text']{background: red;}

 /*权重问题 数数  数选择器的数量 id class 标签*/　　权重相同时 以后来设置的属性为主

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>/*1 2 1*/.box1 .box2 #wrap3 p{color: red;}/*1 2 1*/#wrap1 .box2 div .active{color: green;}/*2 0 1*//*#wrap1 #wrap2 div p{*//*}*/</style>
</head>
<body>
<div class="box1" id="wrap1"><div class="box2" id="wrap2"><div class="box3" id="wrap3"><p class="active">猜猜我的颜色</p></div></div>
</div>
</body>
</html>

　　通过继承来设置的属性它的权重为0 与选中的元素没有可比性

#box1 #box2 .wrap3{color: red;
}
#box2 .wrap3 p{color: green;
}// 运行结果为绿色的

　　都是继承来的谁描述的近显示谁的属性 (就近原则)

#box1 #box2 .wrap3{color: red;
}.wrap1 #box2{color: green;
}
//红色的离得较近 字体颜色是红色的

　　　　可以继承的属性有 : color font-* line-* text-* 属性

　　伪类选择器一般会用在超链接a标签中使用a标签的伪类选择器一定要遵循爱恨准则 LoVe HAte

/*没有被访问的a标签的样式*/.box ul li.item1 a:link{color: #666;}/*访问过后的a标签的样式*/.box ul li.item2 a:visited{color: yellow;}/*鼠标悬停时a标签的样式*/.box ul li.item3 a:hover{color: green;}/*鼠标摁住的时候a标签的样式*/.box ul li.item4 a:active{color: yellowgreen;}

实例

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>body{color: red;}/*没有被访问过的a的颜色*/a:link{color: greenyellow;}/*访问过后的颜色*/a:visited{color: darkgreen;}/*鼠标悬浮时候的状态*/a:hover{color: darkgray;font-size: 20px;text-decoration: none;}a:active{color: darkblue;}.box{color: green;/*设置小手的状态*/cursor: pointer;}.box>p{display: none;}.box:hover p{color: darkorange;font-size: 20px;display: block;}input  {border: 0;outline: none;width: 300px;height: 40px;border: 1px solid #999;border-radius: 2px;}</style>
</head>
<body><!--爱恨准则  LoVe HAte--><input type="text"><a href="#">百度一下</a><div class="box">悬浮<p>李凯</p></div>
</body>
</html>

View Code

css的两大特征 : 继承性和层叠性继承性即继承父类的属性和方法层叠性即权重大的标签覆盖掉权重小的标签 . 就是判断权重谁的权重大谁说了算判断权重即数数

　　数 :id 的数量 class的数量标签的数量顺序不能乱.

　　权重一样就近原则谁离得近就显示谁的属性　　

posted @ 2018-11-17 19:06 你没有想象的那么重要阅读(...) 评论(...) 编辑收藏