高亮的博客

# 选择器

# 标签选择器

写HTML标签

<body>
    <p>p标签</p>
</body>

<style>
    p {
        color: red;
    }
</style>

# 类选择器

结构需要用class属性来调用class类的意思 语法：.类型{xxx}

<body>
    <p class="p">p标签</p>
</body>

<style>
    .p {
        color: red;
    }
</style>

# id选择器

id选择器可以为标有特定id的HTML元素指定特定的样式。
HTML元素以id属性来设置id选择器，CSS中id选择器以“#"来定义。
语法：

#id名 {  
    属性1: 属性值1;    
}

注意：id 属性只能在每个 HTML 文档中出现一次

<body>
    <p id="red">p标签</p>
</body>

<style>
    #red {
        color: red;
    }
</style>

# 通配符选择器

语法：

* {
    属性1: 属性值1;  
    ...
}

通配符选择器不需要调用， 自动就给所有的元素使用样式，特殊情况才使用

<body>
    <p>标签</p>
    <div>div</div>
    <span>span</span>
</body>

<style>
    * {
        color: red;
    }
</style>

# 字体

# font-family

CSS使用font-family属性定义文本的字体系列。 多个之间逗号隔开，字体之间有特殊字符使用字符串拼写

<body>
    <p>标签</p>
    <div>div</div>
    <span>span</span>
</body>

<style>
    * {
        font-family: 华文宋体, 宋体, 楷书, "Microsoft Himalaya";
    }
</style>

# font-size

CSS使用font-size属性定义字体大小。

<body>
    <p>标签</p>
    <div>div</div>
    <span>span</span>
</body>

<style>
    * {
        font-size: 100px;
    }
</style>

# font-weight

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

<body>
    <p>标签</p>
    <div>div</div>
    <span>span</span>
</body>

<style>
    * {
        font-weight: bold;
    }
</style>

# font-style

CSS使用font-style属性设置文本的风格。

属性值 作用
normal 默认值，浏览器会显示标准的字体样式font-style:normal;
italic 浏览器会显示斜体的字体样式。
<body>
    <p>标签</p>
    <div>div</div>
    <span>span</span>
</body>

<style>
    * {
       font-style: italic;
    }
</style>

# 文本属性

# color

表示 属性值
预定义的颜色值 red,green,blue,还有我们的御用色pink
十六进制 #FF0000,#FF6600,#29D794
RGB代码 rgb(255,0,0)或rgb(100%,0%,0%)
<body>
    <p>标签</p>
    <div>div</div>
    <span>span</span>
</body>

<style>
    * {
       color: red;
    }
</style>

# text-align

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

属性值 解释
left 左对齐（默认值）
right 右对齐
center 居中对齐
<body>
    <p>标签</p>
    <div>div</div>
    <span>span</span>
</body>

<style>
    * {
     text-align: center;
    }
</style>

# text-transform 首字母大写

  • capitalize：每个单词首字母大写
  • lowercase: 变小写
<style>
   span {
      text-transform: capitalize;
   }
</style>

# text-decoration

text-decoration.属性规定添加到文本的修饰。可以给文本添加下划线、删除线、上划线等。 |属性值|描述| |none|默认。没有装饰线(最常用)| |underline|下划线。链接a自带下划线（常用）| |overline|上划线。(几乎不用)| |line-through|删除线。(不常用)|

<body>
    <p>标签</p>
    <div>div</div>
    <span>span</span>
</body>

<style>
    * {
        text-decoration: underline;
    }
</style>

# text-indent

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

<body>
    <p>人类行为是人类在生活中表现出来的生活态度及具体的生活方式，它是在一定的物质条件下，不同的个人或群体，在社会文化制度、个人价值观念的影响下，在生活中表现出来的基本特征，或对内外环境因素刺激所做出的能动反应。</p>
    <p>
        行为是指一个人或动物在特定情境下所表现出的行动、动作、态度以及思想等方面的表现。 行为往往受到外在环境和内在因素的影响，这些因素包括文化、社会、心理、生物等方面。 行为是人类社会交往中最基本的表现形式，是我们了解和认识别人的重要途径之一，同时也是我们判断、评价和影响他人的重要方式之一。

        行为包含了我们的动作、语言和表情等方面，都是我们与别人沟通和交流的方式，也是我们心理和情感状态的表现形式。例如，一些健康的行为习惯，比如坚持锻炼、良好的饮食习惯等，能够帮助我们维持身体健康和保持良好的心理状态；而一些不良的行为习惯，比如抽烟、喝酒、吸毒等，则会对身体健康和心理健康造成负面影响。

        行为是一个个体进行日常学习、工作、生活时所表现出的思想和行动，一种我们沟通和交流的方式。同时，行为也是我们在社会中互相协调、合作和竞争的方式之一。我们的行为表现将影响我们和别人之间的关系，决定着我们在社会中的地位和角色。

        最后，行为也是一种生命的过程，它既可以短暂而微不足道地发生，也可以在一段长时间内被积蓄和积累。行为的后果可能是积极的，也可能是消极的，因此，我们的行为应该始终以正确的方式表达我们的思想和行为，以避免造成任何不必要的破坏和伤害。
    </p>
</body>

<style>
    p {
        text-indent: 20px;
    }
</style>

# word-wrap 文字换行

  • break-word 英文换行
<style>
   span {
      word-break: break-word;
   }
</style>

# white-space 文字不换行

  • nowrap 不换行
<style>
   span {
      white-space: nowrap;
   }
</style>

# line-height

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

<body>
    <p>人类行为是人类在生活中表现出来的生活态度及具体的生活方式，它是在一定的物质条件下，不同的个人或群体，在社会文化制度、个人价值观念的影响下，在生活中表现出来的基本特征，或对内外环境因素刺激所做出的能动反应。</p>
    <p>
        行为是指一个人或动物在特定情境下所表现出的行动、动作、态度以及思想等方面的表现。 行为往往受到外在环境和内在因素的影响，这些因素包括文化、社会、心理、生物等方面。 行为是人类社会交往中最基本的表现形式，是我们了解和认识别人的重要途径之一，同时也是我们判断、评价和影响他人的重要方式之一。

        行为包含了我们的动作、语言和表情等方面，都是我们与别人沟通和交流的方式，也是我们心理和情感状态的表现形式。例如，一些健康的行为习惯，比如坚持锻炼、良好的饮食习惯等，能够帮助我们维持身体健康和保持良好的心理状态；而一些不良的行为习惯，比如抽烟、喝酒、吸毒等，则会对身体健康和心理健康造成负面影响。

        行为是一个个体进行日常学习、工作、生活时所表现出的思想和行动，一种我们沟通和交流的方式。同时，行为也是我们在社会中互相协调、合作和竞争的方式之一。我们的行为表现将影响我们和别人之间的关系，决定着我们在社会中的地位和角色。

        最后，行为也是一种生命的过程，它既可以短暂而微不足道地发生，也可以在一段长时间内被积蓄和积累。行为的后果可能是积极的，也可能是消极的，因此，我们的行为应该始终以正确的方式表达我们的思想和行为，以避免造成任何不必要的破坏和伤害。
    </p>
</body>

<style>
    p {
        text-indent: 20px;
        line-height: 40px;
    }
</style>

# 样式表

# 内部样式表

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

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>小米官网</title>
    </head>

    <body>
    </body>

    <style>
    </style>
</html>

# 行内样式表

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

<body>
    <div style="background-color: red">div</div>
</body>

# 外部样式表

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>小米官网</title>
    <link rel="stylesheet" href="./外部样式表.css">
</head>

<body>
</body>

<style>
</style>
</html>

# 复合选择器

复合选择器是由两个或多个基础选择器，通过不同的方式组合而成的 常用的复合选择器包括：后代选择器、子选择器、并集选择器、伪类选择器等等

# 后代选择器

后代选择器又称为包含选择器，可以选择父元素里面子元素。其写法就是把外层标签写在前面，内层标签写在后面，中间用空格分隔。当标签发生嵌套时，内层标签就成为外层标签的后代。
语法： 元素1 元素2 { 样式声明 }

<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>

    <ol>
        <li>4</li>
        <li>5</li>
        <li>6</li>
    </ol>
</body>

<style>

    ul li {
        color: red;
    }
</style>

# 子元素选择器

子元素选择器（子选择器）只能选择作为某元素的最近一级子元素。简单理解就是选亲儿子元素

<body>
    <div class="parent">
        <p>儿子</p>
        <div>
            <p>孙子</p>
        </div>
    </div>
</body>

<style>
    .parent > p {
        color: red;
    }
</style>

# 并集选择器

并集选择器可以选择多组标签同时为他们定义相同的样式。通常用于集体声明，使用逗号之间连接

    <body>
        <div>
            <p class="zs">zhangsan</p>
            <p class="ls">lisi</p>
            <div>
                <p class="ww">wangwu</p>
                <p class="zl">zhaoliu</p>
            </div>
        </div>
      
    </body>

    <style>
        .zs,.zl {
            color: red;
        }
    </style>

# 伪类选择器

伪类选择器用于向某些选择器添加特殊的效果，比如给链接添加特殊效果，或选择第1个，第n个元素。
伪类选择器书写最大的特点是用冒号(：)表示，比如：hover、:first-child

  1. a:link
    选择所有未被访问的链接
  2. a:visited
    选择所有已被访问的链接
  3. a:hover
    选择鼠标指针位于其上的链接
  4. a:active
    选择活动链接（鼠标按下未弹起的链接）

# :focus伪类选择器

:focus伪类选择器用于选取获得焦点的表单元素。
焦点就是光标，一般情况<input>类表单元素才能获取，因此这个选择器也主要针对于表单元素来说。

    <body>
       <div>
            <input type="text" class="t"/>
       </div>
      
    </body>

    <style>
     
      .t:focus {
            border-color: red;
      }
    </style>

# 显示元素

# 块元素

  1. h1 - h6
  2. p
  3. div
  4. ul
  5. ol
  6. li

# 块级元素的特点：

  1. 比较霸道，自己独占一行。
  2. 高度，宽度、外边距以及内边距都可以控制。
  3. 宽度默认是容器（父级宽度）的100%。
  4. 是一个容器及盒子，里面可以放行内或者块级元素。

# 行内元素

  1. a
  2. strong
  3. b
  4. em
  5. i
  6. del
  7. s
  8. ins
  9. u
  10. span

# 行内块

  1. img
  2. input
  3. td

# 行内块元素的特点：

  1. 和相邻行内元素（行内块）在一行上，但是他们之间会有空白缝隙。一行可以显示多个（行内元素特点）。
  2. 默认宽度就是它本身内容的宽度（行内元素特点）。
  3. 高度，行高、外边距以及内边距都可以控制（块级元素特点）。 使用display转换
    <body>
       <div>

          <a href="#">快</a>
       </div>
      
    </body>

    <style> 
        a{
            display: block;
            width: 200px;
            height: 200px;
        }
    </style>

# 鼠标移入效果

<style>
   span {
      cursor: pointer;
   }
</style>

# 背景

# 背景颜色

background-color

<body>
    <a href="#">手机 电话卡</a>
</body>

<style> 
    a {
        background-color: #535758;
    }
</style>

# 背景图片

background-image

<body>
    <div></div>
</body>
<style> 
    div {
        background-image: url('a.png');
    }
</style>

# 平铺

background-repeat 属性：

  1. repeat:背景图像在纵向和横向上平铺
  2. no-repeat：背景图像不平铺
  3. repeat-x:背景图像在横向上平铺
  4. repeat-y:背景图像在纵向平铺

# 图片大小

background-size 宽 高 / 宽/高

<body>

    <div></div>
    
</body>

<style> 

    div {
        background-image: url('a.png');
        background-size: 20px 20px;
        /* 宽高都是20 */
        background-size: 20px;
        background-size: cover;
       /*    x/y 一遍拉满另一边不管   */
        background-size: contain;
    }

</style>

# 图片位置

background-position： x轴 y轴; 如果省略一个参数，则另一个自动是居中

参数值 说明
length 百分数 由浮点数字和单位标识符组成的长度值
position top、center、bottom 、left、center、right方位名词
<body>

    <div></div>
    
</body>

<style> 

    div {
        background-image: url('a.png');
        background-position: center top;
        background-position: 100px;
       background-position-x: 20px;
       background-position-y: 20px;;
    }

</style>

# 背景固定

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

参数 作用
scroll 背景图像是随对象内容滚动
fixed 背景图像固定
<body>

    <div class="a">
        成长守护平台
    </div>
    
</body>

<style> 
    .a {
        width: 300px;

        background-image: url("a.png");
        background-repeat: no-repeat;
        background-position: left;
        text-indent: 2em;
        background-attachment: scroll;
    }
</style>

# 颜色半透明

CSS3为我们提供了背景颜色半透明的效果。 background: rgba(0,0,0,3)
分别对应：r g b a，最后一个参数是 0-1之间

注意

背景半透明是指盒子背景半透明，盒子里面的内容不受影响 CSS3新增属性，IE9+版本浏览器才支持的

<body>

    <div class="a">
        成长守护平台
    </div>
    
</body>

<style> 
    .a {
        width: 200px;
        height: 200px;
        background-color: black;
        background: rgba(0, 0, 0, 0.3);
    }
</style>

# 三大特性

# 层叠性

相同选择器给设置相同的样式，此时一个样式就会覆盖（层叠）另一个冲突的样式。层叠性主要解决样式冲突的问题

# 层叠性原则：

  • 样式冲突，遵循的原则是就近原测，哪个样式离结构近，就执行哪个样式
  • 样式不冲突，不会层叠

# 继承性

CSS中的继承：子标签会继承父标签的某些样式，如文本颜色和字号。简单的理解就是：子承父业。

# 优先级

当同一个元素指定多个选择器，就会有优先级的产生。

选择器权重如下表所示。

选择器 选择器权重
继承或者* 0.0,0,0
元素选择器 0,0,0,1
类选择器，俩类选择器 0.0,1,0
ID选择器 0,1,0,0
行内样式style=" 1,0,0,0
!important重要的 无穷大

← 盒子模型 →