CSS 基础

Nian糕

修改于 2024-03-23 11:27:58

3.2K0

修改于 2024-03-23 11:27:58

层叠样式表 (Cascading Style Sheets)，一种用来为结构化文档（如 HTML 文档或 XML 应用）添加样式（字体、间距和颜色等）的计算机语言

CSS 的三种引入方式

头部引入，通过在 head 使用 <style> 标签引入，优点：结构样式分离，减少 http 请求的次数，一般用在访问量高大型网站；缺点：CSS 文件不能缓存

<style type="text/css">
  body {
    color: red;
    font-size:32px;
  }
</style>

内联引入，又称行内引入，通过元素的 style 属性添加，不推荐使用这种方式，一般只用在需要使用特殊样式的某些元素上，优点：这样添加的 css 属性的优先级比其他两种方式的要高；缺点：结构跟样式没有分离，只能控制当前 style 属性的单一元素

<h1 style="color:red;font-size:32px;"></h1>

外部引入，通过在 head 使用 <link> 标签外链外部 css 文件，推荐的使用方式，结构样式分离，易于修改维护，优点：CSS 文件能够缓存在浏览器；缺点：增加请求次数

<link rel="stylesheet" href="text/css" href="css/test.css">

若是通过 3 种方式添加的同一元素，同一属性，值不一样的时候，哪个会生效？我们可以试一下

/*text.css文件内的代码*/
body {
  background-color: red;
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>CSS引入</title>
  <link rel="stylesheet" type="text/css" href="css/test.css">
  <style type="text/css">
    body {
      background-color: blue;
    }
  </style>
</head>
<body style="background-color: green;">
  <div>html5</div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>CSS引入</title>
  <link rel="stylesheet" type="text/css" href="css/test.css">
  <style type="text/css">
    body {
      background-color: blue;
    }
  </style>
</head>
<body>
  <div>html5</div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>CSS引入</title>
  <style type="text/css">
    body {
      background-color: blue;
    }
  </style>
  <link rel="stylesheet" type="text/css" href="css/test.css">
</head>
<body>
  <div>html5</div>
</body>
</html>

结论：内联样式的优先级最大，选择器一样的情况下，后定义的相同 css 属性会覆盖前面定义的，后面的样式生效

CSS 选择器

CSS 选择器的书写格式为：选择器 + 大括号，大括号里面书写 css 属性样式，键值对 key : value 以冒号 : 分隔，每条属性之间要用分号 ; 分隔

body {
  background-color:red;   // 背景颜色为红色
  color: white;  // 字体颜色为白色
}

而 CSS 选择器类型一般有三种，分别是 标签选择器、ID 选择器 和 类选择器，需要注意的是，ID 选择器以 # 号开头，id 值在同一个 HTML 页面是唯一的，不能重复，相当于元素的身份标识，id 属性的设置，不能以数字开头，中间不要出现空格；而类选择器，则是以 . 号开头，可以重复使用，并且同一元素能够添加多个 class，不能以数字开头

优先级：内联样式 > id 选择器 > class 选择器 > 标签选择器

body {
  height: 2000px;
}

#box {
  color:red;
}
<div id="box"></div>
<div id="box1"></div>  /*第二个div的id只能设为box1*/

.box {
  color:red;
}
<div class="box"></div>

基本 CSS 属性设置

font 字体

字体的属性一般包括字体大小、字体颜色、字体类型、字体样式，在浏览器中，其默认的字体大小为 16 px 或 18 px，Chrome 浏览器下默认的字体大小为 18 px

div {
  font-size: 16px;
  color:blue;
}

arial 是 Windows 系统下的默认字体，能够友好显示字母数字；helvetica 是 Mac 系统下的默认字体，如果是英文使用 arial，中文使用微软雅黑 Microsoft Yahei，则可以先寻找 helvetica 字体，如果没有就使用下一种字体，在都没有的情况下，才使用操作系统自带的默认字体，如下所示

font-family:helvetica,arial,"Microsoft Yahei"

font-style 字体样式

font-style:italic;  /*文本文字倾斜*/
font-style:normal;  /*默认值，可将斜体取消*/

font-weight 字磅，该属性用于设置显示元素的文本中所用的字体加粗

font-weight:linghter;  /*更细*/
font-weight:normal;  /*默认值=500*/
font-weight:bolder;  /*更粗*/

line-height 行高，设置行间的距离，一般设置成 1.2 或 1.5

line-height:1.2;
line-height:1.5;

字符大小为 12 px，行高则为字符高度的 1.5 倍

font-size: 12px;
line-height: 1.5;

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>CSS选择器</title>
  <style type="text/css">
    div {
      font-size: 24px;
      color: blue;   
    }
    i {
      font-style: normal;
    }
    p {   
      font-family: helvetica, arial, "Microsoft Yahei";
      font-style: italic;
      font-weight: lighter;
      line-height: 1.5;
    }
  </style>
</head>
<body>
  <div>Lorem ipsum dolor sit. <i>html5</i></div>
  <p>html5 是html的第五个演进版本</p>
</body>
</html>

text 文本

text-align 属性，规定元素中的文本的水平对齐方式，该属性只给块元素设置，行元素设置没效果，该属性的值为 center / left / right，可以设置块元素里面文本和图片的对齐方式

text-indent 属性，规定文本块中首行文本的缩进

p
  {
    text-indent:50px;
  } //将段落的第一行缩进50像素

line-height 属性，设置行间的距离（行高），可以设置单行文本的竖直居中

line-height: 90%; //百分比，基于当前字体尺寸的百分比行间距
line-height: 0.5;  //数值，设置数字，此数字会与当前的字体尺寸相乘来设置行间距
line-height: 10px;  //像素值，设置固定的行间距

text-decoration 属性，规定添加到文本的修饰，该属性的值为 none / underline，none 为默认值，定义标准的文本

h1 {
  text-align: center;
}
div {
  text-indent: 2em;
  font-size: 10px;
}
p {
  text-indent: 2em;
  text-decoration: underline;
  line-height: 20px;
}
a {
  text-decoration: none;
}

<h1>Nian糕</h1>
<div>
  <span>Nian糕</span>
  <!-- 行元素可以通过块元素的嵌套来达到文本的水平对齐方式 -->
</div>
<div>
  <p>
    富强民主文明和谐，自由平等公证法制，爱国敬业诚信友善;
    富强民主文明和谐，自由平等公证法制，爱国敬业诚信友善;
    富强民主文明和谐，自由平等公证法制，爱国敬业诚信友善;
    富强民主文明和谐，自由平等公证法制，爱国敬业诚信友善;
    富强民主文明和谐，自由平等公证法制，爱国敬业诚信友善;
  </p>
</div>
<a href="###">Nian糕</a>

关于 em 与 px 之间的转换问题，em 是一个相对单位，是相对父级的字体大小来设置的，1em = 父级的字体尺寸，若父级的字体尺寸为 18px，则 1em=18px，1.5em=27px

background 背景

background-color 属性，设置元素的背景颜色属性为元素设置一种纯色，这种颜色会填充元素的内容、内边距和边框区域，扩展到元素边框的外边界（但不包括外边距），如果边框有透明部分（如虚线边框），会透过这些透明部分显示出背景色

background-color 的值有一般三种设置方式：① 关键字，颜色名称的背景颜色，比如 red；② 16 进制值的背景颜色，比如 #ff0000；③ RGB 三原色代码的背景颜色，比如 rgb(255,0,0)

·background-image· 属性，为元素设置背景图像，元素的背景占据了元素的全部尺寸，包括 内边距 和边框，但不包括外边距

background-color: red;
background-image:url();  /*指向图像的路径*/

background-repeat 属性，设置是否及如何重复背景图像，默认地，背景图像在水平和垂直方向上重复

background-repeat:no-repeat/repeat-x/repeat-y;

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

background-position 属性，设置背景图像的起始位置

background-position:center/top/right/bottom/left;

该属性的值也可以使用百分比，第一个值是水平方向上的（即 x 轴），第二值是竖直方向上的（即 y 轴），如果只规定了一个关键词，那么第二个值将默认是 center

background-position: 75% 100%;  /*默认值：0% 0%*/

background-attachment 属性，设置背景图像是否固定或者随着页面的其余部分滚动

background-attachment:fixed;  /*背景图固定在窗口，以浏览器窗口为参考基准*/

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

body {
  background-color: blue;
  background-image: url(img/1.png);
  background-repeat: no-repeat;
  background-position: 75% 100%;
  background-attachment: fixed;
  }

等价于

body {
  background: blue url(img/1.png) no-repeat 75% 100% fixed;
}

background-size 规定背景图像的尺寸，一共有两个值，第一个值设置宽度（水平方向），第二个值设置高度（竖直方向），默认值为 auto，该属性属于 CSS 3 属性，IE9 以下，不支持该属性

background-size: length/percentage/cover/contain;

值	描述
length	设置背景图像的高度和宽度，如果只设置一个值，则第二个值会被设置为 "auto"
percentage	以父元素的百分比来设置背景图像的宽度和高度，如果只设置一个值，则第二个值会被设置为 "auto"
cover	把背景图像扩展至足够大，以使背景图像完全覆盖背景区域，背景图像的某些部分也许无法显示在背景定位区域中
contain	把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域

div {
  width: 400px;
  height: 200px;
  background:#83905c url("img/1.png") no-repeat;
  background-size:cover;
}

<div></div>

div {
  width: 400px;
  height: 200px;
  background:#83905c url("img/1.png") no-repeat;
  background-size:contain;  <!-- contain === 100% auto / auto 100% -->
  border:1px solid red;
}

<div></div>

简写方式

background:blue url("img/1.png") no-repeat 50% 50%;
border:1px solid red;

一般来说，图片是跟内容相关的，具有具体信息的，就使用 <img> 标签进行引入，若是装饰性的，没有实质内容的，就使用 css 属性背景 background 引入

padding 内边距

四个方向： top / right / bottom / left

padding:10px 5px 15px 20px;

上内边距是 10px，右内边距是 5px，下内边距是 15px，左内边距是 20px

padding:10px 5px 15px;

三个值的时候，第一个表示的是 top，第二个表示的是 right / left，第三个表示的是 bottom，上内边距是 10px，右内边距和左内边距是 5px，下内边距是 15px

padding:10px 5px;

两个值的时候，第一个表示竖直方向上的 top / bottom，第二个表示水平方向上的 right / left，上内边距和下内边距是 10px，右内边距和左内边距是 5px

padding:10px;

设置成一个值，表示四个方向都是相同的值，所有 4 个内边距都是 10px

box 盒模型

盒模型主要由 margin + border + padding + content 四个部分组成

margin 简写属性在一个声明中设置所有外边距属性

border 简写属性在一个声明设置所有的边框属性

padding 简写属性在一个声明中设置所有外边距属性

content 属性与 :before 及 :after 伪元素配合使用，来插入生成内容

border-style 属性，用于设置元素所有边框的样式，或者单独地为各边设置边框样式，只有当这个值不是 none 时边框才可能出现

border-style:dotted solid double dashed;  //上边框是点状，右边框是实线，下边框是双线，左边框是虚线

border-color 属性，设置四条边框的颜色

border-color:red green blue pink;  //上边框是红色，右边框是绿色，下边框是蓝色，左边框是粉色

border-width 属性，为元素的所有边框设置宽度，或者单独地为各边边框设置宽度，只有当边框样式不是 none 时才起作用，如果边框样式是 none，边框宽度实际上会重置为 0

border-width:thin medium thick 10px;  //上边框是细边框，右边框是中等边框，下边框是粗边框，左边框是 10px 宽的边框

border 简写属性在一个声明设置所有的边框属性，属性设置顺序为：border-width、border-style、border-color，如果不设置其中的某个值，也不会出现任何问题，比如 border:solid #ff0000;

border-width:1px;
border-style:solid;
border-color:red;

等价于

border:1px solid red;

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>border</title>
  <style type="text/css">
    div {
      width: 100px;
      height: 100px;
      border: 1px solid red;
      /*border-width: 10px;
      border-style:  solid;
      border-color: red;*/
      border-style: dotted;   
    }
    p {
      width: 100px;
      height: 100px;
      border-bottom: 2px solid red;
    }
    h1 {
      width:0;
      height:0;
      border: 30px solid red;
      border-left-color: transparent;
      border-bottom-color: transparent;
      border-right-color: transparent;
    }
  </style>
</head>
<body>
    <div></div>
    <p></p>
    <h1></h1>
</body>
</html>

background-color 属性是从盒模型的 border 部分开始生效的？

#wrap {
  width: 240px;
  height: 240px;
  line-height: 240px;
  text-align: center;
  background-color: lightgrey;
  font-family: "Microsoft Yahei";
  font-size: 32px;
  color: coral;
  padding: 3px 5px 8px;
  border: 10px dashed lightblue;
  margin: 8px 10px;
}

<div id="wrap">Nian糕</div>

从上图我们可以知道，background-color 属性是从盒模型的 border 部分开始生效的

a 伪类，用于向某些选择器添加特殊的效果

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>伪类a</title>
  <style type="text/css">
    a {
      color: black;
    }
    #alink:hover {
      color: red;
      background-color: blue;
    }
    .alink:hover {
      color: yellow;
      background-color: green;
    }
    p {
      color: green;
    }
    #param {
      color: yellow;
    }
    .param {
      color: blue;
    }
    </style>
</head>
<body>
  <a href="###">html5</a>
  <a href="###" id="alink" class="alink">css3</a>
  <a href="###" class="alink">javascript</a>
  <p style="color:red" id="param" class="param">lorem</p>
</body>
</html>

将光标移动到内容上，将会显示我们所定义的样式