前端开发之——CSS
一、css的引入方式
- 行内样式
- 内接样式
- 外接样式(链接式、导入式)
CSS介绍
现在互联网前端的组成：
- HTML：超文本标记语言。从语义的角度描述页面结构，好比人的骨骼。
- CSS：层叠样式表。从审美的角度负责页面样式，好比人的衣服
- JS：JavaScript。从交互的角度描述页面行为，好比人的奔跑、跳跃等运动。
CSS：Cascading Style Sheet，层叠样式表。CSS的作用就是给HTML页面标签添加各种样式，定义网页的显示效果。白话：CSS将网页内容和显示样式进行分离，提高了显示功能。
css最新版本是css3，目前我们学习的版本是css2.1
为什么要学习CSS
HTML的缺陷：
1.不能够适应多种设备
2.要求浏览器必须智能化且足够庞大
3.数据和显示没有分开
4.功能不够强大
CSS 优点
1.使数据和显示分开
2.降低网络流量
3.使整个网站视觉效果一致
4.使开发效率提高了（分布式开发，一人负责写html，一人负责css）
举个栗子：有个样式需要在一百个页面上显示，如果用html来实现，要写一百遍，用css，只需要写一遍。有了css，html只需要提供数据和一些控件，各种各样的样式则完全交由css来提供。
行内样式
我的名字叫段落
内接样式
下面的代码需要写在<title>标签下面
举栗子：
我的名字叫段落
执行输出：
外接样式-链接式
下面的代码需要写在<title>标签下面
举栗：
新建一个文件index.css和1.html
index.css：
/* index.css */
p {
color:blue；
font-size:20px;
}
1.html：
/* 1.html */
我的名字叫段落
执行输出：
外接样式-导入式
下面的代码需要写在<title>标签下面
举栗：
index.css不变，修改html代码
我的名字叫段落
导入式有2种写法，见上面代码！任选其一即可。
在这三种样式中，行内样式优先级最高。
内接样式和外接样式，根据代码从上到下执行顺序。针对同一属性，最下面的会生效。
这叫样式重叠现象。
CSS选择器
css的选择器：1.基本选择器 2.高级选择器
基本选择器包含：标签选择器、id选择器、class选择器、*通配符选择器
1. 标签选择器
标签选择器可以选中所有的标签元素，比如div，ul，li，p等等，不管标签藏得多深，都能选中，选中的是所有的，而不是某一个，所以说"共性"而不是"特性"
2. id选择器
#选中id
同一个页面中id不能重复
任何的标签都可以设置id
id命名规范 必须要以字母a-z或A-Z开头 可以有数字 下划线 大小写严格区分 aa和AA是两个不一样的属性值
id选择器一般不会设置样式，通常与js配合使用
叫我段落
网页效果：
3. 类选择器
3.1 类选择器也就是class选择器 class与id非常相似 任何的标签都可以加 不同的是
类可以重复，属于归类的概念
3.2 同一个标签中可以携带多个类，用空格隔开
网页效果：
类的使用，能够解决前端工程师的css到底有多牛逼？
答案： 一定要有" 公共类"的概念
段落1
段落2
段落3
网页效果:
总结：
- 不要去试图用一个类将我们的页面写完。这个标签要携带多个类，共同设置样式
- 每个类要尽量可能的小，有公共的概念，能够让更多标签使用
玩好了类就相当于玩好了css中的1/2
到底使用id还是class？
答案：尽可能的使用class。除非一些特殊情况可以用id
原因：id一般是用在js的。也就是说js是通过id来获取到标签。
二.高级选择器
高级选择器分为：后代选择器、子代选择器、并集选择器、交集选择器
后代选择器
使用空格表示后代选择器。顾名思义，父元素的后代（包括儿子，孙子，重孙子）
.container p{
color: red;
}
.container .item p{
color: yellow;
}
div里面的p
内容
另一个内容
网页效果：
class里面的p
内容
另一个内容
网页效果：
class里面的class里面的p
内容
内容
另一个内容
网页效果：
子代选择器
使用>表示子代选择器。比如div>p,仅仅表示的是当前div元素选中的子代（不包括孙子...）元素p。
.container>p {
color:green;
}
举栗：
内容
内容
另一个内容
网页效果：
并集选择器
多个选择器之间使用逗号隔开。表示选中的页面的多个标签。一些共性的元素，可以使用并集选择器
/并集选择器/
h3,a{
color: #008000;
text-decoration:none;
}
比如像百度首页一样使用并集选择器。
body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl,dt,dd,ul,ol,li,pre,form,fieldset,legend,button,input,textarea,th,td {
margin:0;
padding:0
}
/使用此并集选择器选中页面所有标签，页面布局的时候会使用/
统一样式
内容
内容
另一个内容
哈哈
网页效果：
交集选择器
使用.表示交集选择器。第一个标签必须是标签选择器，第二个标签必须是类选择器 语法：div.active
比如有一个<h4 class="active"></h4>这样的标签。
那么：
h4{
width: 100px;
font-size: 14px;
}
.active{
color: red;
text-decoration: underline;
}
/* 交集选择器 */
h4.active{
background: #00BFFF;
}
它表示两者选中之后元素共有的特性。
举栗：
我是一个4级标题
网页效果：
三、属性选择器
属性选择器，意思就是根据标签中的属性，选中当前的标签。
语法：
/根据属性查找/
/[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;
}
举栗：
网页效果：
网页效果：
网页效果：
注意：属性选择器仅限于在表单控制中
未完待续。。。。
浙公网安备 33010602011771号