一, 01-css 的引入方式 http://www.cnblogs.com/majj/p/9021419.html
在 HTML 中引入 css 方式总共有三种:
行内样式
内接样式
外接样式
3.1 链接式
3.1 导入式
css 介绍
现在的互联网前端分三层:
HTML: 超文本标记语言. 从语义的角度描述页面结构.
CSS: 层叠样式表. 从审美的角度负责页面样式.
JS:JavaScript . 从交互的角度描述页面行为
CSS:Cascading Style Sheet, 层叠样式表. CSS 的作用就是给 HTML 页面标签添加各种样式, 定义网页的显示效果. 简单一句话: CSS 将网页内容和显示样式进行分离, 提高了显示功能.
css 的最新版本是 css3, 我们目前学习的是 css2.1
接下来我们要讲一下为什么要使用 CSS.
HTML 的缺陷:
不能够适应多种设备
要求浏览器必须智能化足够庞大
数据和显示没有分开
功能不够强大
CSS 优点:
使数据和显示分开
降低网络流量
使整个网站视觉效果一致
使开发效率提高了(耦合性降低, 一个人负责写 html, 一个人负责写 css)
比如说, 有一个样式需要在一百个页面上显示, 如果是 html 来实现, 那要写一百遍, 现在有了 css, 只要写一遍. 现在, html 只提供数据和一些控件, 完全交给 css 提供各种各样的样式.
行内样式
- <div>
- <p style="color: green">我是一个段落</p>
- </div>
内接样式
- <style type="text/css">
- /* 写我们的 css 代码 */
- span{
- color: yellow;
- }
- </style>
外接样式 - 链接式
<link rel="stylesheet" href="./index.css">
外接样式 - 导入式
<style type="text/css">
@import url('./index.css');
</style>
二, CSS 选择器:
css 的选择器: 1. 基本选择器 2. 高级选择器
基本选择器包含:
1. 标签选择器
标签选择器可以选中所有的标签元素, 比如 div,ul,li ,p 等等, 不管标签藏的多深, 都能选中, 选中的是所有的, 而不是某一个, 所以说 "共性" 而不是 "特性"
- body{
- color:gray;
- font-size: 12px;
- }
- /* 标签选择器 */
- p{
- color: red;
- font-size: 20px;
- }
- span{
- color: yellow;
- }
2.id 选择器
# 选中 id
同一个页面中 id 不能重复.
任何的标签都可以设置 id
id 命名规范 要以字母 可以有数字 下划线 - 大小写严格区分 aa 和 AA 是两个不一样的属性值
- #box{
- background:green;
- }
- #s1{
- color: red;
- }
- #s2{
- font-size: 30px;
- }
3. 类选择器
3.1 所谓类 就是 class . class 与 id 非常相似 任何的标签都可以加类但是类是可以重复, 属于归类的概念.
3.2 同一个标签中可以携带多个类, 用空格隔开
类的使用, 能够决定前端工程师的 css 水平到底有多牛逼?
答案: 一定要有 "公共类" 的概念
- .lv{
- color: green;
- }
- .big{
- font-size: 40px;
- }
- .line{
- text-decoration: underline;
- }
- <!-- 公共类 共有的属性 -->
- <div>
- <p class="lv big">段落 1</p>
- <p class="lv line">段落 2</p>
- <p class="line big">段落 3</p>
- </div>
总结:
不要去试图用一个类将我们的页面写完. 这个标签要携带多个类, 共同设置样式
每个类要尽可能的小, 有公共的概念, 能够让更多的标签使用
玩好了类 就等于玩好了 css 中的 1/2
到底使用 id 还是用 class?
答案: 尽可能的用 class. 除非一些特殊情况可以用 id
原因: id 一般是用在 js 的. 也就是说 js 是通过 id 来获取到标签
三, 高级选择器
高级选择器分为: 后代选择器, 子代选择器, 并集选择器, 交集选择器
后代选择器
使用空格表示后代选择器. 顾名思义, 父元素的后代(包括儿子, 孙子, 重孙子)
- .container p{
- color: red;
- }
- .container .item p{
- color: yellow;
- }
子代选择器
使用>表示子代选择器. 比如 div>p, 仅仅表示的是当前 div 元素选中的子代 (不包含孙子....) 元素 p.
- .container>p{
- color: yellowgreen;
- }
并集选择器
多个选择器之间使用逗号隔开. 表示选中的页面中的多个标签. 一些共性的元素, 可以使用并集选择器
- /* 并集选择器 */
- 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;
- }
它表示两者选中之后元素共有的特性.
四, 属性选择器:
属性选择器, 字面意思就是根据标签中的属性, 选中当前的标签.
语法:
- /* 根据属性查找 */
- /*[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;
- }
五, 伪类选择器:
伪类选择器一般会用在超链接 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;
- }
再给大家介绍一种 css3 的选择器 nth-child()
- /* 选中第一个元素 */
- div ul li:first-child{
- font-size: 20px;
- color: red;
- }
- /* 选中最后一个元素 */
- div ul li:last-child{
- font-size: 20px;
- color: yellow;
- }
- /* 选中当前指定的元素 数值从 1 开始 */
- div ul li:nth-child(3){
- font-size: 30px;
- color: purple;
- }
- /*n 表示选中所有, 这里面必须是 n, 从 0 开始的 0 的时候表示没有选中 */
- div ul li:nth-child(n){
- font-size: 40px;
- color: red;
- }
- /* 偶数 */
- div ul li:nth-child(2n){
- font-size: 50px;
- color: gold;
- }
- /* 奇数 */
- div ul li:nth-child(2n-1){
- font-size: 50px;
- color: yellow;
- }
- /* 隔几换色 隔行换色
- 隔 4 换色 就是 5n+1, 隔 3 换色就是 4n+1
- */
- div ul li:nth-child(5n+1){
- font-size: 50px;
- color: red;
- }
六, 伪元素选择器:
废话不多说, 直接上代码!!!
- /* 设置第一个首字母的样式 */
- p:first-letter{
- color: red;
- font-size: 30px;
- }
- /* 在.... 之前 添加内容 这个属性使用不是很频繁 了解 使用此伪元素选择器一定要结合 content 属性 */
- p:before{
- content:'alex';
- }
- /* 在.... 之后 添加内容, 使用非常频繁 通常与咱们后面要讲到布局 有很大的关联(清除浮动)*/
- p:after{
- content:'&';
- color: red;
- font-size: 40px;
- }
七, CSS 继承性和层叠性
css 有两大特性: 继承性和层叠性
继承性
面向对象语言都会存在继承的概念, 在面向对象语言中, 继承的特点: 继承了父类的属性和方法. 那么我们现在主要研究 css,css 就是在设置属性的. 不会牵扯到方法的层面.
继承: 给父级设置一些属性, 子级继承了父级的该属性, 这就是我们的 css 中的继承.
记住: 有一些属性是可以继承下来 : color , font-*, text-*,line-* . 主要是文本级的标签元素.
但是像一些盒子元素属性, 定位的元素 (浮动, 绝对定位, 固定定位) 不能继承.
层叠性
层叠性: 权重的标签覆盖掉了权重小的标签, 说白了 , 就是被干掉了
权重: 谁的权重大, 浏览器就会显示谁的属性
谁的权重大? 非常简单就是小学的数数.
数: id 的数量 class 的数量 标签的数量, 顺序不能乱
/*1 0 0 */ 显示红色
- #box{
- color: red;
- }
- /*0 1 0*/
- .container{
- color: yellow;
- }
- /*0 0 1*/
- p{
- color: purple;
- }
是不是感觉明白了呢? 好的, 再给大家加深点难度.
- <div id='box1' class="wrap1">
- <div id="box2" class="wrap2">
- <div id="box3" class="wrap3">
- <p > 再来猜猜我是什么颜色?</p>
- </div>
- </div>
- </div>
- #box1 #box2 p{
- color: yellow;
- }
- #box2 .wrap3 p{
- color: red;
- }
- div div #box3 p{
- color: purple;
- }
- div.wrap1 div.wrap2 div.wrap3 p{
- color: blue;
- }
好的. 那么上面的这个案例大家是否懂了呢? 那么接下来我们继续看案例
还是上面那个 html 结构, 如果我设置以下 css, 会显示什么颜色呢.
- #box2 .wrap3 p{
- color: yellow;
- }
- #box1 .wrap2 p{
- color: red;
- }
答案是红色的. 结论: 当权重一样的时候 是以后来设置的属性为准, 前提必须权重一样 .'后来者居上'.
Good, 我们继续看下面的 css, 你来猜以下此时字什么颜色?
- #box1 #box2 .wrap3{
- color: red;
- }
- #box2 .wrap3 p{
- color: green;
- }
答案是绿色. 哈哈, 是不是感觉快懵掉了. 其实大家只要记住这点特性就可以. 第一条 css 设置的属性值, 是通过继承性设置成的红色, 那么继承来的属性, 它的权重为 0. 它没有资格跟我们下面选中的标签对比.
那大家猜想一下如果都是被继承来的属性, 那么字会显示什么颜色呢?
- #box1 #box2 .wrap3{
- color: red;
- }
- .wrap1 #box2{
- color: green;
- }
小案例证明: 权重都是 0: 那么就是 "就近原则" : 谁描述的近, 就显示谁的属性. 所谓描述的近, 就是选中到最内层的距离越近.
小总结一下:
总结:
1. 先看标签元素有没有被选中, 如果选中了, 就数数 (id,class, 标签的数量) 谁的权重大 就显示谁的属性. 权重一样大, 后来者居上
2. 如果没有被选中标签元素, 权重为 0.
如果属性都是被继承下来的 权重都是 0 . 权重都是 0:"就近原则" : 谁描述的近, 就显示谁的属性
八, 层叠性权重相同处理:
第一种现象: 当权重相同时, 以后来设置的属性为准, 前提一定要权重相同
- #box2 .wrap3 p{
- color: yellow;
- }
- #box1 .wrap2 p{
- color: red;
- }
我们会发现此时显示的是红色的.
第二种现象: 第一个选择器没有选中内层标签, 那么它是通过继承来设置的属性, 那么它的权重为 0. 第二个选择器选中了内层标签, 有权重.
所以 继承来的元素 权重为 0. 跟选中的元素没有可比性.
- #box1 #box2 .wrap3{
- color: red;
- }
- #box2 .wrap3 p{
- color: green;
- }
我们会发现此时显示的是绿色的.
第三种现象: 如果都是继承来的属性, 谁描述的近, 显示谁的属性.'就近原则'
- #box1 #box2 .wrap3{
- color: red;
- }
- .wrap1 #box2{
- color: green;
- }
!important 的使用.
!important: 设置权重为无限大
!important 不影响继承来的权重, 只影响选中的元素. 不要随便使用! important, 因为使用它会影响页面的布局
九, 盒子模型
盒模型
在 CSS 中,"box model" 这一术语是用来设计和布局时使用, 然后在网页中基本上都会显示一些方方正正的盒子. 我们称为这种盒子叫盒模型.
盒模型有两种: 标准模型和 IE 模型. 我们在这里重点讲标准模型.
盒模型示意图
盒模型的属性
width: 内容的宽度
height: 内容的高度
padding: 内边距, 边框到内容的距离
border: 边框, 就是指的盒子的宽度
margin: 外边距, 盒子边框到附近最近盒子的距离
如果让你做一个宽高 402*402 的盒子, 您如何来设计呢?
答案有上万种, 甚至上一种.
盒模型的计算
如果一个盒子设置了 padding,border,width,height,margin(咱们先不要设置 margin,margin 有坑, 后面课程会讲解)
盒子的真实宽度 = width+2*padding+2*border
盒子的真实宽度 = height+2*padding+2*border
那么在这里要注意看了. 标准盒模型, width 不等于盒子真实的宽度.
另外如果要保持盒子真实的宽度, 那么加 padding 就一定要减 width, 减 padding 就一定要加 width. 真实高度一样设置.
十, padding, 内边距
padding
padding: 就是内边距的意思, 它是边框到内容之间的距离
另外 padding 的区域是有背景颜色的. 并且背景颜色和内容的颜色一样. 也就是说 background-color 这个属性将填充所有的 border 以内的区域
padding 的设置
padding 有四个方向, 分别描述 4 个方向的 padding.
描述的方法有两种
1, 写小属性, 分别设置不同方向的 padding
- padding-top: 30px;
- padding-right: 30px;
- padding-bottom: 30px;
- padding-left: 30px;
2, 写综合属性, 用空格隔开
- /* 上 右 下 左 */
- padding: 20px 30px 40px 50px ;
- /* 上 左右 下 */
- padding: 20px 30px 40px;
- /* 上下 左右 */
- padding: 20px 30px;
- /* 上下左右 */
- padding: 20px;
一些标签默认有 padding
比如 ul 标签, 有默认的 padding-left 值.
那么我们一般在做站的时候, 是要清除页面标签中默认的 padding 和 margin. 以便于我们更好的去调整元素的位置.
我们现在初学可以使用通配符选择器
- *{
- padding:0;
- margin:0;
- }
But, 这种方法效率不高.
所以我们要使用并集选择器来选中页面中应有的标签(不同背, 因为有人已经给咱们写好了这些清除默认的样式表, reset.css)
https://meyerweb.com/eric/tools/css/reset/
十一, border 边框
边框
border: 边框的意思, 描述盒子的边框
边框有三个要素: 粗细 线性样式 颜色
border: solid
如果颜色不写, 默认是黑色. 如果粗细不写, 不显示边框. 如果只写线性样式, 默认的有上下左右 3px 的宽度, 实体样式, 并且黑色的边框.
按照 3 要素来写 border
- border-width: 3px;
- border-style: solid;
- border-color: red;
- /*
- border-width: 5px 10px;
- border-style: solid dotted double dashed;
- border-color: red green yellow;
- */
按照方向划分
- border-top-width: 10px;
- border-top-color: red;
- border-top-style: solid;
- border-right-width: 10px;
- border-right-color: red;
- border-right-style: solid;
- border-bottom-width: 10px;
- border-bottom-color: red;
- border-bottom-style: solid;
- border-left-width: 10px;
- border-left-color: red;
- border-left-style:solid;
上面 12 条语句, 相当于 bordr: 10px solid red;
另外还可以这样:
- border-top: 10px solid red;
- border-right: 10px solid red;
- border-bottom: 10px solid red;
- border-left: 10pxb solid red;
- border:none;
- border:0;
表示 border 没有设置样式.
使用 border 来制作小三角
- /* 小三角 箭头指向下方 */
- div{
- width: 0;
- height: 0;
- border-bottom: 20px solid red;
- border-left: 20px solid transparent;
- border-right: 20px solid transparent;
- }
十二, 简单认识 margin:
margin
margin: 外边距的意思. 表示边框到最近盒子的距离.
- /* 表示四个方向的外边距离为 20px*/
- margin: 20px;
- /* 表示盒子向下移动了 30px*/
- margin-top: 30px;
- /* 表示盒子向右移动了 50px*/
- margin-left: 50px;
- margin-bottom: 100px;
CSS 编辑知识 ( 1---12 )
来源: http://www.bubuko.com/infodetail-2613960.html