CSS基础

1. 概述

CSS 主要是用于定义 HTML 内容在浏览器内的显示样式，如文字大小、颜色、字体和粗细等。使用 CSS 的好处是通过定义某个样式，可以让网页上不同位置的文字有着统一的字体。

例题如：

  1. 将段落中的文字大小改为 20px并加粗，同时颜色设为红色。

     p{
 	font-size:20px;
 	color:red;
 	font-weight:bold;
 }

  2. 将一个段落中某些不连续的内容设置为同一格式(字体颜色为红色)。

     span{
 	color:red;
 }

2. 语法

  1. 语法概述
    CSS 样式由 选择符 和 声明 组成，其中 声明 又由 属性 和 值 组成。如在 CSS 语句 p{color:red} 中，p 是选择符，{color:red;} 是声明，声明又由属性 color 和值 red 组成。

    声明中的属性和值组成的键值对的个数可以有多个。

    如：

     p{
 	cont-size:12px;
 	color:red;			# 声明中的最后一个属性可以没有分号，但是为了以后修改方便一般也加上分号
 }

  2. 注释语句

    和 HTML 代码一样，CSS 中也有注释语句，在 CSS 中用 /*content*/ 来为代码注释。

3. CSS 样式基本知识

CSS 样式可以写在 HTML 标签中，也可以写在 HTML 文件中，还可以写在外部的 CSS 文件中，根据 CSS 存放的位置我们可以将其划分为 内联式、嵌入式和外部式三种。

  1. 内联式 CSS，直接写在现有的 HTML 标签中

    如：

    HelloWorld

  2. 嵌入式 CSS，写在 HTML 页面中

    当一个 HTML 页面中的多个地方需要设置相同的格式，我们可以在 HTML 页面中另外设置一个 <style> 标签，并在该标签内定义 CSS 样式，同时在需要使用该样式的内容中引用该样式即可。

    如：

     <style>
 	span{color:red}
 </style>
 
 <p>
 	<span>HelloWolrd</span>
 </p>

  3. 外部式 CSS，写在单独的 CSS 文件中

    外部式 CSS 可以将各种样式的定义都写在一个 CSS 文件中，并且在需要引用的 HTML 文件中通过 <link> 标签引用该样式。

    如：

    <link href='base.css' rel='stylesheet' type='text/css'/>，其中，rel='stylesheet' type='text/css' 是固定写法不可变。

    <link> 标签一般写在 <head> 标签之内。

     # base.css
 span{
 	font-size:12px;
 	color:red;
 }

 # index.html
 <html>
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 <title>外部式css样式</title>
 <link href="base.css" rel="stylesheet" type="text/css" />
 </head>
 <body>
     <p>Hello,<span>World</span></p>
 </body>
 </html>

  4. 三种方法的优先级

    结论先摆出来：内联式 > 嵌入式 > 外部式，实际上也是秉承一个"就近原则"。

4. 选择器

  1. 什么是选择器

    选择器就是标识每个样式的字符串组合，如：

     body{
 	color:red;
 	font-size:12px;
 }

    中，body 就是选择器。

  2. 标签选择器

    标签选择器，其实就是用 HTML 代码中的标签作为选择器。如：

     p{
 	font-size:12px;
 }
 h1{
 	color:red;
 	font-weight:normal;
 }

  3. 类选择器

    类选择器在 CSS 样式编码中是最常用到的，其语法为：

    .类选择器名{css样式代码}

    注意是以英文圆点开头，类选择器名可以随便起，但不能起中文名。
    如：

     /* 定义样式 */
 .question-id{
 	font-size:12px;
 	color:red;
 }

 /* 引用样式 */
 <p class="question-id">我曾经是一个胆小如鼠的小男孩，现在已经成长为一个胆小如鼠的老男孩了。</p>

  4. ID 选择器

    ID 选择器的作用在大多数情况下都类似于类选择器，不过与类选择器存在如下差别：

    1.定义时要用 # 开头而不是英文圆点

    2.引用时要指定 id=id_name 而不是 class=class_name

    如：

     /* 定义样式 */
 #setGreen{
 	color:green;
 }

 /* 引用样式 */
 <p id="setGreen">我曾经是一个胆小如鼠的小男孩，现在已经成长为一个胆小如鼠的老男孩了。</p>

  5. 类选择器和 ID 选择器的区别

    相同点：可以应用于任何元素

    不同点：

    ① ID 选择器只能在一个 HTML 文档中使用 1 次，类选择器可以使用多次
    ② 类选择器可以词列表方法为一个元素同时设置多个样式，如 <p class="font-big color-red"></p>而 ID 选择器不可以。

  6. 子选择器

    子选择器是作用于让某个类选择器下的第一级指定标签，用 > 号指定，如：

     .food>li{
 	border:1px solid red;
 }

    的作用是，让引用了 food 类的标签下的第一级 <li> 标签呈现样式所定义的效果。

  7. 包含选择器

    在子选择器的基础之上，不仅对一级指定标签生效，还对所有指定标签生效，用空格指定而不是 > 号指定。如：

     .food li{
 	border:1px solid red;
 }

    的作用是，让引用了 food 类的标签下所有的 <li> 标签呈现样式所定义的效果。

  8. 通用选择符

    通用选择器的作用是匹配 HTML 中所有的标签元素，如 * {color:red} 该代码会将 HTML 中所有的标签内元素都设置为红色。

  9. 伪类选择符

    伪类选择器为 HTML 中标签下不存在的状态(如鼠标滑过的状态)设置样式，如：给 HTML 中的一个标签设置鼠标滑过时的样式应该这么写 a:hover{color:red}，该代码为 <a> 标签处于鼠标滑过状态设置颜色为红色的样式。

    到目前为止，可以兼容所有浏览器的伪类选择符只有 a:hover，当然还有其他一些伪类选择符也可以兼容部分浏览器和标签。

  10. 分组选择符

    当你想为 HTML 中的多个标签使用同一种样式时，可以使用分组选择符，如下所示：

    h1,a,p,span{
	color:red;
}

    中间用 , 号隔开，即可为 h1 a p span 标签同时设置 color:red; 样式。

5. 继承、层叠和特殊性

  1. 继承

    CSS 的某些样式是具有继承特性的，即该样式不仅作用于指定标签(或者引用了该样式的标签)，还作用于该标签下的子标签，如：

     p{color:red}

 <p>我曾经是一个胆小如鼠的小男孩，现在<span>已经成长为一个</span>胆小如鼠的老男孩了。</p>

    定义的样式 p{color:red} 不仅作用于 <p> 标签本身，还作用于 <p> 标签下的 <span> 标签。

    但是，不是所有的样式都具备继承性，如border:1px solid red 就不具备继承性。

  2. 层叠

    层叠就是在 HTML 文件中对于同一个元素，当定义了多个权重相同的样式时，会根据这些样式的前后顺序来决定使用的样式，如：

     p{color:red;}
 p{color:green;}

 <p>我曾经是一个胆小如鼠的小男孩，现在已经成长为一个胆小如鼠的老男孩了。</p>

    那么，段落 <p> 则会被设置为绿色，可以理解为后面定义的会把前面定义的样式覆盖掉，所以也是就近原则吧。这里再复习一下各种样式的优先级：内联式 > 嵌入式 > 外部式。

  3. 特殊性

    有时候我们为同一个元素设置了不同的 CSS 样式，那么该元素究竟用哪一个样式呢？如下所示：

     p{color:red}
 .first{color:green}

 <p class="first">我曾经是一个胆小如鼠的小男孩，现在已经成长为一个胆小如鼠的老男孩了。</p>

    实际上，该元素采用的 CSS 样式根据定义的权值而定，权值高的被采用。权值规则如下所示：

     p{color:red;} /*权值为1*/
 p span{color:green;} /*权值为1+1=2*/
 .warning{color:white;} /*权值为10*/
 p span.warning{color:purple;} /*权值为1+1+10=12*/
 #footer .note p{color:yellow;} /*权值为100+10+1=111*/
 
 此外，继承也有权值但是很低，有的文献提出它只有 0.1 。

  4. 重要样式

    在设计网页时，有时候需要对定义的某些样式设置最高权值，怎么办？可以使用 important 关键字来解决。如下：

     p{color:red!important;}
 p{color:green}

 <p>我曾经是一个胆小如鼠的小男孩，现在已经成长为一个胆小如鼠的老男孩了。</p>

6. 格式化排版

6.1 文字排版

我们可以利用 CSS 样式为网页中的文字设置字体、字号、颜色等样式属性。

  1. 设置字体

     body{font-family:"宋体";}
 body{font-family:"Microsoft-Yahei";}
 body{font-family:"微软雅黑";}

    其中，用英文兼容性比中文要好一点。

    注意：不建议设置不常用字体，因为如果浏览器上没有安装你设置的字体，那么就会显示默认字体。

  2. 设置字号和颜色

     p{
 	font-size:20px;
 	color:#666;
 }

  3. 斜体加粗下划删除线s

     p span{
 	font-weight:bold;	/* 加粗 */
 	font-style:italic;	/* 斜体 */
 	text-decoration:underline;	/* 下划线 */
 	text-decoration:line-through;	/* 删除线 */
 }

6.2 段落排版

  1. 缩进

     p{text-indent:2em;}

 <p>菲茨杰拉德，二十世纪美国文学巨擘之一，兼具作家和编剧双重身份。他以诗人的敏感和戏剧家的想象为"爵士乐时代"吟唱华丽挽歌，其诗人和梦想家的气质亦为那个奢靡年代的不二注解。</p>
 <p>菲茨杰拉德，二十世纪美国文学巨擘之一，兼具作家和编剧双重身份。他以诗人的敏感和戏剧家的想象为"爵士乐时代"吟唱华丽挽歌，其诗人和梦想家的气质亦为那个奢靡年代的不二注解。</p>

  2. 行间距(行高)

     p{line-height:1.5em;}

 <p>菲茨杰拉德，二十世纪美国文学巨擘之一，兼具作家和编剧双重身份。他以诗人的敏感和戏剧家的想象为"爵士乐时代"吟唱华丽挽歌，其诗人和梦想家的气质亦为那个奢靡年代的不二注解。</p>

  3. 汉字和字母间距

     h1{
 	letter-spacing:20px;	/* 字(母)间距 */
 	word-spacing:20px;		/* 单词间距 */
 }

    汉字和字母间距用 letter-spacing，单词间距用 word-spacing。

  4. 对齐

    为块状元素(后面会介绍到)中的文字、图片设置对齐方式(左右对齐或居中)，可以使用 text-align 来指定：

     p{
 	text-align:center;	/* 居中 */
 	text-align:left;	/* 左对齐 */
 	text-align:right;	/* 右对齐 */
 }

7. 盒模型

7.1 元素介绍

在讲盒模型之前，先介绍一下 HTML 的标签元素大概分为 3 类：块状元素、内联元素(行内元素)和内联块状元素。

  1. 常见元素

    常见的块状元素有：

    <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. 块状元素

    特点：

    ① 每个块级元素都从新的一行开始，其后的元素也另占一行；

    ② 元素的高度、宽度、行高以及顶和底部边距都可设置；

    ③ 元素宽度在不设置的情况下，默认为其父容器的 100% 。

    将元素设置为块级元素：使用 display:block 关键字可以将元素设为块级元素，如下所示：

     a{
 	display:block;
 }

    可将内联元素 <a> 设置为块级元素。

  3. 内联元素

    特点：

    ① 和其他元素在同一行上；

    ② 元素的高度、宽度、顶部和底部的边距不可设置；

    ③ 元素的宽度就是他包含的文字或图片的宽度，不可改变。

    将元素设置为内联元素：使用 display:inline 关键字可以将元素设为内联元素，如下所示：

     div{
 	display:inline;
 }

    可将块级元素 <div> 设置为内联元素。

  4. 内联块状元素

    特点：

    ① 和其他元素都在一行上；

    ② 元素的高度、宽度、行高以及顶和底部边距都可设置；

    将元素设置为内联块状元素：使用 display:inline-block 关键字可以将元素设为内敛块状元素，如下所示：

     a{
     display:inline-block;	/*设置为内敛块状元素*/
 	width:50px;		/*在默认情况下宽度不起作用*/
 	height:50px;	/*在默认情况下高度不起作用*/
 	background:pink;	/*设置背景颜色为粉色*/
 	text-align:center;	/*设置文本居中显示*/
 }

7.2 盒子模型

  1. 概述

    盒内边距用 padding，盒间边距用 margin，盒边框用 border 表示。

    其中，padding 和 margin 还细分为 pading-top padding-bottom pading-left padding-right 和 margin-top margin-bottom margin-left margin-right 四个填充。

    一般的块级标签都具备盒子模型的特征。

  2. 边框(完全)

    盒子模型的边框就是围绕着内容的线，这条线你可以设置它的粗细、样式和颜色。如下：

     /* 可以合并写 */
 div{
 	border:2px solid red;
 }
 /* 还可以分开写 */
 div{
 	border-width:2px;
 	border-style:solid;
 	border-color:red;
 }

    其中，border 代表边框，2px 代表粗细，solid 代表样式，red 代表颜色。

    ① border-width 中的宽度可以设置为 thin medium thick，但最常用的还是 px

    ② border-style 中的样式可以设置为 dashed(虚线) dotted(点线) 和 solid(实线)

    ③ border-color:#666 还可以设置为十六进制颜色，但不要忘记加 # 号。

  3. 边框(非完全)

    如果想要为盒子单独设置下边框而不是完全的边框，可以指定 border 的作用位置，如：p{border-bottom:2px dotted red}。

    其他三边可以如下设置：

     p{
 	border-top:2px dashed #666;
 	border-left:1px solid #9b9b9b;
 	border-right:3px dotted blue;
 }

  4. 宽和高

    一个元素的实际宽度(盒子的宽度) = 左边界 + 左边框 + 左填充 + 内容宽度 + 右填充 + 右边框 + 右边界。

    元素的高度也是同理。如下图代码：

     /* CSS 代码 */
 div{
     width:200px;
     padding:20px;
     border:1px solid red;
     margin:10px;    
 }

 /* HTML 代码 */
 <body>
    <div>文本内容</div>
 </body>

    查看元素模型如下图所示：

    盒子元素

  5. 填充(padding)

    元素的内容与边框之间的距离是可以设置的，称为填充，填充也可分为上右下左(顺时针)。如：div{padding:20px 10px 15px 30px}，注意顺序不要搞乱。

    同样的，以上代码也可以分开写：

     div{
 	padding-top:20px;
 	padding-right:10px;
 	padding-bottom:15px;
 	padding-left:30px;
 }

    如果上下左右都为 10px 还可以这么写：div{padding:10px;}；

    如果上下为 10px 左右为 20px 可以这么写：div{padding:10px 20px;}

  6. 边界(margin)

    元素与元素之间的距离可以使用边界(margin)来设置，边界也可以分为 上右下左 。如：div{margin:20px 10px 15px 30px;}

    同样的，以上代码也可以分开写：

     div{
 	margin-top:20px;
 	margin-right:10px;
 	margin-bottom:15px;
 	margin-left:30px;
 }

    如果上下左右都为 10px 还可以这么写：div{margin:10px;}；

    如果上下为 10px 左右为 20px 可以这么写：div{margin:10px 20px;}

8. CSS 布局

CSS 中关于布局模型一共有 3 种，分别是 flow(流动型) float(浮动型) 和 layer(层型)。那么这三个模型到底是什么样的呢？

  1. 流动模型(flow)

    流动模型是默认的网页布局模式。其具有 2 个比较典型的特征：

    ① 块状元素默认占据一行，就算该块状元素只有一个文字，也会占据整行内容，多个块状一起的时候，会按顺序垂直向下；

    ② 内联元素不像块状元素那样霸道，可以多个元素共存于一行。

    总的来说就是：块状元素独占一行，内联元素共存一行。

  2. 浮动模型(float)

    上面提到，块状元素独占一行。但是如果希望两个块状元素并排显示，可以设置元素浮动。任何元素在默认情况下是不能浮动的，但是可以用 CSS 定义为浮动。如下所示：

     div{
 	width:20px;
 	height:20px;
 	border:1px solid red;
 	float:left;
 }

    以上 CSS 代码的效果是：两个 div 标签并排显示。若有 div1 和 div2 标签，可以利用一下代码实现一左一右显示：

     div{
 	width:20px;
 	height:20px;
 	border:1px red solid;
 }

 #div1{float:left}
 #div2{float:right}

 以上代码可以显示挨在一块的 `div1` 和 `div2` 两标签并排并一左一右显示。

  3. 层模型(layer)

    类似 Photoshop 中非常流行的图层编辑功能，层模型可以实现将元素显示在网页上的任何位置，CSS 定义了一组定位属性来支持元素的层模型精准定位。

    层模型一共有 3 种形式：

    ① 绝对定位(position:absolute)

    ② 相对定位(position:relative)

    ③ 固定定位(position:fixed)

    其中：

    绝对定位：可以将元素从文档流中拖出来，然后使用 left right top bottom 属性相对于其最接近的一个具有定位属性的父包含块进行绝对定位。如果没有这样的包含块，则相对于 body 元素，即浏览器窗口。如下定义：

     div{
 	width:200px;
 	height:200px;
 	border:1px solid red;
 	position:absolute;
 	left:100px;
 	top:50px;
 }

 /* 将 div 标签定义为宽高都是200px且距离父元素左边距100px上边距50px的元素 */

    相对定位：实际上是相对于以前的位置进行重新定位。absolute表里如一，移动了就是移动了。relative只是表面显示移动了，但实际还在文档流中原有位置，别的元素无法占据。

    固定定位：在浏览器的固定位置，不会随着浏览器窗口滚动条的滚动而变化。

posted @ 2018-01-04 20:34  蚂蚁有毒  阅读(148)  评论(0)  编辑  收藏  举报