CSS的使用

外链
嵌入
内联

<!-- 外链 -->
<link rel="stylesheet" href="/assets/style.css">

<!-- 嵌入 -->
    <style>
        li {
            margin: 14px;
            list-style: none;
        }
        p {
            margin: 1em 0;
        }
    </style>
    
<!-- 内联 -->
    <p style="margin: 1em 0">Example Content</p>

CSS的代码风格

CSS基础选择器

选择器作用

根据不同需求把不同的标签选出来，简单来说，就是选择标签用的

选择器分类

选择器分为基础选择器和复合选择器两大类
基础选择器是由单个选择器组成的，包括 标签选择器、类选择器、id选择器 和 通配符选择器

标签选择器

指用HTML标签名称作为选择器，按标签名称分类

<style>
/*标签为 <p> */
p {
    color: pink;
  }
</style>

标签选择器的作用

标签选择器可以把某一类标签全部选择出来，比如所有的< div >标签和所有的< span >标签

标签选择器的优点

能快速为页面中同类型的标签统一设置样式

标签选择器的缺点

不能设计差异化样式，只能选择全部的当前标签

类选择器

可以差异化选择一个或多个不同的标签

语法

结构需要用class属性来调用 class 类的意思

< div class='red'>变红色< /div>

<head>
<style>
    .red {
          color: red;
    }
</style>
</head>
    
<body>
<ul>
    <li class="red">我在学CSS</li>
</ul> 
</body>

注意:

类选择器使用“ . "(英文点号)进行标识，后面紧跟类名(自定义，我们自己命名的).
可以理解为给这个标签起了一个名字，来表示.
长名称或词组可以使用中横线来为选择器命名.
不要使用纯数字、中文等命名尽量使用英文字母来表示.
命名要有意义，尽量使别人一眼就知道这个类名的目的.

类选择器——多类名

<div class="glory of kings Arthur">亚瑟</div>
<div class="glory of kings Dakki">妲己</div>
<div class="glory of kings Angela">安琪拉</div>

各个类名中间用空格隔开
简单理解:就是给某个标签添加了多个类，或者这个标签有多个名字
这个标签就可以分别具有这些类名的样式
从而节省CSS代码，统一修改也非常方便
多类名选择器在后期布局比较复杂的情况下，还是较多使用的

<style>
    /*一旦改变box的数据，三个div盒子都会跟着改变*/
    .box {
          width: 150px;
          height: 150px;
          font-size: 30px;
    }
    .red {
          background-color: red;
    }
    .green {
          background-color: green;
    }
    .pink {
          background-color: pink;
    }
</style>
    
<body>
    <div class="box red">红色</div>
    <div class="box green">绿色</div>
    <div class="box pink">粉色</div>
</body>

id选择器

HTML元素以id属性来设置id选择器，CSS中id选择器以“ # ”来定义

<style>
 #howard {
       color: pink;
    }   
</style>
<body>
  <div id="howard">Howard·At</div>    
</body>

注意：

id选择器只能调用一次，如果前面已经调用过，则无法再调用！

id选择器和类选择器的区别

类选择器(class)好比人的名字个人可以有名字，同时一个名字也可以被多个人使用。
id选择器好比人的身份证号码，全中国是唯一的，不得重复
id洗择器和类选择器最大的不同在于 使用次数 上。
类选择器在修改样式中用的最多，id选择器一般用于页面唯一性的元素上，经常和JavaScript搭配使用

通配符选择器

<head>
<style>
    * {
          color: red;
    }
    /*这里把html body div span li都变成了红色*/
</style>
</head>
    
<body>
    <div>我的</div>
    <span>我的</span>
    <ul>
    <li>还是我的</li>
</ul> 
</body>

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

CSS的字体属性

CSS Fonts(字体)属性用于定义字体系列、大小、粗细和文字样式（如斜体）

字体系列

CSS使用 font-family 属性定义文本的字体系列

    p{
      font-family:"微软雅黑";
    }
    div{
      font-family:Arial,"Microsoft yahei","微软雅黑";
    }

各种字体之间必须使用英文状态下的逗号隔开.
一般情况下，如果有空格隔开的多个单词组成的字体，加引号.
尽量使用系统默认自带字体，保证在任何用户的浏览器中都能正确显示.
常见的几个字体:body{font-family;'Microsoft YaHei',tahoma,arial,'Hiragino Sans GB';}

字体的粗细

使用 font-weight 属性设置文本字体的粗细

    p {
       font-weight: bold;
    }

加粗用bold，变细用normal,也可用数字100~900（注意后面没有单位）

文字样式

斜体：italic

p {
    /*一般是把斜体改回来*/
    font-style: normal;
    }

字体复合属性

合成一行，顺序不能颠倒！！！

顺序：font: font-style font-weight font-size/line-weight font-family;

    body {
          font: italic 700 16px 'Microsoft yahei'；
    }

可以简写，但必须有 font-size和font-family 两个元素

CSS的文本属性

文本的颜色

 div {
      color: red;/*预定义的颜色值*/
      color: #ff0000;/*16进制（开发中用的最多）*/
      color: rgb(200,0,0)/*RGB代码*/
    }

对齐文本

text-align属性用于设置元素内文本内容的水平对齐方式

div{
    text-align: center;
    }

左对齐（默认值）：left
右对齐：right
居中：center

装饰文本

text-deroration属性规定添加到文本的修饰。可以给文本添加下划线、删除线、上划线等等

    div {
         text-deroration: underline;
    }

none 默认，没有装饰线 underline 下划线（链接a自带下划线） overline 上划线（几乎不用） line-through 删除线（不常用）

文本缩进

text-indent 属性用来指定文本的第一行缩进，通常是将段落的首行缩进

    div{
        text-indent:10px;/*长度甚至可以是负值*/
    }

    p{
      text-indent: 2em;/*首行缩进两字符*/
    }

em：当前元素一个文字的大小

如果元素没有设置大小，则会按照父元素的一个文字大小

行间距

line-height属性用于设置行间的距离（行高），可以控制行与行之间的距离

当行高大于文字高度时，多出来的高度向上下间距平均分配

CSS的引入方式

内部样式表

将CSS代码写到HTML文档的< style >标签中

    <style>
    ......
    ......
    </style>

行内样式表

在元素内部的style属性中设定CSS样式

    <div style ="color: red;font-size: 12px;">我在认真学习CSS</div>

也称 行内式引入

外部样式表

样式单独写到CSS文件中，之后使用< link > 标签引入HTML文件使用

也称为外链式或链接式引入，是开发中常用的方式

CSS基础学习|集创考核第1篇笔记