CSS day_01(6.10) CSS概述

CSS是一门新的语言

知识点非常零散

勤做注释 知识点多但是看注释就想起来了

CSS的单词很多，没有逻辑上的难度，只有互相排列组合搭配

一、 CSS概述

CSS:Cascading Style Sheet 级联样式表 1995诞生，2010年左右陆续推出CSS3 样式：元素的颜色 背景 位置 大小 边框 阴影... HTML--人的本体 CSS--人的穿着打扮 简单说，CSS就是一种用来修饰HTML标签的语言 同样的HTML,不同的CSS会导致页面的效果千差万别 操作：打开www.tmooc.cn删除head中所有的link，观察效果

二、CSS在页面中的位置

1. inner style 行内/内联样式

<开始标签 style="color:red;backgroud:yellow;"></结束标签> style=""给当前元素设置样式 color 属性名 red属性值 注意：属性名与属性值使用冒号连接，并且一对属性写完后要加分号

2.inner style内部样式

在html中的head标签中加入style标签，在style标签内部写CSS样式 <style>        选择器 {                color: red;        } </style>

3.outer style 外部样式

把样式独立声明在一个CSS文件中 需要这个样式的HTML文件加link标签，将其引入 <link rel="stylesheet" href="xx.css">

4. 小结

CSS基础语法： 属性名：属性值； CSS编写的三种位置： 1.行内样式inline style：写在HTML标签中(给标签加style="") 2.内部样式inner style：写在head标签中的style标签中 3.外部样式outer style：写在独立的CSS文件中，HTML通过<link>引入 注意：style和link标签必须写在html的head标签中，防止页面重绘 作用范围： 行内样式 < 内部样式 < 外部样式 行内元素只能作用于当前元素，不能被其它元素共享 内部样式可以供当前页面多个元素共享，不能给其它页面的元素共享 外部样式可以被多个HTML页面引入共享 样式的优先级： !important>行内样式>(内部样式=外部样式)>浏览器默认样式User Agent StyleSheet 内部样式与外部样式的优先级是一样的，谁后写，谁生效(后写的会把先写的覆盖掉) 还可以给样式提升优先级：!important强制当前的优先级为最高 color: green !important; 但注意：尽量不要使用，都是VIP就没有VIP了 使用场景： 行内样式：会和HTML代码混杂在一起，不好修改，后期复用性很差，一般测试时使用，项目中很少用 内部样式：很多首页(比如百度)都在head中写了很多的内部样式，减少请求次数，加载速度快 外部样式：作用范围很大，但会增加页面的请求次数，从而拖累页面性能，常在二三级页面中使用(分享样式)

三、CSS选择器(Selector)

CSS选择器可以用在内部/外部样式，告诉浏览器这些样式要渲染在哪些元素上

选择器 {      CSS样式 }

先来讲几种简单的选择器：

1. 通用选择器

* 表示所有，表示当前页面中所有的元素都被选中应用此样式 /* 通用选择器：选中页面中的所有元素 */ * {     /* 选中页面中所有的元素，将字体颜色改为红色 */     color: red; } 因为它要选中所有的元素，所以优先级非常低

2. 标签选择器

选中某类特定的HTML元素，选择器的名字就是标签的名字，注意标签不加尖括号 /* 标签选择器：选中指定的标签 */ div {     /* 选中页面中所有的div元素，将背景颜色修改为黄色 */     background-color: yellow; } 优点：非常快捷的选中一类标签 缺点：选择太广泛，不利于项目中使用 优先级权重值为1

3.ID选择器

选中某一个指定的元素#ID值{}，ID值不允许重复 /* id选择器：选中指定id值的元素 */ #d2 { 注意#与d2之间不能有空格！     /* 将id值为d2的元素 背景颜色修改为蓝色 */     background-color: blue; } 要先给HTML元素设置ID值，再被CSS选中 优点：能够非常直观的找到指定的那个元素，权重值较高，100

4. 类选择器

选中一类指定的元素.class值{ }，这个类名是自定义的 一个HTML元素的class值可以写多个 多个值之间使用空格分开 注意：点与类名之间不能有空格！ <span class="text-msg text-danger">用户名不能为空</span> .text-msg {color: white;} 要先给HTML元素设置class值，再被CSS选中 优点：复用性很高，在项目中经常使用，权重值10

5. 群组选择器

一次使用多种选择器选中多个元素，多种选择器间使用逗号分开，可以有空格 /* 把标签选择器h4,class选择器.r,id选择器#r都选中，设置同一个效果 */ h4, .r, #r {     color: red; } 注意：群组选择器不限定选择器必须是同一个类型的，比如上面就同时使用了3种类型的选择器

6. 伪类选择器

"假的类"--伪类选择器的名字不可以自定义，是固定的，用于选中某个时刻/某种状态

我们先学5个：

:hover{} 选中“鼠标悬停在元素上方”时的状态 /* 增加伪类，设置div鼠标悬停时的样式 */ .box:hover {     background-color: red; }

:active { } 选中“元素被激活时的状态”(鼠标选中元素不松开) /* 增加伪类，设置div激活时的样式 */ .box:active {     background-color: blue; }

:link {} 选中"超链接未被访问过的状态" :visited{} 选中"超链接被访问过后的状态" 注意：a标签伪类的优先级：:link > :visited > :hover >:active 如果希望超链接有以上4种方式的改变，必须使用上面的这个顺序来写 默认：超链接未访问时是蓝色，激活时红色，访问过后是紫色，悬停状态没有设置效果

:focus{ } 选中"获得了输入焦点的输入框" /* 设置输入框获得焦点：输入框背景颜色改为黄色 */ input:focus {     background-color: yellow; }

7. 属性选择器

[HTML标签的属性名] { }   选中包含指定属性名的元素 [HTML标签的属性名="值"] { } 选中包含指定属性名与属性值的元素 /* 选中包含属性名readonly的输入框 */ input[readonly] {     border: 3px solid red; } /* 前面加个input选中更为准确，是并列选择器 但是由于我们只有一个readonly属性，所以此处的input可以省略*/ [readonly] {     background-color: yellow } /* 选中包含name属性且属性值为uname的元素 */ [name="uname"] {        background-color: green; }

上面写一个的选择器都是简单选择器，下面我们来介绍一些复杂选择器：

8.并列选择器

选中可以同时被多个选择器选中的元素 选择器1选择器2 {   }  注意：选择器间不能有空格！ /* 选中class为.danger的span元素 */             span.danger {                 color: red;             }             /* 选中同时具有btn与succ class值的元素 */             .btn.succ {                 color: green;             }

9.后代(包含)选择器

选中某个元素的儿子 孙子 重孙子.... 元素 祖先选择器 后代选择器 { } div span { } 选中div下的所有span后代 注意：空格千万别忘记写！！！

10.直接子代选择器

选中当前元素下面的直接儿子元素 div>span { } 选中div下的儿子span

/* 选中div里所有的span 2 3 4 */ div span {     background-color: pink; } /* 选中div的直接儿子span 2 4 */ div>span {     border: 2px solid green; } /* 选中div下p中的span3 */ div>p>span {     color: red; }

11.兄弟选择器

选中元素后面的兄弟元素--不要前面的兄弟，也不选子代 p ~ span { }  选中p后面的span兄弟元素

12.相邻兄弟选择器

选中元素后面紧挨着的相邻兄弟元素--不要前面的，也不要有间隔的，也就是说最多选中一个 p + span { }  选中p元素后面紧挨着的那一个span元素

【拓展】CSS 禅意花园: CSS 设计之美