CSS

CSS介绍

我们为什么需要CSS?

使用css的目的就是让网页具有美观一致的页面，另外一个最重要的原因是内容与格式分离在没有CSS之前，我们想要修改HTML元素的样式需要为每个HTML元素单独定义样式属性，当HTML内容非常多时，就会定义很多重复的样式属性，并且修改的时候需要逐个修改，费心费力。是时候做出改变了，所以CSS就出现了。

CSS的出现解决了下面两个问题：

将HTML页面的内容与样式分离。
提高web开发的工作效率。

什么是CSS?

CSS是指层叠样式表(Cascading Style Sheets)，样式定义如何显示HTML元素，样式通常又会存在于样式表中。也就是说把HTML元素的样式都统一收集起来写在一个地方或一个CSS文件里。

css的优势

1.内容与表现分离 2.网页的表现统一，容易修改 3.丰富的样式，使页面布局更加灵活 4.减少网页的代码量，增加网页浏览器速度，节省网络带宽 5.运用独立页面的css,有利于网页被搜索引擎收录

如何使用CSS？

我们通常会把样式规则的内容都保存在CSS文件中，此时该CSS文件被称为外部样式表，然后在HTML文件中通过link标签引用该CSS文件即可。这样浏览器在解析到该link标签的时候就会加载该CSS文件，并按照该文件中的样式规则渲染HTML文件。

CSS语法

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
body {background-color:yellow;}
h1   {font-size:36pt;}
h2   {color:blue;}
p    {margin-left:50px;}
</style>
</head>

<body>

<h1>这个标题设置的大小为 36 pt</h1>
<h2>这个标题设置的颜色为蓝色：blue</h2>

<p>这个段落的左外边距为 50 像素：50px</p> 

</body>
</html>

实例一

实例一

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>教程2</title>
<style>
body {background-color:tan;}
h1   {color:maroon;font-size:20pt;}
hr   {color:navy;}
p    {font-size:11pt;margin-left:15px;}
a:link    {color:green;}
a:visited {color:yellow;}
a:hover   {color:black;}
a:active  {color:blue;}
</style>
</head>

<body>

<h1>这是标题</h1>
<hr>

<p>你可以看到这个段落是
被设定的 CSS 渲染的。</p>

<p><a href="http://www.runoob.com"
target="_blank">这是一个链接</a></p>

</body>
</html>

实例二

实例二

CSS实例

CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明:

形式如下：

h1（选择器）{

color:red; 声明

font-size:14px

}

选择器通常是您需要改变样式的 HTML 元素。

每条声明由一个属性和一个值组成。

属性（property）是您希望设置的样式属性（style attribute）。每个属性有一个值。属性和值被冒号分开。

CSS声明总是以分号(;)结束，声明组以大括号({})括起来:

p{ color:black; text-align-center }

为了让CSS可读性更强，你可以每行只描述一个属性:

color:black;

text-align:center

}

CSS注释

注释是用来解释你的代码，并且可以随意编辑它，浏览器会忽略它。

CSS注释以 "/*" 开始, 以 "*/" 结束, 实例如下:

/*这是个注释*/
p
{
text-align:center;
/*这是另一个注释*/
color:black;
font-family:arial;
}

CSS id 和 Class

id和class选择器

如果你要在HTML元素中设置CSS样式，你需要在元素中设置"id" 和 "class"选择器。

id选择器

id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。

HTML元素以id属性来设置id选择器,CSS 中 id 选择器以 "#" 来定义。

以下的样式规则应用于元素属性 id="para1":

#para1
{
    text-align:center;
    color:red;
}

提示：ID属性不要以数字开头，数字开头的ID在 Mozilla/Firefox 浏览器中不起作用。

class 选择器

class 选择器用于描述一组元素的样式，class 选择器有别于id选择器，class可以在多个元素中使用。

class 选择器在HTML中以class属性表示, 在 CSS 中，类选择器以一个点"."号显示：

在以下的例子中，所有拥有 center 类的 HTML 元素均为居中。

.center {text-align:center;}

你也可以指定特定的HTML元素使用class。

在以下实例中, 所有的 p 元素中包含类名"center" ，让该元素的文本居中:

p.center {text-align:center;}

提示：类名的第一个字符不能使用数字！它无法在 Mozilla 或 Firefox 中起作用。

标签选择器

<style>
    h1{
    text-align:center:
    color:green
}
</style>

高级选择器

后代选择器

因为HTML元素可以嵌套，所以我们可以从某个元素的后代查找特定元素，并设置样式：

div p {
  color: red;
}

<div>
　　<p>儿子类</p>    <!--变红色-->
   <table border="1">
       <tr>
           <td>
               后代类    <!--变色-->
           </td>
       </tr>
   </table>
</div>

从div的所有后代中找p标签，设置字体颜色为红色。

儿子选择器

div>p {
  color: red;
}

<div>
　　<p>儿子类</p>  <!--变红-->
   <table border="1">
       <tr>
           <td>
               <p>后代类</p>   <!--不变色-->
           </td>
       </tr>
   </table>
</div>

从div的直接子元素中找到p标签，设置字体颜色为红色。

引用CSS样式的方法

1、内联样式

2、行内样式

3、外部样式

3.1、链接式

3.2、导入式

1、内联样式

style标签

<!doctype html>
<html>
    <head>
        <meta charset="utf8">
        <style>
            p {
                color: red;
            }
        </style>
    </head>
    <body>
        <p>这是一个p标签！</p>
    </body>
</html

2、行内样式

<!doctype html>
<html>
<head>
<meta charset="utf8">
</head>
<body>
<p style="color: blue;">这是一个p标签！</p>
</body>
</html>

3、外部样式——链接式

link标签

建一个index.css的文件如下：

p{
color:rad;
}

然后在HTML文件中通过标签引入：

<!doctype html>
<html>
    <head>
        <meta charset="utf8">
        <link rel="stylesheet" href="index.css">
    </head>
    <body>
        <p>这是一个p标签！</p>
    </body>
</html>

外联样式表-@import url()方式导入式

index.css

@import url(other.css)

注意：
@import url()必须写在文件最开始的位置。

链接式与导入式的区别

1、<link/>标签属于XHTML,@import是属性css2.1
2、使用<link/>链接的css文件先加载到网页当中，再进行编译显示
3、使用@import导入的css文件，客户端显示HTML结构，再把CSS文件加载到网页当中
4、@import是属于CSS2.1特有的，对于不兼容CSS2.1的浏览器来说就是无效的

CSS分组和嵌套选择器

在样式表中有很多具有相同样式的元素。

h1
{
color:green;
}
h2
{
color:green;
}
p
{
color:green;
}

为了尽量减少代码，你可以使用分组选择器。

每个选择器用逗号分隔.

在下面的例子中，我们对以上代码使用分组选择器：

h1,h2,p
{
color:green;
}

伪类选择器

常用的有四种伪类选择器。

1、没有被访问过的超链接a标签样式（未被点击的时候）

a:link{

color:blue;

}

2、访问过的超链接a标签样式（点击过）

a:visited{

color:yellow;

}

3、用户鼠标停留在上面的样式

a:hover{

color:purpoe;

}

4、鼠标点击瞬间的样式

a:active{

color:red;

}

同样适用于其他的文本

伪元素选择器

first-letter

p:first-letter{

　　font-size:30px;

}

(将p标签的文本内容首个字进行修改)

before

用于在元素的内容前面插入新内容。

p:before{
　　content: "插入内容";
　　color: red;
}

（和first-letter一起的时候，是先插入内容，再改变首字符的样式）

after

用于在元素的内容后面插入新内容。

p:after{
　　content: "插入内容";
　　color: red;
}

选择器的优先级

我们现在已经学过了很多的选择器，也就是说我们有很多种方法从HTML中找到某个元素，那么就会有一个问题：如果我通过不用的选择器找到了相同的一个元素，并且设置了不同的样式，那么浏览器究竟应该按照哪一个样式渲染呢？也就是不同的选择器它们的优先级是怎样的呢？

是先来后到呢还是后来居上呢？统统不是，它是按照下面的选择器的权重规则来决定的。

行内样式　　>　　id选择器　　>　　类选择器　　>　　元素选择器

还有一种方式为！important可以吧选择器的优先级加到最大。但不推荐使用，不易于维护。

字体相关CSS属性介绍

font-family

字体系列。

font-family可以把多个字体名称作为一个“回退”系统来保存。如果浏览器不支持第一个字体，则会尝试下一个。浏览器会使用它可识别的第一个值。

简单实例：

body {
font-family: "Microsoft Yahei", "微软雅黑", "Arial", sans-serif
}

如果设置成inherit，则表示继承父元素的字体。

font-weight

字重（字体粗细）。

取值范围：

normal　　默认值，标准粗细

bord　　粗体

border　　更粗

lighter　　更粗

100~900　　设置具体粗细，400等于默认值

inherit　　继承父类元素字体粗细

font-size

字体大小。

font-size:14px;

}

如果设置成inherit表示继承父元素的字体大小值。

color

设置内容的字体颜色。

支持三种颜色值：

1、十六进制值如: ＃FF0000
2、一个RGB值如: RGB(255,0,0)
3、颜色的名称如: red

color:red;

}

文本属性

text-align

文本对齐

text-align 属性规定元素中的文本的水平对齐方式。

left　　水平居左

right　　水平居右

center　　水平居中

justify　　两端对齐

line-height

设置为行高，单行文本垂直方向居中

多行文本居中：使用padding-top：num px #num = （盒子高度 - 字体行高*行数）/ 2

text-decoration

文字装饰。

none　　默认，定义标准文本

underline　　定义文本下的一条线

overline　　定义文本上的一条线

line-through　　定义穿过文本下的一条线

inherit　　继承父元素的text-decoration属性的值

背景属性

常用背景相关属性：

background-color 　　规定要使用的背景颜色。
background-image 　　规定要使用的背景图像。
background-size 　　规定背景图片的尺寸。
background-repeat 　　规定如何重复背景图像。
background-attachment 　　规定背景图像是否固定或者随着页面的其余部分滚动。
background-position 　　规定背景图像的位置。
inherit 　　　　　　　　规定应该从父元素继承background属性的设置。

background-repeat取值范围：

repeat 　　默认。背景图像将在垂直方向和水平方向重复。
repeat-x 　　背景图像将在水平方向重复。
repeat-y 　　背景图像将在垂直方向重复。
no-repeat 　　背景图像将仅显示一次。
inherit 　　规定应该从父元素继承background-repeat属性的设置。

background-attachment取值范围：

scroll 　　默认值。背景图像会随着页面其余部分的滚动而移动。
fixed 　　当页面的其余部分滚动时，背景图像不会移动。
inherit 　　规定应该从父元素继承background-attachment属性的设置。

background-position取值范围：

top left 　　左上角
top center 　　上中
top right 　　右上
left 　　居左
center 　　居中
right 　　居右
bottom left 　　左下
bottom center 　　中下
bottom right　　右下

x%y%　　百分比

css盒子模型

HTML文档中的每个元素都被描绘成矩形盒子，这些矩形盒子通过一个模型来描述其占用空间，这个模型称为盒子模型。盒子模型通过四个边界来描述：margin（外边距），border（边框），padding（内填充），content（内容区域）。

元素的宽度和高度

当你指定一个CSS元素的宽度和高度属性时，你只是设置内容区域的宽度和高度。要知道，完整大小的元素，你还必须添加填充，边框和边距。.

div {
　　width: 300px;
　　border: 25px solid green;
　　padding: 25px;
　　margin: 25px;
}

元素的总宽度=300px + 25px*2 + 25px*2 +25px*2 = 450px

最终元素的总宽度计算公式是这样的：

总元素的宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距

元素的总高度最终计算公式是这样的：

总元素的高度=高度+顶部填充+底部填充+上边框+下边框+上边距+下边距

css边框属性

border

常用方法 border: 1px solid red #边框宽度为1px,样式为solid,颜色为red

边框样式

边框样式属性指定要显示什么样的边界。

border-style属性用来定义边框的样式

none: 默认无边框

dotted: 定义一个点线边框

dashed: 定义一个虚线边框

solid: 定义实线边框

double: 定义两个边框。两个边框的宽度和 border-width 的值相同

groove: 定义3D沟槽边框。效果取决于边框的颜色值

ridge: 定义3D脊边框。效果取决于边框的颜色值

inset:定义一个3D的嵌入边框。效果取决于边框的颜色值

outset: 定义一个3D突出边框。效果取决于边框的颜色值

border-radius 设置边框的圆角：

border-radius : 5px:

也可以四个角分别设置： border-redius: 3px 3px 5px 5px;

设置为50%会变成圆形： border-radius: 50%;

边框宽度

您可以通过 border-width 属性为边框指定宽度。

为边框指定宽度有两种方法：可以指定长度值，比如 2px 或 0.1em(单位为 px, pt, cm, em 等)，或者使用 3 个关键字之一，它们分别是 thick 、medium（默认值）和 thin。

注意：CSS 没有定义 3 个关键字的具体宽度，所以一个用户可能把 thick 、medium 和 thin 分别设置为等于 5px、3px 和 2px，而另一个用户则分别设置为 3px、2px 和 1px。

p.one
{
　　border-style:solid;
　　border-width:5px;
}
p.two
{
　　border-style:solid;
　　border-width:medium;
}

边框颜色
border-color属性用于设置边框的颜色。可以设置的颜色：

name - 指定颜色的名称，如 "red"
RGB - 指定 RGB 值, 如 "rgb(255,0,0)"
Hex - 指定16进制值, 如 "#ff0000"
您还可以设置边框的颜色为"transparent"。

注意： border-color单独使用是不起作用的，必须得先使用border-style来设置边框样式。

p.one
{
　　border-style:solid;
　　border-color:red;
}
p.two
{
　　border-style:solid;
　　border-color:#98bf21;
}

边框-单独设置各边

在CSS中，可以指定不同的侧面不同的边框：

p
{
　　border-top-style:dotted;
　　border-right-style:solid;
　　border-bottom-style:dotted;
　　border-left-style:solid;

　　border-radius：5px（设置边框圆角）
}

border-style属性可以有1-4个值：

border-style:dotted solid double dashed;
上边框是 dotted
右边框是 solid
底边框是 double
左边框是 dashed

border-style:dotted solid double;
上边框是 dotted
左、右边框是 solid
底边框是 double

border-style:dotted solid;
上、底边框是 dotted
右、左边框是 solid

border-style:dotted;
四面边框是 dotted
上面的例子用了border-style。然而，它也可以和border-width 、 border-color一起使用。

边框-简写属性
上面的例子用了很多属性来设置边框。

你也可以在一个属性中设置边框。

你可以在"border"属性中设置：

border-width
border-style (required)
border-color

padding(内边距)

通过父类盒子的padding属性可以调节子类盒子在其内的移动。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style type="text/css">
        body{
            margin: 0;
            padding: 0;
        }
        .box1{
            width: 300px;
            height: 300px;
            background-color: #ff6700;
        }
        .box2{
            width: 100px;
            height: 100px;
            background-color: black;
            margin-left: 10px;
            margin-top: 20px;
        }

    </style>

</head>
<body>

    <div class="box1">
        <div class="box2">

        </div>
    </div>


</body>
</html>

View Code

上面的代码里，当子盒子box2对margin进行设置时，发现在左边子盒子是相对父盒子进行移动的，但是在垂直方向上却是一起进行向下移动，

这是因为父盒子没有设置border，在垂直方向上就会向上找边框，以其为准一起向下移动。

这是就需要设置父类padding。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style type="text/css">
        body{
            margin: 0;
            padding: 0;
        }
        .box1{
            width: 300px;
            height: 300px;
            background-color: #ff6700;
            padding-top: 20px;
            padding-left: 10px;
        }
        .box2{
            width: 100px;
            height: 100px;
            background-color: black;
            /*margin-left: 10px;*/
            /*margin-top: 20px;*/
        }

    </style>

</head>
<body>

    <div class="box1">
        <div class="box2">

        </div>
    </div>


</body>
</html>

View Code

#一些标签在我们使用的时候会有默认的padding、margin

如果使用 *{padding: 0 ; margin: 0 ;} 进行设置效率不高，所以我们要使用并集选择器来选中页面中应有的标签：

body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, button, textarea, p, blockquote, th, td {
    		margin: 0;
    		padding: 0;
		}

标准文档流概念

在进行web页面设计的时候，不同于ps等设计软件，web网页制作是以“流”的方式，从上而下，一个个紧紧相随的，

而设计软件可以再其内随意的地方进行设计。

标准文档流的微观现象：

　　1、空白折叠现象

　　2、高矮不齐，底边对齐

　　3、自动换行

在标准文档流内会将多个一连串空格全部默认折叠成一个空格；当文字之间在同一行中大小高低不同时，底边依然是对齐的；

在一行内显示不了所有内容时，会进行自动换行。

块级元素与行内元素之间的转换

通过display属性设置，可将块级元素、行内元素进行转换。

display:lnine-block; #将块级元素转化成行内块元素（转化后依旧可以设置宽高，只是不会独占一行了）

display:block; 　　#将行内元素转化成块状元素（转化后可以设置宽高，且独占一行）

display：none;　　#隐藏当前标签，不占位置

visibility：hidden　　#隐藏当前标签，占位置

标签的浮动

元素设置了浮动之后就不区分块级、行内元素了，都能设置宽高。

浮动的四个特性：

1、浮动的元素脱标

2、浮动元素相互贴着

3、浮动的元素有“字围”效果

4、收缩的效果

设置浮动属性的元素脱离了标准文档流，所以说不占位置，层级提高，会有遮盖效果。

在同一个方向浮动的元素，后一个元素会紧挨着前一个元素的后面，如果一行的宽度不够的话，则会自动换行。

浮动元素不会遮盖没有浮动元素中的文字，未浮动元素中的文字会自动给浮动元素让出位置

浮动元素如果没有宽高，那么会自动收缩为文字的宽度，与行内元素类似。

清除浮动带来的影响

由于浮动元素是脱标的，会带来遮盖标准文档流的现象。

清除浮动影响有四种方法：

1、给浮动元素的父盒子设置宽高，一般父盒子是不设置宽高的，避免下次子元素改动时，父盒子也要进行改动宽高。

2、使用clear:both 清除浮动影响，在浮动元素的后面加上一个空的<div>盒子，设置clear:both，将后面标准流文档的元素隔开。

3、使用伪元素after,在浮动元素的父盒子中使用 clearsix:after{

　　　　　　　　　　centent:"";

　　　　　　　　　　width:0;

　　　　　　　　　　height:0:

　　　　　　　　　　display:block;　

　　　　　　　　　　clear:both　

　　　　　　　　　　visibility:hidden

　　　　　　　　　　}

4、在浮动元素的父元素里设置overflow: hiddin

margin垂直方向的塌陷问题

两个没有浮动的额盒子在垂直方向设置margin的值时，如果处于上端盒子设置的margin-bottom的值，下端的盒子设置margin-top值，会造成margin在

垂直方向不会叠加而是会以距离大的一方为标准。浮动元素之间垂直方向margin不塌陷。

margin: 0 auto;可以将没有浮动的盒子进行水平居中

相对定位、绝对定位、固定定位

相对定位（position：relative）：设置相对定位，盒子是以自身原来的位置作为参考点的，设置了相对定位之后盒子可以以参考点进行top、right、botom、left方向的移动。

如果没有设置移动的话，则和标准流下的盒子没有区别。

相对定位的特性：

1、不脱离标准文档流

盒子设置了相对定位之后，依旧是属于标准文档流内，会占据位置。

2、形影分离

设置相对定位后进行移动，最初在文档流中占据的位置依然占据着，移动时盒子是有遮盖效果的

一般用于元素位子的微调，以及作为绝对定位的参考点。

绝对定位

position：absolute

绝对定位的特点：

1、脱离标准文档流

2、会产生遮盖效果

3、设置了绝对定位之后不区分行内和块状元素，都能设置宽高

绝对定位的参考点：

1、当使用了top属性描述的时候，是以页面的左上角（和浏览器的左上角区分）为参考调整位置。

2、当使用bottom属性描述时，是以首屏页面的左下角为参考点调整位置。

相对定位以盒子为参考点：

父辈元素设置相对定位，子元素设置绝对定位，那么会以父辈元素左上角为参考点。

父（相对定位）子（绝对定位），父（固定定位）子（绝对定位），都是以父辈的元素作为参考点。

设置了绝对定位的子盒子是不会随着父类的padding属性变化而变化的，始终以设置相对定位的父类左上角为参考点。

绝对定位盒子居中：

由于绝对定位是脱标的，所以设置margin: 0 auto;是没有效果的，

设置居中方法：设置绝对定位盒子的left:50% ,margin-left : 负的盒子宽度的一半

固定定位（position: fixed）

固定定位特性：

1、脱标

2、提升层级，有遮盖效果

3、位置固定不变，不随屏滚动

参考点：

设置固定定位，使用top描述，是以浏览器的左上角作为参考点。

使用bottom描述，是以浏览器的左下角为参考点

z-index属性

1、用来表示谁遮盖着谁，，数值大的遮盖数值小的。

2、只有定位了的元素才能设置z-index值，浮动元素不能使用z-index

3、z-index没有单位，就是一个正整数，默认z-index为0.

4、如果都没有设置z-index值，或者z-index值相同时，在文档流的下方的，能遮盖上方的元素，定位了的元素永远遮盖着没有定位的元素。

5、父盒子的z-index的值比另一个盒子的z-index小，那么子盒子的值再怎么大都要被另一个盒子的子盒子遮盖。

posted @ 2018-05-20 08:44 Zhitao 阅读(266) 评论(0) 编辑收藏举报

刷新页面返回顶部

Zhitao

CSS