CSS基础

zoukankan html css js c++ java

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; /*设置为内敛块状元素*/ 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-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{ 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{ 20px; height:20px; border:1px solid red; float:left; }
  
  以上 CSS 代码的效果是：两个 div 标签并排显示。若有 div1 和 div2 标签，可以利用一下代码实现一左一右显示：
  
  div{ 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{ 200px; height:200px; border:1px solid red; position:absolute; left:100px; top:50px; } /* 将 div 标签定义为宽高都是200px且距离父元素左边距100px上边距50px的元素 */
  
  相对定位：实际上是相对于以前的位置进行重新定位。absolute表里如一，移动了就是移动了。relative只是表面显示移动了，但实际还在文档流中原有位置，别的元素无法占据。
  
  固定定位：在浏览器的固定位置，不会随着浏览器窗口滚动条的滚动而变化。
查看全文

相关阅读:
2、selinux服务的操作
 1、添加nginx到全局变量中
 linux每日命令(1)：which
QT重载基类绘制函数并在基类绘制结果基础上进行子类的绘制
 QT信号槽无法正常通信的原因
 mapgis6.7+加密狗+二次开发SDK库
 KMP算法参考及C语言实现
 elastic search
RabbitMq docker集群
 RabbitMq安装

原文地址：https://www.cnblogs.com/myyd/p/8195764.html

1. 概述

2. 语法

3. CSS 样式基本知识

4. 选择器

5. 继承、层叠和特殊性

6. 格式化排版

6.1 文字排版

6.2 段落排版

7. 盒模型

7.1 元素介绍

7.2 盒子模型

8. CSS 布局