前端基础之---css
css 介绍
css 规则有两个主要的部分构成 : 选择器 , 以及一条或多条声明.css
如今的互联网前端分为三层 : html
● HTML :超文本标签机语言,从语义的角度描述页面结构.前端
● CSS : 层叠样式表 , 从审美的角度负责页面样式.linux
● JS : JavaScript . 从交互的角度描述页面行为.css3
CSS : Cascading Style Sheet , 层叠样式表.CSS的做用就是给HTML页面标签添加各类样式,定义网页的显示效果 , 简单的说 : CSS将页面内容和显示样式进行分离 ,提升了显示功能.web
使用CSS的缘由 浏览器
HTML的缺陷 : 网络
● 不可以适应多种设备ide
● 要求浏览器必须智能化足够庞大布局
● 数据和显示没有分开
● 功能不够强大
CSS的优势 :
● 是数据和显示分开
● 下降网络流量
● 使整个网站视觉效果一致
● 使开发效率提升了(耦合性下降,一我的负责写html,一我的负责写css)
好比说 : 有一个样式须要在一百个页面上显示,若是是html来实现,须要些一百遍.可是要是css则只要一遍.因此如今html值提供数据和一些控件,css提供各类各样的样式.
CSS的四种引入方式
(1). 行内式
行内式是在标记的style属性中设定css样式,这种方式没有体现出css的优点,不推荐使用.
<div> <p style="color : green">宝强</p> </div>
(2) . 内接模式(嵌入式)
嵌入式是将css样式集中写在网页的 <head></head> 标签对的 <style></style> 标签对中.
<head> <meta charset="UTF-8"> <title>Title</title> <style> p{ background-color: #2b99ff; #背景色 } </style> </head>
(3) . 连接式
将一个 .css 文件引入到 HTML 文件中
<link rel="stylesheet" href="./index.css">
(4) . 外接样式---导入式
将一个独立的 .css 文件引入HTML文件中,导入式使用css规则引入外部css文件,<style>标记也是写在<head>标记中.
<style type="text/css"> @import"mystyle.css";此处要注意.css文件的路径 </style>
注意 :
导入式会在整个网页装载完后再装载CSS文件，所以这就致使了一个问题，若是网页比较大则会儿出现先显示无样式的页面，闪烁一下以后，再出现网页的样式。这是导入式固有的一个缺陷。使用连接式时与导入式不一样的是它会以网页文件主体装载前装载CSS文件，所以显示出来的网页从一开始就是带样式的效果的，它不会象导入式那样先显示无样式的网页，而后再显示有样式的网页，这是连接式的优势。
CSS 选择器
1) . 基本选择器
(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是不同的属性值
1 #box{
2 background:green;
3 }
4
5 #s1{
6 color: red;
7 }
8
9 #s2{
10 font-size: 30px;
11 }
(3) . 类选择器
所谓类 : 就是 class. class 和 id 很是相识,任何的标签均可以加类,可是类是能够重复的,属于类的概念.同一个标签中能够携带多个类,用空格隔开.
.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>
(4) . 通配符选择器
通配符选择器的做用就是重置样式
*{
padding:0;
margin: 0;
}
ul{
list-style:none;
}
a{
text-decoration:none;
}
总结 :
不要试图用一个类将咱们的页面写完,这个标签要携带多个类,共同设置样式
每一个类要尽量的小,有公共的概念,可以让更多的标签使用
究竟是使用id仍是class
答案 : 尽量的使用class,一些特殊状况用 id
缘由 : id通常用于JS ,JS是经过id来获取到标签的
2) . 高级选择器
(1) . 后代选择器
使用空格表示后代选择器.顾名思义,父元素的后代(包括儿子,孙子,重孙子)
(2) . 子代选择器
使用 > 标签子代选择器.好比 div > p ,仅仅表示的是当前 div 元素中的子代(不包括孙子...)元素p.
(3) . 组合选择器
多个选择器之间使用逗号 "," 隔开.表示选中的页面中的多个标签,一些共性的元素,可使用组合选择器.
好比像百度首页使用的组合选择器.
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
}
/*使用此并集选择器选中页面中全部的标签，页面布局的时候会使用*/
(4) . 交集选择器
使用 . 点表示交集选择器.第一个标签必须是标签选择器,第二个标签必须是类选择器. 语法 : div.active ,好比有个<h4 class="active"><h4>
表示二者选中以后元素共有的特性.
3) . 属性选择器
属性选择器,就是根据标签中的属性,选中当前的标签.
1./*根据属性查找*/
/*[for]{
color: red;
}*/
2. /*找到for属性的等于username的元素 字体颜色设为红色*/
/*[for='username']{
color: yellow;
}*/
3. /*以....开头 ^*/
/*[for^='user']{
color: #008000;
}*/
4. /*以....结尾 $*/
/*[for$='vvip']{
color: red;
}*/
5. /*包含某元素的标签*/
/*[for*="vip"]{
color: #00BFFF;
}*/
/**/
6. /*指定单词的属性*/
label[for~='user1']{
color: red;
}
************
input[type='text']{
background: red;
}
4) . 伪类选择器
伪类选择器通常会用在超连接a标签中,使用a标签的伪类选择器,咱们必定要遵循"爱恨准则",LoVe HAte.
1 /*没有被访问的a标签的样式*/
2 .box ul li.item1 a:link{
3
4 color: #666;
5 }
6 /*访问事后的a标签的样式*/
7 .box ul li.item2 a:visited{
8
9 color: yellow;
10 }
11 /*鼠标悬停时a标签的样式*/
12 .box ul li.item3 a:hover{
13
14 color: green;
15 }
16 /*鼠标摁住的时候a标签的样式*/
17 .box ul li.item4 a:active{
18
19 color: yellowgreen;
20 }
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> /*a:hover{ color: #ff6700 }*/ /*爱恨准则 LoVe HAte*/ /*没有被访问的a标签的颜色*/ a:link{ color: green; } /*访问事后的a标签的颜色*/ a:visited{ color: yellow; } /*鼠标悬停的时候a标签的颜色*/ a:hover{ color: red; } /*鼠标按住是a标签的颜色*/ a:active{ color: blue; } /*鼠标中止span时的变化*/ span:hover{ color: red; font-size: 24px; text-decoration: underline; } /*隐藏标签*/ .child{ display: none; } /*鼠标中止父类时,隐藏的标签出现*/ .father:hover .child{ color: red; display: block; } </style> </head> <body> <a href="#">百度一下</a> <span>aeale</span> <div class="father"> tom <p class="child">feike</p> </div> </body> </html>
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;
}
5) . 伪元素选择器
/*设置第一个首字母的样式*/ p:first-letter{ color: red; font-size: 30px; } /* 在....以前 添加内容 这个属性使用不是很频繁 了解 使用此伪元素选择器必定要结合content属性*/ p:before{ content:'alex'; } /*在....以后 添加内容，使用很是频繁 一般与我们后面要讲到布局 有很大的关联（清除浮动）*/ p:after{ content:'&'; color: red; font-size: 40px; }
6) . css的继承性和层叠性
(1) . 继承性
面向对象语言都会存在继承的概念，在面向对象语言中，继承的特色：继承了父类的属性和方法。那么咱们如今主要研究css，css就是在设置属性的。不会牵扯到方法的层面。
继承：给父级设置一些属性，子级继承了父级的该属性，这就是咱们的css中的继承。
记住：有一些属性是能够继承下来 ： color 、 font-*、 text-*、line-* 。主要是文本级的标签元素。
可是像一些盒子元素属性，定位的元素（浮动，绝对定位，固定定位）不能继承。
(2) . 层叠性
层叠性： 权重的标签覆盖掉了权重小的标签，说白了 ，就是被干掉了
权重： 谁的权重大，浏览器就会显示谁的属性
谁的权重大？ 很是简单就是小学的数数。
数：id的数量 class的数量 标签的数量，顺序不能乱
总结 :
● 行内 > id > class > 标签
● 继承来的属性,权重为0,与选中的标签没有可比性
● 选中的标签,权重同样大,后来者居上
● 若是都是继承来的属性,保证就近原则(离标签进的优先)
● 都是继承来的标签,选中的标签同样进,再去数权重
盒模型
盒模型的属性
width：内容的宽度
height: 内容的高度
padding：内边距，边框到内容的距离
border: 边框，就是指的盒子的宽度
margin：外边距，盒子边框到附近最近盒子的距离
盒模型的计算
若是一个盒子设置了padding，border，width，height，margin
盒子的真实宽度=width+2*padding+2*border
盒子的真实宽度=height+2*padding+2*border
那么在这里要注意看了。标准盒模型，width不等于盒子真实的宽度。
另外若是要保持盒子真实的宽度，那么加padding就必定要减width，减padding就必定要加width。真实高度同样设置。
padding(内边距)
padding：就是内边距的意思，它是边框到内容之间的距离
另外padding的区域是有背景颜色的。而且背景颜色和内容的颜色同样。也就是说background-color这个属性将填充全部的border之内的区域
1.写小属性,分别设置不一样方向的padding
padding-top: 30px; 距离上方30px
padding-right: 30px; 距离右边30px
padding-bottom: 30px; 距离下面30px
padding-left: 30px; 距离左边30px
2.写综合属性,用空格隔开
/*上 右 下 左*/ (顺时针) padding: 20px 30px 40px 50px ; /*上 左右 下*/ padding: 20px 30px 40px; /* 上下 左右*/ padding: 20px 30px; /*上下左右*/ (集体移动) padding: 20px;
border(边框)
border : 边框的意识,描述盒子的边框.
边框的三要素 : 粗细 , 线性样式 , 颜色.
1.基本写法
/*实线*/ border: 5px solid green; /*圆点线*/ border: 1px dotted yellow; /*双实线*/ border: 5px double purple; /*虚线*/ border: 1px dashed purple;
若是颜色不写，默认是黑色。若是粗细不写，不显示边框。若是只写线性样式，默认的有上下左右 3px的宽度,实体样式，而且黑色的边框。
2.按照方向划分 :
/*实线*/ border-left: 5px solid green; /*圆点线*/ border-right: 1px dotted yellow; /*双实线*/ border-top: 5px double purple; /*虚线*/ border-bottom: 1px dashed purple;
效果 :
border:none；
border：0；
表示border没有设置样式。
3.使用border来制做三角形和圆形
###########箭头向上 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> div{ /*color: transparent;*/ width: 0px; height: 0px; border-bottom: 20px solid red; border-left: 20px solid transparent; border-right: 20px solid transparent; } </style> </head> <body> <div> </div> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> div{ /*color: transparent;*/ width: 200px; height: 200px; background-color: red; /*制做圆角*/ /*border-radius: 3px;*/ /*border-radius: 100px;*/ border-radius: 50%; } </style> </head> <body> <div> </div> </body> </html>
margin(外边距)
外边距表示边框到盒子的最近距离.
/*表示四个方向的外边距离为20px*/ margin: 20px; /*表示盒子向下移动了30px*/ margin-top: 30px; /*表示盒子向右移动了50px*/ margin-left: 50px; /*表示盒子向下移动了100px*/ margin-bottom: 100px;
注意 : 计算有个前提---在标准文档流离
padding : 父子之间调整距离
margin : 兄弟之间调整距离
标准文档流
咱们说margin要在标准文档流下才能够,那么什么是标准文档流呢 ?
1.空白折叠现象 : 多个空格被合并成一个空格显示在浏览器页面中.好比用 img 换行写会出现图片之间出现间隙.
2.高矮不齐,底边对其 : 文字还有图片大小不一,都会让咱们的页面有一种高爱不气的现象,可是底边对齐.
3.自行换行,一行写不满换行写.: 仅限中文
标准流里面的限制很是多，致使不少页面效果没法实现。若是咱们如今就要并排、而且就要设置宽高，那该怎么办呢？办法是：移民！脱离标准流！
css中一共有三种手段，使一个元素脱离标准文档流：
- （1）浮动
- （2）绝对定位
- （3）固定定位
display
display : 块级元素与行内元素的转换 :
display: block :将标签当即变成块级元素.
独占一行 / 能够设置宽高, 若是不设置,则默认父盒子宽高的100%
display: inline :将标签变成行内元素
在一行内显示 / 不能够设置宽高 ,根据内容显示宽高.
display: inline-block :行内块
在一行内显示 / 能够设置宽高 .
display: none :不显示,隐藏 ,不在文档上占位置.
visibility: hidden :隐藏 ,在文档上占位置.
浮动
浮动
浮动是css里面布局最多的一个属性，也是很重要的一个属性。
float：表示浮动的意思。它有四个值。
-
- none: 表示不浮动，默认
- left: 表示左浮动
- right：表示右浮动
注意 : 当盒子向右/左浮动时,若是右/左右浮动的盒子,那么会贴近以浮动的盒子,没有就去贴边.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> /*<!--将屏幕没有缝隙-->*/ *{ padding:0; margin: 0; } /*这个div是将高为40px的一条所有沾满*/ .top-Bar{ width:100%; height: 40px; background-color: #333; } /*须要的长度1226,高40,居中--绿色到黄色右边的举例*/ .container{ width: 1226px; height: 40px; /*background-color: red;*/ margin-right: auto; margin-left: auto; } .top-Bar .top-l{ width: 550px; height: 40px; background-color: green; /*浮动,要否则div是换行的*/ float: left; } .top-Bar .top-shop{ width: 100px; height: 40px; background-color: yellow; float: right; } .top-Bar .top-info{ width: 200px; height: 40px; background-color: purple; float: right; /*距离右边距20px*/ margin-right: 20px; } </style> </head> <body> <div class="top-Bar"> <div class="container"> <div class="top-l"> </div> <div class="top-shop"></div> <div class="top-info"></div> </div> </div> </body> </html>
浮动的四大特性 :
1.浮动的元素脱标(脱离标准文档流)
2.浮动的元素互相贴靠
3.浮动的元素有"子围"的效果
4.收缩效果 : 一个浮动元素,若是没有设置 width ,那么自动收缩为文字的宽度.
在标准文档流下 : margin的垂直方向会出现塌陷问题.
盒子居中 : margin: 0 auto; 若是盒子浮动了 ,margin: 0 auto; 就没有用了 .
文本水平居中 : text-align:center;
文本垂直居中: 行高=盒子的高度. (盒子若是浮动了,那么垂直方向上不会出现塌陷问题)
在css中有三种方法让盒子"脱表"
浮动float / 绝对定位 / 固定定位
注意 : 要浮动一块儿浮动,有浮动,要清除浮动***************************
浮动的好处与缺点 :
---好处 : 使元素实现并排 / 就在页面上占位置
---缺点 : 子盒子浮动,不在页面占位置,若是父盒子不设置高度,那么撑不起父盒子的高度,页面会出现絮乱.
清除浮动
清除浮动的方法 :
1 . 给父盒子设置高度.(后期很差维护)
2 . clear:both
3 . 伪元素清除法
4 . overflow: hidden
clear:both
clear: 清除的意思
有三个值 :
left : 清除当前元素左边的浮动元素
right : 清除当前元素右边的浮动元素
both : 清除当前元素两边的浮动元素.
给浮动元素的后面加一个空的 div ,而且该元素不浮动 ,而后设置 clear (在该元素上面表示清除左边.)
示例 :
<div> <ul> <li>Python</li> <li>web</li> <li>linux</li> <!-- 给浮动元素最后面加一个空的div 而且该元素不浮动 ，而后设置clear:both 清除别人对个人浮动影响--> <!-- 内墙法 --> <!-- 平白无故加了div元素 结构冗余 --> <div class="clear"></div> </ul> </div> <div class="box"> </div>
*{ padding: 0; margin: 0; } ul{ list-style: none; } div{ width: 400px; } div ul li { float: left; width: 100px; height: 40px; background-color: red; } .box{ width: 200px; height: 100px; background-color: yellow; } .clear{ clear: both; }
伪元素清除方法
给浮动元素的父盒子,也就是不浮动元素 ,添加一个 clearfix 的类,而后设置 :
.clearfix:after{ /*必需要写这三句话*/ content: '.'; clear: both; display: block; }
新浪首页推荐的伪元素清除法的写法 :
/*新浪首页清除浮动伪元素方法*/ content: "."; display: block; height: 0; clear: both; visibility: hidden
overflow: hidden 清除法
overflow 属性规定当内容溢出元素框时发生的事情.
说明 :
这个属性定义溢出元素内容区的内容如何处理.若是值为 scroll ,不管是否须要,用户代理都会提供一种滚动机制.所以,有可能即便元素框中能够放下全部的内容也会出现滚动条.
有五个值 :
其实这是一个 BFC 区域: http://www.javashuo.com/article/p-ezyacvwn-v.html
记住 : BFC 内的元素之间互不影响.
css经常使用属性.
// 中心对齐 text-align: center; // 两端对齐 text-align: justify; /*首行缩进*/ text-indent: 2em; // 字体大小 font-size: 14px; // 修饰文本 text-decoration none;//没有线 underline;//有下划线 line-height: //单行文本垂直居中： line-height = height