码迷,mamicode.com
首页 > Web开发 > 详细

css基础回顾

时间:2018-06-16 17:06:23      阅读:201      评论:0      收藏:0      [点我收藏+]

标签:因此   块级元素   表单   over   表示   的区别   100%   mooc   文档   

一. css基础:

CSS全称为“层叠样式表 (Cascading Style Sheets)”,它主要是用于定义HTML内容在浏览器内的显示样式,如文字大小、颜色、字体加粗等。

 1 <head>
 2 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 3 <title>认识CSS样式</title>
 4 <style type="text/css">
 5 p{
 6    font-size:20px;/*设置文字字号*/
 7    color:red;/*设置文字颜色*/
 8    font-weight:bold;/*设置字体加粗*/
 9 }
10 </style>
11 </head>

 

css语法:

css 样式由选择符和声明组成,而声明又由属性和值组成,如下所示:

p { color : red; }

p为选择符 后面为声明,声明中包括属性和值。

 

二. 三种联结的css:

从CSS 样式代码插入的形式来看基本可以分为以下3种:内联式、嵌入式和外部式三种。

内联式css样式表就是把css代码直接写在现有的HTML标签中,如下面代码

<p style="color:red">这里文字是红色。</p>
//写在body内 优先级最高

嵌入式css样式,就是可以把css样式代码写在<style type="text/css"></style>标签之间。

<style type="text/css">
span{
color:red;
}
</style>
//卸载head标签里的style标签中,优先级次之

外部式css样式(也可称为外联式)就是把css代码写一个单独的外部文件中,这个css样式文件以“.css”为扩展名,在<head>内(不是在<style>标签内)使用<link>标签将css样式文件链接到HTML文件内,如下面代码:

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>嵌入式css样式</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>

// rel="stylesheet" type="text/css" 是固定写法不可修改。

 优先级:内联式 > 嵌入式 > 外部式

其实总结来说,就是--就近原则(离被设置元素越近优先级别越高)

 

三. css选择器

p { color : red; }  p就是标签选择器。

“选择器”指明了{}中的“样式”的作用对象,也就是“样式”作用于网页中的哪些元素。

 

类选择器

.类选器名称{css样式代码;}
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>认识html标签</title>
<style type="text/css">
.stress{
    color:red;
}
.stressGreen{color:green;}
</style>
</head>
<body>
    <p>三年级时,我还是一个<span class="stress">胆小如鼠</span>的人。
    </p>
</body>
</html>

注意:英文圆点开头

 

ID选择器

在很多方面,ID选择器都类似于类选择符,但也有一些重要的区别:

1、为标签设置id="ID名称",而不是class="类名称"。

2、ID选择符的前面是井号(#)号,而不是英文圆点(.)。

 1 <html>
 2 <head>
 3 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 4 <title>认识html标签</title>
 5 <style type="text/css">
 6 #stress{
 7     color:red;
 8 }
 9 #green{color:green;}
10 </style>
11 </head>
12 <body>
13     <p>三年级时,我还是一个<span id="stress">胆小如鼠</span>的人。
14 </body>
15 </html>

类选择器和ID选择器的差别:

1.ID选择器只能在文档中使用一次。类选择器可以使用多次。

2.可以使用类选择器词列表方法为一个元素同时设置多个样式。

 

子选择器

子选择器,即大于符号(>),用于选择指定标签元素的第一代子元素。

 1 <style type="text/css">
 2 .food>li{border:1px solid red;}/*添加边框样式(粗细为1px, 颜色为红色的实线)*/
 3 </style>
 4 
 5 <ul class="food">
 6     <li>水果
 7         <ul>
 8             <li>香蕉</li>
 9             <li>苹果</li>
10             <li>梨</li>
11         </ul>
12     </li>
13 </ul>

 

包含选择器

包含选择器,即加入空格,用于选择指定标签元素下的后辈元素

1 <style type="text/css">
2 .first span{color:red;} 
3 </style>
4 
5 <body>
6  <p class="first">三年级时,我还是一个<span>胆小如鼠</span>的人。
7 </p>
8 </body>

注意选择器与子选择器的区别:

1.子选择器仅是指它的直接后代,或者你可以理解为作用于子元素的第一代后代。而后代选择器是作用于所有子后代元素。

2.后代选择器通过空格来进行选择,而子选择器是通过“>”进行选择。

 

通用选择器:

通用选择器是功能最强大的选择器,它使用一个(*)号指定,它的作用是匹配html中所有标签元素,如下使用下面代码使用html中任意标签元素字体颜色全部设置为红色:

1 <style type="text/css">
2 * {color:red;}
3 * {font-size:20px;}
4 </style>

 

伪类选择器:

它允许给html不存在的标签(标签的某种状态)设置样式,比如说我们给html中一个标签元素的鼠标滑过的状态来设置字体颜色:

a:hover{color:red;}

 

分组选择符:

当你想为html中多个标签元素设置同一个样式时,可以使用分组选择符(,)如下:

h1,span{color:red;}

/*相当于以下
h1{color:red;}
span{color:red;}
*/

 

四. 继承层叠

 1.继承性:

CSS的某些样式是具有继承性的,那么什么是继承呢?继承是一种规则,它允许样式不仅应用于某个特定html标签元素,而且应用于其后代。比如某种颜色应用于p标签,这个颜色设置不仅应用p标签,还应用于p标签中的所有子元素文本。

2. 特殊性:

浏览器是根据权值来判断使用哪种css样式的,权值高的就使用哪种css样式。标签的权值为1,类选择符的权值为10,ID选择符的权值最高为100。

1 p{color:red;} /*标签权值为1*/
2 p span{color:green;} /*标签权值为1+1=2*/
3 .warning{color:white;} /*类选择符权值为10*/
4 p span.warning{color:purple;} /*标签 标签 类选择符 权值为1+1+10=12*/
5 #footer .note p{color:yellow;} /*ID选择符权值为100+10+1=111 加类选择符和标签*/

3. 层叠:

如果在html文件中对于同一个元素可以有多个css样式存在并且这多个css样式具有相同权重值。用到层叠方法。

层叠就是在html文件中对于同一个元素可以有多个css样式存在,当有相同权重的样式存在时,会根据这些css样式的前后顺序来决定,处于最后面的css样式会被应用。就近原则。

4. 重要性:

在做网页代码的时,有些特殊的情况需要为某些样式设置具有最高权值,这时候我们可以使用!important来解决。

p{color:red!important;}
p{color:green;}
<p class="first">三年级时,我还是一个<span>胆小如鼠</span>的小女孩。</p>

/*这时 p 段落中的文本会显示的red红色*/

注意:!important要写在分号的前面

五. CSS格式化排版

1. 文字:

 1 //为网页中的文字设置字体为微软雅黑
 2 body{font-family:"Microsoft Yahei";}
 3 
 4 //设置字号和颜色
 5 body{font-size:12px;color:#666;}
 6 
 7 //设置粗体 斜体
 8 p span{font-weight:bold;}
 9 p a{font-style:italic;}
10 
11 //设置下划线 删除线
12 p a{text-decoration:underline;}
13 .oldPrice{text-decoration:line-through;}

2. 段落

 1 //缩进 注意:2em的意思就是文字的2倍大小。
 2 p{text-indent:2em;}
 3 
 4 //行高 行间距
 5 p{line-height:1.5em;}
 6 
 7 //字母、文字间隔距离   单词间隔距离
 8 h1{
 9     letter-spacing:50px;
10 }
11 h1{
12     word-spacing:50px;
13 }
14 
15 //对齐 center left right
16 h1{
17     text-align:center;
18 }

六. CSS盒模型

1.在CSS中,html中的标签元素大体被分为三种不同的类型:块状元素、内联元素(又叫行内元素)和内联块状元素。

常用的块状元素有:

<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form>

常用的内联元素有:

<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>

常用的内联块状元素有:

<img>、<input>

 

2.块状元素:

块级元素特点:

1、每个块级元素都从新的一行开始,并且其后的元素也另起一行。

2、元素的高度、宽度、行高以及顶和底边距都可设置。

3、元素宽度在不设置的情况下,是它本身父容器的100%(和父元素的宽度一致),除非设定一个宽度。

1 //将其他级元素转换为块元素
2 
3 a{display:block;}

 

3. 内联元素

内联元素特点:

1、和其他元素都在一行上;

2、元素的高度、宽度及顶部和底部边距不可设置;

3、元素的宽度就是它包含的文字或图片的宽度,不可改变。

1 //将其他转换为内联元素
2 
3  div{
4      display:inline;
5  }

 

4. 内联块状元素

inline-block 元素特点:

1、和其他元素都在一行上;

2、元素的高度、宽度、行高以及顶和底边距都可设置。

1 //将其他设置为内联模块元素
2 
3 a{
4     display:inline-block;
5 }

 

5.盒子模型

div盒子模型有内边距(padding) 外边距(margin) 边框(border)。 这三个属性都有四个方向如 padding-top、padding-bottom。

所以div的实际高度为 盒子内元素高度+上下内边距+上下边框高度+上下外边距。实际宽度同上。

如果想为盒子设置单独的下边框(单独设一个方向的边框,不设置其他方向边框)代码如下:

1 div{border-bottom:1px solid red;}

padding  margin填充:

 1 /*填充也可分为上、右、下、左(顺时针)。*/
 2 div{padding:20px 10px 15px 30px;}
 3 
 4 /*顺序一定不要搞混。可以分开写上面代码*/
 5 div{
 6    padding-top:20px;
 7    padding-right:10px;
 8    padding-bottom:15px;
 9    padding-left:30px;
10 }
11 
12 /*如果上、右、下、左的填充都为10px;可以这么写*/
13 div{padding:10px;}
14 
15 /*如果上下填充一样为10px,左右一样为20px,可以这么写*/
16 div{margin:10px 20px;}

七. CSS布局模型

在网页中,元素有三种布局模型:
(1)流动模型(Flow)
(2)浮动模型 (Float)
(3)层模型(Layer)

 

1.流动模型(默认布局)

特点:1.块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布,因为在默认状态下,块状元素的宽度都为100%。实际上,块状元素都会以行的形式占据位置。

   2.在流动模型下,内联元素都会在所处的包含元素内从左到右水平分布显示。(内联元素可不像块状元素这么霸道独占一行)

2.浮动模型

如果现在我们想让两个块状元素并排显示,设置元素浮动就可以实现这一愿望。

任何元素在默认情况下是不能浮动的,但可以用 CSS 定义为浮动,如 div、p、table、img 等元素都可以被定义为浮动。如下代码可以实现两个 div 元素一行显示。

1 div{
2     width:200px;
3     height:200px;
4     border:2px red solid;
5     float:left;
6 }
7 <div id="div1"></div>
8 <div id="div2"></div>
1 /*将两个盒模型分开放*/
2 div{
3     width:200px;
4     height:200px;
5     border:2px red solid;
6 }
7 #div1{float:left;}
8 #div2{float:right;}

3. 层布局

层布局模型就像图层编辑功能一样,每个图层能够精确定位操作。层模型有三种形式:

(1)绝对定位(position: absolute)

(2)相对定位(position: relative)

(3)固定定位(position: fixed)

 

(1)绝对定位

如果想为元素设置层模型中的绝对定位,需要设置position:absolute(表示绝对定位),这条语句的作用将元素从文档流中拖出来,然后使用left、right、top、bottom属性相对于其最接近的一个具有定位属性的父包含块进行绝对定位。如果不存在这样的包含块,则相对于body元素,即相对于浏览器窗口。

1 div{
2     width:200px;
3     height:200px;
4     border:2px red solid;
5     position:absolute;     //绝对布局
6     left:100px;
7     top:50px;
8 }
9 <div id="div1"></div>

(2)相对定位

 如果想为元素设置层模型中的相对定位,需要设置position:relative(表示相对定位),它通过left、right、top、bottom属性确定元素在正常文档流中的偏移位置。相对定位完成的过程是首先按static(float)方式生成一个元素(并且元素像层一样浮动了起来),然后相对于以前的位置移动,移动的方向和幅度由left、right、top、bottom属性确定,偏移前的位置保留不动。

 1 #div1{
 2     width:200px;
 3     height:200px;
 4     border:2px red solid;
 5     position:relative;    //相对布局
 6     left:100px;
 7     top:50px;
 8 }
 9 
10 <div id="div1"></div>

(3)固定定位

fixed:表示固定定位,与absolute定位类型类似,但它的相对移动的坐标是视图(屏幕内的网页窗口)本身。由于视图本身是固定的,它不会随浏览器窗口的滚动条滚动而变化,除非你在屏幕中移动浏览器窗口的屏幕位置,或改变浏览器窗口的显示大小,因此固定定位的元素会始终位于浏览器窗口内视图的某个位置,不会受文档流动影响,这与background-attachment:fixed?属性功能相同。

1 #div1{
2     width:200px;
3     height:200px;
4     border:2px red solid;
5     position:fixed;
6     left:100px;
7     top:50px;
8 }
9 <p>文本。</p>

(4)绝对定位相对定位结合

使用position:absolute可以实现被设置元素相对于浏览器(body)设置定位,同样可以相对于其它元素进行定位,使用position:relative即可。

注意:

1.参照定位的元素必须是相对定位元素的前辈元素

2.参照定位的元素必须加入position:relative

3.定位元素加入position:absolute,便可以使用top、bottom、left、right来进行偏移定位了。

 1 #box1{
 2     width:200px;
 3     height:200px;
 4     position:relative;        
 5 }
 6 #box2{
 7     position:absolute;
 8     top:20px;
 9     left:30px;         
10 }
11 
12 <div id="box1"><!--参照定位的元素-->
13     <div id="box2">相对参照元素进行定位</div><!--相对定位元素-->
14 </div>

八. 其他

1.盒模型代码缩写

盒模型外边距(margin)、内边距(padding)和边框(border)设置上下左右四个方向的边距是按照顺时针方向设置的:上右下左

1 margin:10px 10px 10px 10px;
2 margin:10px;
3 
4 margin:10px 20px 10px 20px;
5 margin:10px 20px;
6 
7 margin:10px 20px 30px 20px;
8 margin:10px 20px 30px;

颜色也可以缩写,当你设置的颜色是16进制的色彩值时,如果每两位的值相同,可以缩写一半。

1 p{color:#000000;}
2 p{color:#000;}
3 
4 p{color: #336699;}
5 p{color: #369;}

字体缩写,

 1 body{
 2     font-style:italic;
 3     font-variant:small-caps; 
 4     font-weight:bold; 
 5     font-size:12px; 
 6     line-height:1.5em; 
 7     font-family:"宋体",sans-serif;
 8 }
 9 
10 body{
11     font:italic  small-caps  bold  12px/1.5em  "宋体",sans-serif;
12 }

//常用:
body{
    font:12px/1.5em  "宋体",sans-serif;
}

注意:

1、使用这一简写方式你至少要指定 font-size 和 font-family 属性,其他的属性(如 font-weight、font-style、font-variant、line-height)如未指定将自动使用默认值。

2、在缩写时 font-size 与 line-height 中间要加入“/”斜扛。

 

2.单位和值

颜色值有三种:1.英文命名   如 p{color:red;}   2.RGB命名  如 p{color:rgb(133,45,200);}  316进制命名 如p{color:#00ffff;}

长度值:长度单位总结一下,目前比较常用到px(像素)、em(本元素给定字体的 font-size 值,如果元素的 font-size 为 14px ,那么 1em = 14px)、% 百分比(同样相对字体大小),要注意其实这三种单位都是相对单位。

 

3.居中:

(1)如果被设置元素为文本、图片等行内元素时,水平居中是通过给父元素设置 text-align:center 来实现的。

1 <style>
2   .txtCenter{
3     text-align:center;
4   }
5 </style>

(2)当被设置元素为块状元素时用 text-align:center 就不起作用了,这时也分两种情况:定宽块状元素和不定宽块状元素。

  定宽块状元素:块状元素的宽度width为固定值。满足定宽和块状两个条件的元素是可以通过设置“左右margin”值为“auto”来实现居中的。

1 <style>
2 div{
3     border:1px solid red;/*为了显示居中效果明显为 div 设置了边框*/
4     
5     width:200px;/*定宽*/
6     margin:20px auto;/* margin-left 与 margin-right 设置为 auto */
7 }

  不定宽块状元素:块状元素的宽度width不固定。

  1. 加入 table 标签

  利用table标签的长度自适应性---即不定义其长度也不默认父元素body的长度(table其长度根据其内文本长度决定),因此可以看做一个定宽度块元素,然后再利用定宽度块状居中的margin的方法,使其水平居中。

  第一步:为需要设置的居中的元素外面加入一个 table 标签 ( 包括 <tbody>、<tr>、<td> )。

  第二步:为这个 table 设置“左右 margin 居中”(这个和定宽块状元素的方法一样)。

<style>
table{
    border:1px solid;
    margin:0 auto;
}
</style>

<table>
    <tbody>
        <tr><td>
            <div class="wrap">
                   要居中的块状元素  
            </div>            
        </td></tr>
    </tbody>
</table>

/*因为这个方法是要利用表格的一个单元格来显示,加入tbody是优先加载,tr是建立一个表单元格的行td是咧,然后是内容在这个单元格内来显示*/        

 

css基础回顾

标签:因此   块级元素   表单   over   表示   的区别   100%   mooc   文档   

原文地址:https://www.cnblogs.com/Mask-D/p/9167812.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!