css选择器

基础选择器	作用	特点	使用情况	用法
标签选择器	可以选出所有相同的标签，比如p	不能差异化选择	较多	`p{color:red;}`
类选择器	可以选出1个或者多个标签	可以根据需求选择	非常多	`.nav { color:red;}`
id选择器	一次只能选择1个标签	ID属性只能在每个HTML文档中出现一次	一般和js搭配	`#nav {color:red;}`
通配符选择器	选择所有的标签	选择的太多，有部分不需要	特殊情况使用	`*{color:red;}`

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        /* 所有元素都没有边距 */
        margin: 0;
        padding: 0;
      }
      p {
        color: red;
      }
      .font20 {
        font-size: 20px;
      }
      .blue {
        color: blue;
      }
      #abc {
        font-size: 30px;
        color: blueviolet;
      }
    </style>
  </head>
  <body>
    <p>这是一个标签选择器的例子</p>
    <div class="font20 blue">这是一个类选择器的例子</div>
    <span id="abc">这是一个id选择器的例子</span>
  </body>
</html>

一个标签可以有多个类,中间用空格隔开
一个标签只能有一个id,一个id也只能对应一个标签.

可以理解为class就是名字,id就是身份证号.

字体

字体选择

css用font-family属性定义文本的字体

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
  <style>
    p {
      font-family: "宋体",'Mircrosoft YaHei';
    }
    div {
      /* font-family: "Microsoft　YaHei", Arial, Helvetica, sans-serif; */
      font-family: "Times New Roman", Times, serif;
    }
  </style>
</head>
<body>
  <p>这是一个段落标签</p>
  <div>六六六</div>
</body>
</html>

可以在font-family里定义多个字体,用逗号隔开,浏览器会依次使用,如果第一个字体里没有这个字符,就会使用第二个字体,以此类推,如果都没有,则使用浏览器的默认字体
一般情况下,例如"Microsoft YaHei"包含多个单词的字体,在两侧加上引号
一般定义在body里面body {font-family: "宋体", "Times New Roman", Times, serif;}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      body {
        font-family: "宋体", "Times New Roman", Times, serif;
        font-size: 20px;
      }
      /* 标题标签比较特殊,需要单独指定文字大小 */
      h1 {
        font-size: 20px;
      }
    </style>
  </head>
  <body>
    <h1>一级标签</h1>
    <p>这是一个段落标签</p>
    <div>六六六</div>
  </body>
</html>

标题标签比较特殊,需要单独指定大小
chrome浏览器默认文字大小为16px
不同浏览器默认文字大小可能不同,手动指定一个像素值,保证一致
和font-family类似,可以直接使用body,指定整个页面的文字大小

字体粗细

css使用font-weight指定文字的粗细

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      body {
        font-weight: 400;
      }
      h1 {
        font-weight: 400;
      }
    </style>
  </head>
  <body>
    <p>一二三四五六</p>
    <h1>一级的标题</h1>
  </body>
</html>

属性值有normal(默认值),bold(粗体),100-900等,
日常使用可以使用数字的形式,(normal是400,bold是700),后面不需要跟单位
在body里指定不影响标题标签,标题标签需要单独指定

文字样式

css使用font-style属性设置文本风格
属性值有normal,默认值,italic,斜体

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      body {
        font-style: italic;
      }
      em {
        font-style: normal;
      }
    </style>
  </head>
  <body>
    <p>一二三四五六</p>
    <em>倾斜的文字</em>
  </body>
</html>

注意: 平时很少给文字加斜体,反而要给斜体标签(em,i)改为不倾斜的字体

字体复合属性

字体属性可以把文字样式综合来写，这样可以更节约代码
body{font: font-style font-weight font-size/line-height font-family;}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      p {
        font: italic 200 20px "宋体";
      }
      div {
        font: 15px "宋体";
      }
    </style>
  </head>
  <body>
    <p>一二三四五六</p>
    <div>你好</div>
  </body>
</html>

必须严格按照上面的顺序书写,顺序不能更换
各个属性使用空格隔开
不需要的属性可以省略(取默认值),但是必须保留font-size和font-family属性,否则font属性将不起作用.

文本属性

文本颜色

使用color属性定义文本的颜色
div{color:red;}
属性值有预定义的颜色,如"blue","red"等,也可以使用十六进制,如#ff0000,还可以使用RGB代码,如rgb(255,0,0)或者rgb(100%,0%,0%),常用的是十六进制.

对齐文本

使用text-align属性定义对齐方式.
属性值有left(默认值),right(右对齐),center(居中对齐)

装饰文本

使用text-decoration属性添加文本装饰

属性值	描述
none	默认值,没有装饰线(最常用)
underline	下划线,链接a自带下划线(常用)
overline	上划线(几乎不用)
line-through	删除线(不常用)

文本缩进

使用text-indet属性控制缩进
属性值可以设置为20px,以像素为单位,也可以设置为2em,以em为单位
em是一个相对单位,就是当前元素一个文字的大小,如果当前元素没有设置大小,则会按照父元素的一个文字大小.

文本行间距

使用line-height属性控制行间距,行间距是上间距+文本高度+下间距.所以我们修改的是上下间距.
属性值以像素为单位,例如20px.

css引入方式

内部样式表

内部样式表（内嵌样式表）是写到html页面内部.是将所有的CSS代码抽取出来，单独放到一个<style>标签中。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      div {
        color: red;
        font-size: 20px;
      }
    </style>
  </head>
  <body>
    <div>你好,世界.</div>
  </body>
</html>

style标签理论上可以放到任何地方,但是我们一般放在head标签上方
通过此种方式，可以方便控制当前整个页面中的元素样式设置
代码结构清晰，但是并没有实现结构与样式完全分离

行内样式表

行内样式表（内联样式表）是在元素标签内部的style属性中设定CSS样式。适合于修改简单样式.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      div {
        color: red;
        font-size: 20px;
      }
    </style>
  </head>
  <body>
    <div>你好,世界.</div>
    <p style="color: blue; font-size: 20px">
      #返回 NotPackedException: not packed by UPX → 文件没有被 UPX
    </p>
  </body>
</html>

style其实就是标签的属性
在双引号中间，写法要符合CSS规范
可以控制当前的标签设置样式
由于书写繁琐，并且没有体现出结构与样式相分离的思想，所以不推荐大量使用，只有对当前元素添加简单样式的时候，可以考虑使用
使用行内样式表设定CSS，通常也被称为行内式引入

外部样式表

实际开发都是外部样式表.适合于样式比较多的情况.核心是：样式单独写到CSS文件中，之后把CSS文件引入到HTML页面中使用.
引入外部样式表分为两步：

新建一个后缀名为.css的样式文件，把所有css代码都放入此文件中。

在HTML页面中，使用标签引入这个文件。<link rel="stylesheet" href="css文件路径">
一个style.css文件

div{
 color:pink;
 font-size:20px;
}

一个index.html文件

<!DOCTYPE html>
<html lang="en">
  <head>
 <meta charset="UTF-8" />
 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 <title>Document</title>
 <link rel="stylesheet" href="style.css" />
  </head>
  <body>
 <div>你好,世界.</div>
  </body>
</html>

Html笔记-3-CSS基础语法