首页 > 其他分享 >css基础

css基础

时间：2023-06-04 11:13:14浏览次数：36  
标签：color 元素 基础 CSS 设置 选择器 css 属性

css2基础

CSS简介

全称为：层叠样式表 (Cascading Style Sheets)，用于给 HTML 结构设置样式，例如：文字大小、颜色、元素宽高等等。

简单理解： CSS 可以美化 HTML , 让 HTML 更漂亮。
核心思想： HTML 搭建结构， CSS 添加样式，实现了：结构与样式的分离。

基本使用介绍

CSS的编写位置

  • 行内样式

    书写繁琐、样式不能复用、并且没有体现出：结构与样式分离 的思想，不推荐大量使用，只有对当前元素添加简单样式时，才偶尔使用

  • 内部样式

    样式单文件可以复用、代码结构清晰，并没有实现结构与样式完全分离，多个 HTML 页面无法复用样式。

  • 外部样式

    样式可以复用、结构清晰、可触发浏览器的缓存机制，提高访问速度 ，实现了结构与样式的完全分离。实际开发中，几乎都使用外部样式，这是最推荐的使用方式！

<h1 style="color:red;font-size:60px;">css行内样式</h1>

<!-- 写在 html 页面内部，将所有的 CSS 代码提取出来，单独放在 <style> 标签中 -->
<style>
    h1 {
        color: red;
        font-size: 40px;
    }
</style>

<!-- 写在单独的 .css 文件中，随后在 HTML 文件中用 link 引入使用 -->
<link rel="stylesheet" href="./xxx.css">

样式表的优先级

优先级规则：行内样式 > 内部样式 = 外部样式

内部样式、外部样式，这二者的优先级相同，且：后面的会覆盖前面的（简记：“后来者居上”）。
同一个样式表中，优先级也和编写顺序有关，且：后面的会覆盖前面的（简记：“后来者居上”）。

CSS语法规范

CSS语法规范由两部分构成：

  • 选择器：找到要添加样式的元素
  • 声明块：设置具体的样式（声明块是由一个或多个声明组成的），声明的格式为：属性名: 属性值;

img

注释的写法：

/* 给h1元素添加样式 */
h1 {
    /* 设置文字颜色为红色 */
    color: red;
    /* 设置文字大小为40px */
    font-size: 40px
}

CSS代码风格

  • 展开风格 —— 开发时推荐，便于维护和调试

    h1 {
    color: red;
    font-size: 40px;
}

  • 紧凑风格 —— 项目上线时推荐，可减小文件体积

    h1{color:red;font-size:40px;}

项目上线时，我们会通过工具将【展开风格】的代码，变成【紧凑风格】，这样可以减小文件体积，节约网络流量，同时也能让用户打开网页时速度更快。

CSS选择器

CSS基本选择器

  1. 通配选择器
  2. 元素选择器
  3. 类选择器
  4. id选择器

通配选择器

作用：可以选中所有的HTML元素

/* 选中所有元素 */
* {
    color: orange;
    font-size: 40px;
}

目前来看通配选择器貌似有点鸡肋，清除样式时，会对我们有很大帮助

元素选择器

作用：为页面中某种元素统一设置样式

/* 选中所有h1元素 */
h1 {
    color: orange;
    font-size: 40px;
}
/* 选中所有p元素 */
p {
    color: blue;
    font-size: 60px;
}

元素选择器无法实现差异化设置，例如上面的代码中，所有的p元素效果都一样。

类选择器

作用：根据元素的 class 值，来选中某些元素

/* 选中所有class值为speak的元素 */
.speak {
    color: red;
}
/* 选中所有class值为answer的元素 */
.answer {
    color: blue;
}
  • 元素的class属性值不带.，但CSS的类选择器要带.
  • class值，是我们自定义的，按照标准：不要使用纯数字、不要使用中文、尽量使用英文与数字的组合，若由多个单词组成，使用-做连接，例如:left-menu ，且命名要有意义，做到 “见名知意”。
  • 一个元素不能写多个 class 属性，下面是 错误示例：
<!-- 该写法错误，元素的属性不能重复，后写的会失效 -->
<h1 class="speak" class="big">你好啊</h1>
  • 一个元素的class属性，能写多个值，要用空格隔开，例如：
<!-- 该写法正确，class属性，能写多个值 -->
<h1 class="speak big">你好啊</h1>

id选择器

作用：根据元素的 id 属性值，来精准的选中某个元素

/* 选中id值为earthy的那个元素 */
#earthy {
    color: red;
    font-size: 60px;
}
  • id属性值：尽量由字母、数字、下划线(_)、短杠(-)组成，最好以字母开头、不要包含空格、区分大小写。
  • 一个元素只能拥有一个id属性，多个元素的id属性值不能相同。
  • 一个元素可以同时拥有id和class属性。

CSS复合选择器

  • 交集选择器
  • 并集选择器
  • 后代选择器
  • 子元素选择器
  • ...

复合选择器建立在基本选择器之上，由多个基础选择器，通过不同的方式组合而成
复合选择器可以在复杂结构中，快速而准确的选中元素

交集选择器

作用：选中同时符合多个条件的元素

交集有并且的含义（通俗理解：即......又...... 的意思）

语法：选择器1选择器2选择器3...选择器n {}

/* 选中：类名为beauty的p元素，为此种写法用的非常多！！！！ */
p.beauty {
    color: blue;
}
/* 选中：类名包含rich和beauty的元素 */
.rich.beauty {
    color: green;
}
  • 有标签名，标签名必须写在前面
  • id选择器、通配选择器，理论上可以作为交集的条件，但实际应用中几乎不用 —— 因为没有意义。
  • 交集选择器中不可能出现两个元素选择器，因为一个元素，不可能即是p元素又是span元素。
  • 用的最多的交集选择器是：元素选择器配合类名选择器，例如：p.beauty。

并集选择器

作用：选中多个选择器对应的元素，又称：分组选择器

所谓并集就是或者的含义（通俗理解：要么......要么...... 的意思）

语法：选择器1, 选择器2, 选择器3, ... 选择器n {}

多个选择器通过 , 连接，此处 , 的含义就是：或

/* 选中id为peiqi，或类名为rich，或类名为beauty的元素 */
#peiqi,
.rich,
.beauty {
    font-size: 40px;
    background-color: skyblue;
    width: 200px;
}
  1. 并集选择器，我们一般竖着写。
  2. 任何形式的选择器，都可以作为并集选择器的一部分 。
  3. 并集选择器，通常用于集体声明，可以缩小样式表体积。

HTML元素间的关系

  1. 父元素
  2. 子元素
  3. 祖先元素
  4. 后代元素
  5. 兄弟元素

父元素：直接包裹某个元素的元素，就是该元素的父元素
子元素：被父元素直接包含的元素
祖先元素：父亲的父亲......，一直往外找，都是祖先
后代元素：儿子的儿子......，一直往里找，都是后代
兄弟元素：具有相同父元素的元素，互为兄弟元素

后代选择器

作用：选中指定元素中，符合要求的后代元素。
语法：选择器1 选择器2 选择器3 ...... 选择器n {} （先写祖先，再写后代）

选择器之间，用空格隔开，空格可以理解为：" xxx中的"，其实就是后代的意思。
选择器 1234....n ，可以是我们之前学的任何一种选择器。

/* 选中ul中的所有li */
ul li {
    color: red;
}
/* 选中ul中所有li中的a */
ul li a {
    color: orange;
}
/* 选中类名为subject元素中的所有li */
.subject li {
    color: blue;
}
/* 选中类名为subject元素中的所有类名为front-end的li */
.subject li.front-end {
    color: blue;
}
  1. 后代选择器，最终选择的是后代，不选中祖先。
  2. 儿子、孙子、重孙子，都算是后代。
  3. 结构一定要符合HTML嵌套要求，例如：不能p中写h1 ~ h6。

子代选择器

作用：选中指定元素中，符合要求的子元素（儿子元素）。（先写父，再写子）

子代选择器又称：子元素选择器、子选择器

语法：选择器1 > 选择器2 > 选择器3 > ...... 选择器n {}

选择器之间，用>隔开，>可以理解为：" xxx 的子代"，其实就是儿子的意思。
选择器1234....n，可以是任何一种选择器。

/* div中的子代a元素 */
div>a {
    color: red;
}
/* 类名为persons的元素中的子代a元素 */
.persons>a{
    color: red;
}
  1. 子代选择器，最终选择的是子代，不是父级。
  2. 子、孙子、重孙子、重重孙子 ...... 统称后代！，子就是指儿子。

兄弟选择器

  • 相邻兄弟选择器：
    作用：选中指定元素后，符合条件的相邻兄弟元素

    所谓相邻，就是紧挨着他的下一个，包括下一个的下一个，一直挨着就行

    语法：选择器1+选择器2 {}

    /* 选中div后相邻的兄弟p元素 */
div+p {
    color:red;
}

  • 通用兄弟选择器：
    作用：选中指定元素后，符合条件的所有兄弟元素
    语法：选择器1~选择器2 {}

    /* 选中div后的所有的兄弟p元素 */
div~p {
    color:red;
}

  • 注意： 两种兄弟选择器，选择的是下面的兄弟

属性选择器

作用：选中属性值符合一定要求的元素。
语法：

  1. [属性名]选中具有某个属性的元素
  2. [属性名="值"]选中包含某个属性，且属性值等于指定值的元素
  3. [属性名^="值"]选中包含某个属性，且属性值以指定的值开头的元素
  4. [属性名$="值"]选中包含某个属性，且属性值以指定的值结尾的元素
  5. [属性名*=“值”]选择包含某个属性，属性值包含指定值的元素
/* 选中具有title属性的元素 */
[title]{color:red;}

/* 选中title属性值为wodszh的元素 */
[title="wodszh"]{color:red;}

/* 选中title属性值以a开头的元素 */
[title^="a"]{color:red;}

/* 选中title属性值以u结尾的元素 */
[title$="u"]{color:red;}

/* 选中title属性值包含g的元素 */
[title*="d"]{color:red;}

伪类选择器

作用：选中特殊状态的元素

如何理解“伪” ? — 虚假的，不是真的。
如何理解“伪类”？ — 像类(class)，但不是类，是元素的一种特殊状态。

常用的伪类选择器:

  1. 动态伪类
    1. :link超链接未被访问的状态。
    2. :visited超链接访问过的状态。
    3. :hover鼠标悬停在元素上的状态。
    4. :active元素激活的状态。

      什么是激活？--按下鼠标不松开。
      注意点：遵循LVHA的顺序，即：link、visited、hover、active。

    5. :focus获取焦点的元素。

      表单类元素才能使用:focus伪类。
      当用户：点击元素、触摸元素、或通过键盘的tab键等方式，选择元素时，就是获得焦点。

  2. 结构伪类
    • 常用的：
      1. :first-child所有兄弟元素中的第一个。
      2. :last-child所有兄弟元素中的最后一个。
      3. :nth-child(n)所有兄弟元素中的第n个。
      4. :first-of-type所有同类型兄弟元素中的第一个。
      5. :last-of-type所有同类型兄弟元素中的最后一个。
      6. :nth-of-type(n)所有同类型兄弟元素中的第n个。
        关于 n 的值：

        0或不写：什么都选不中 —— 几乎不用。
        n：选中所有子元素 —— 几乎不用。
        1~正无穷的整数：选中对应序号的子元素。
        2n或even：选中序号为偶数的子元素。
        2n+1或odd：选中序号为奇数的子元素。
        -n+3 ：选中的是前3个。

    • 了解即可：
      1. :nth-last-child(n)所有兄弟元素中的倒数第n个。
      2. :nth-last-of-type(n)所有同类型兄弟元素中的倒数第n个。
      3. :only-child选择没有兄弟的元素（独生子女）。
      4. :only-of-type选择没有同类型兄弟的元素。
      5. :root根元素。
      6. :empty内容为空元素（空格也算内容）。
  3. 否定伪类
    :not(css选择器) 排除满足括号中条件的元素。
  4. UI伪类
    1. :checked被选中的复选框或单选按钮。
    2. :enable可用的表单元素（没有disabled属性）。
    3. :disabled不可用的表单元素（有disabled属性）。
  5. 目标伪类（了解）
    :target选中锚点指向的元素
  6. 语言伪类（了解）
    :lang()根据指定的语言选择元素（本质是看lang属性的值）

伪元素选择器

作用：选中元素中的一些特殊位置
常用伪元素：

  • ::first-letter选中元素中的第一个文字。
  • ::first-line选中元素中的第一行文字。
  • ::selection选中被鼠标选中的内容。
  • ::placeholder选中输入框的提示文字。
  • ::before在元素最开始的位置，创建一个子元素（必须用content属性指定内容）。
  • ::after在元素最后的位置，创建一个子元素（必须用content属性指定内容）。

选择器的优先级（权重）

通过不同的选择器，选中相同的元素 ，并且为相同的样式名设置不同的值时，就发生了样式的冲突。到底应用哪个样式，此时就需要看优先级了。
简单描述：

行内样式 > ID选择器 > 类选择器 > 元素选择器 > 通配选择器

详细描述：

  1. 计算方式：每个选择器，都可计算出一组权重，格式为：(a,b,c)

    a:ID 选择器的个数。
    b:类、伪类、属性 选择器的个数。
    c:元素、伪元素 选择器的个数。

    选择器 权重
    ul>li (0,0,2)
    div ul>li p a span (0,0,6)
    #iddata .slogan (1,1,0)
    #iddata .slogan a:hover (1,2,1)

  2. 比较规则：按照从左到右的顺序，依次比较大小，当前位胜出后，后面的不再对比，例如

    (1,0,0) > (0,2,2)
    (1,1,0) > (1,0,3)
    (1,1,3) > (1,1,2)

  3. 特殊规则：

    1. 行内样式权重大于所有选择器。
    2. !important的权重，大于行内样式，大于所有选择器，权重最高！

img

CSS三大特性

层叠性

概念：如果发生了样式冲突，那就会根据一定的规则（选择器优先级），进行样式的层叠（覆盖）。

什么是样式冲突？ ——— 元素的同一个样式名，被设置了不同的值，这就是冲突。

继承性

概念：元素会自动拥有其父元素、或其祖先元素上所设置的某些样式
规则：优先继承离得近的
常见的可继承属性：

text-??，font-??，line-??、 color ......

参照MDN网站，可查询属性是否可被继承

优先级

简单分析：!important > 行内样式 > ID选择器 > 类选择器 > 元素选择器 > * > 继承的样式

详细分析：需要计算权重。

计算权重时需要注意：并集选择器的每一个部分是分开算的！

CSS常用属性

像素的概念

概念：我们的电脑屏幕是，是由一个一个“小点”组成的，每个“小点”，就是一个像素（px）
规律：像素点越小，呈现的内容就越清晰、越细腻。

注意点：如果电脑设置中开启了缩放，那么就会影响一些工具的测量结果，但这无所谓，因为我们工作中都是参考详细的设计稿，去给元素设置宽高

颜色的表示

表示方式一:颜色名

编写方式：直接使用颜色对应的英文单词，编写比较简单，例如

  1. 红色：red
  2. 绿色：green
  3. 蓝色：blue
  4. 紫色：purple
  5. 橙色：orange
  6. 灰色：gray
    ......
  1. 颜色名这种方式，表达的颜色比较单一，所以用的并不多。
  2. 具体颜色名参考 MDN官方文档

表示方式二:rgb或rgba

编写方式：使用红、黄、蓝这三种光的三原色进行组合。

  • r表示 红色
  • g表示 绿色
  • b表示 蓝色
  • a表示 透明度
{
    /* 使用 0~255 之间的数字表示一种颜色 */
    color: rgb(255, 0, 0);/* 红色 */
    color: rgb(0, 255, 0);/* 绿色 */
    color: rgb(0, 0, 255);/* 蓝色 */
    color: rgb(0, 0, 0);/* 黑色 */
    color: rgb(255, 255, 255);/* 白色 */

    /* 混合出任意一种颜色 */
    color:rgb(138, 43, 226); /* 紫罗兰色 */
    color:rgba(255, 0, 0, 0.5);/* 半透明的红色 */

    /* 也可以使用百分比表示一种颜色（用的少） */
    color: rgb(100%, 0%, 0%);/* 红色 */
    color: rgba(100%, 0%, 0%,50%);/* 半透明的红色 */
}

小规律：

  1. 若三种颜色值相同，呈现的是灰色，值越大，灰色越浅。
  2. rgb(0, 0, 0)是黑色，rgb(255, 255,255)是白色。
  3. 对于rbga来说，前三位的rgb形式要保持一致，要么都是0~255的数字，要么都是百分比。

表示方式三:HEX或HEXA

HEX的原理同与rgb一样，依然是通过：红、绿、蓝色进行组合，只不过要用6位（分成3组）来表达，每一组都是十六进制
HEXA中的A是透明度

格式为: #rrggbb

{
    color: #ff0000;/* 红色 */
    color: #00ff00;/* 绿色 */
    color: #0000ff;/* 蓝色 */
    color: #000000;/* 黑色 */
    color: #ffffff;/* 白色 */
    /* 如果每种颜色的两位都是相同的，就可以简写*/
    color: #ff9988;/* 可简为：#f98 */
    /* 但要注意前三位简写了，那么透明度就也要简写 */
    color: #ff998866;/* 可简为：#f986 */
}

注意点：IE浏览器不支持HEXA但支持HEX。

表示方式四:HSL或HSLA

HSL是通过：色相、饱和度、亮度，来表示一个颜色的，格式为： hsl(色相,饱和度,亮度)

  • 色相：取值范围是 0~360 度，具体度数对应的颜色如下图: img
  • 饱和度：取值范围是 0%~100%。（向色相中对应颜色中添加灰色，0%全灰，100%没有灰）
  • 亮度：取值范围是0%~100%。（0%亮度没了，所以就是黑色。100%亮度太强，所以就是白色了）

HSLA其实就是在HSL的基础上，添加了透明度。

CSS字体属性

字体大小

  • 属性名：font-size

  • 作用：控制字体的大小

  • 语法：

    div {
font-size: 40px;
}

  • 注意点:

    1. Chrome 浏览器支持的最小文字为 12px ，默认的文字大小为 16px ，并且 0px 会自动消失。
    2. 不同浏览器默认的字体大小可能不一致，所以最好给一个明确的值，不要用默认大小。
    3. 通常以给 body 设置 font-size 属性，这样 body 中的其他元素就都可以继承了。

  • 借助控制台看样式

  • 不同字体的font-size

    1. 由于字体设计原因，文字最终呈现的大小，并不一定与 font-size 的值一致，可能大，也可能小。例如：font-size设为40px，最终呈现的文字，可能比40px大，也可能比40px小。
    2. 通常情况下，文字相对字体设计框，并不是垂直居中的，通常都靠下 一些。

字体族

  • 属性名：font-family

  • 作用：控制字体类型。

  • 语法：

    div {
    font-family: "STCaiyun","Microsoft YaHei",sans-serif
}

  • 注意：

    1. 使用字体的英文名字兼容性会更好，具体的英文名可以自行查询，或在电脑的设置里去寻找。
    2. 如果字体名包含空格，必须使用引号包裹起来。
    3. 可以设置多个字体，按照从左到右的顺序逐个查找，找到就用，没有找到就使用后面的，且通常在最后写上serif（衬线字体）或sans-serif（非衬线字体）。
    4. windows 系统中，默认的字体就是微软雅黑。

字体风格

  • 属性名：font-style

  • 作用：控制字体是否为斜体。

  • 常用值：

    1. normal：正常（默认值）
    2. italic：斜体（使用字体自带的斜体效果）
    3. oblique：斜体（强制倾斜产生的斜体效果）

    实现斜体时，更推荐使用italic

  • 语法：

    div {
    font-style: italic;
}

字体粗细

  • 属性名： font-weight

  • 作用：控制字体的粗细。

  • 常用值：

    关键词：

    1. lighter：细
    2. normal： 正常
    3. bold：粗
    4. bolder：很粗 （多数字体不支持）

    数值:

    1. 100~1000且无单位，数值越大，字体越粗（或一样粗，具体得看字体设计时的精确程度）。
    2. 100~300等同于lighter，400~500 等同于normal，600及以上等同于bold。

  • 语法：

    div {
    font-weight: bold;
}
div {
    font-weight: 600;
}

字体复合写法

  • 属性名： font ，可以把上述字体样式合并成一个属性。
  • 作用：将上述所有字体相关的属性复合在一起编写。
  • 编写规则：
    1. 字体大小、字体族必须都写上。
    2. 字体族必须是最后一位、字体大小必须是倒数第二位。
    3. 各个属性间用空格隔开。
  • 际开发中更推荐复合写法，但这也不是绝对的，比如只想设置字体大小，那就直接用font-size属性。

CSS文本属性

文本颜色

  • 属性名： color

  • 作用：控制文字的颜色。

  • 可选值：

    1. 颜色名
    2. rgb或rgba
    3. HEX或HEXA（十六进制）
    4. HSL或HSLA

  • 语法：

    div {
    color: rgb(112,45,78);
}

文本间距

  • 字母间距：letter-spacing
  • 单词间距：word-spacing（通过空格识别词）
  • 属性值为像素（px），正值让间距增大，负值让间距缩小。

文本修饰

  • 属性名：text-decoration

  • 作用：控制文本的各种装饰线。

  • 可选值：

    1. none： 无装饰线（常用）
    2. underline：下划线（常用）
    3. overline： 上划线
    4. line-through： 删除线

    可搭配如下值使用：

    1. dotted ：虚线
    2. wavy ：波浪线
    3. 也可以指定颜色

文本缩进

  • 属性名： text-indent 。
  • 作用：控制文本首字母的缩进。
  • 属性值：css中的长度单位，例如：px

文本对齐_水平

  • 属性名： text-align 。
  • 作用：控制文本的水平对齐方式。
  • 常用值：
    1. left：左对齐（默认值）
    2. right：右对齐
    3. center：居中对齐

行高

  • 属性名：line-height

  • 作用：控制一行文字的高度。

  • 可选值：

    1. normal：由浏览器根据文字大小决定的一个默认值。
    2. 像素(px)。
    3. 数字：参考自身font-size的倍数（很常用）。
    4. 百分比：参考自身font-size的百分比。

  • 备注：由于字体设计原因，文字在一行中，并不是绝对垂直居中，若一行中都是文字，不会太影响观感。

  • 举例：

    div {
    line-height: 60px;
    line-height: 1.5;
    line-height: 150%;
}

  • 行高注意事项：

    1. line-height过小会怎样？—— 文字产生重叠，且最小值是 0 ，不能为负数。
    2. line-height是可以继承的，且为了能更好的呈现文字，最好写数值。
    3. line-height和height是什么关系？
      • 设置了height，那么高度就是height的值。
      • 不设置height的时候，会根据line-height计算高度。

  • 应用场景：

    1. 对于多行文字：控制行与行之间的距离。
    2. 对于单行文字：让height等于line-height，可以实现文字垂直居中。

    备注：由于字体设计原因，靠上述办法实现的居中，并不是绝对的垂直居中，但如果一行中都是文字，不会太影响观感。

文本对齐_垂直

  1. 顶部：无需任何属性，在垂直方向上，默认就是顶部对齐。
  2. 居中：对于单行文字，让height=line-height即可。

    问题：多行文字垂直居中怎么办？—— 用定位去做。

  3. 底部：对于单行文字

    简单的方式：
    让line-height=(height×2)-font-size-x 。
    备注：x是根据字体族，动态决定的一个值根据情况自动调整。
    更好的方式：用定位去做

vertical-align

  • 属性名：vertical-align。
  • 作用：用于指定同一行元素之间，或表格单元格内文字的垂直对齐方式。
  • 常用值：
    1. baseline（默认值）：使元素的基线与父元素的基线对齐。
    2. top：使元素的顶部与其所在行的顶部对齐。
    3. middle：使元素的中部与父元素的基线加上父元素字母x的一半对齐。
    4. bottom：使元素的底部与其所在行的底部对齐。

特别注意： vertical-align 不能控制块元素

CSS列表属性

列表相关的属性，可以作用在ul、ol、li元素上

CSS属性名 功能 属性值
list-style-type 设置列表符号 常用值如下：
none ：不显示前面的标识（很常用！）
square ：实心方块
disc ：圆形
decimal ：数字
lower-roman ：小写罗马字
upper-roman ：大写罗马字
lower-alpha ：小写字母
upper-alpha ：大写字母
list-style-position 设置列表符号的位置 inside ：在li的里面
outside ：在li的外边
list-style-image 自定义列表符号 url(图片地址)
list-style 复合属性 没有数量、顺序的要求

CSS表格属性

边框相关属性（其他元素也能用）

CSS属性名 功能 属性值
border-width 边框宽度 CSS中可用的长度值
border-color 边框颜色 CSS中可用的颜色值
border-style 边框风格 none 默认值
solid 实线
dashed 虚线
dotted 点线
double 双实线
border 边框复合属性 没有数量、顺序的要求

以上4个边框相关的属性，其他元素也可以用

表格独有属性（只有 table 标签才能使用）

CSS属性名 功能 属性值
table-layout 设置列宽度 auto ：自动，列宽根据内容计算（默认值）。
fixed ：固定列宽，平均分。
border-spacing 单元格间距 CSS中可用的长度值。 生效的前提：单元格边框不能合并。
border-collapse 合并单元格边框 collapse ：合并
separate ：不合并
empty-cells 隐藏没有内容的单元格 show ：显示，默认
hide ：隐藏
生效前提：单元格不能合并。
caption-side 设置表格标题位置 top ：上面（默认值）
bottom ：在表格下面

以上 5 个属性，只有表格才能使用，即：<table>标签

CSS背景属性

CSS属性名 功能 属性值
background-color 设置背景颜色 符合CSS中颜色规范的值。
默认背景颜色是 transparent 。
background-image 设置背景图片 url(图片的地址)
background-repeat 设置背景重复方式 repeat ：重复，铺满整个元素，默认值。
repeat-x ：只在水平方向重复。
repeat-y ：只在垂直方向重复。
no-repeat ：不重复。
background-position 设置背景图位置 通过关键字设置位置：
写两个值，用空格隔开
水平： left 、 center 、 right
垂直: top 、 center 、 bottom
如果只写一个值，另一个方向的值取 center

通过长度指定坐标位置：
以元素左上角，为坐标原点，设置图片左上角的位置。
两个值，分别是 x 坐标和 y 坐标。
只写一个值，会被当做 x 坐标， y 坐标取center
background 复合属性 没有数量和顺序要求

CSS鼠标属性

CSS属性名 功能 属性值
cursor 设置鼠标光标的样式 pointer ：小手
move ：移动图标
text ：文字选择器
crosshair ：十字架
wait ：等待
help ：帮助		 
/* 自定义鼠标光标 */
cursor: url("./arrow.png"),pointer;

CSS盒子模型

css长度单位

  1. px：像素。
  2. em：相对元素font-size的倍数。
  3. rem：相对根字体大小，html标签就是根。
  4. %：相对父元素计算。

CSS中设置长度，必须加单位，否则样式无效！

元素显示模式

  • 块元素（block）

    又称：块级元素
    特点：

    1. 在页面中独占一行，不会与任何元素共用一行，是从上到下排列的。
    2. 默认宽度：撑满父元素。
    3. 默认高度：由内容撑开。
    4. 可以通过 CSS 设置宽高。
  • 行内元素（inline）

    又称：内联元素
    特点:

    1. 在页面中不独占一行，一行中不能容纳下的行内元素，会在下一行继续从左到右排列。
    2. 默认宽度：由内容撑开。
    3. 默认高度：由内容撑开。
    4. 无法通过 CSS 设置宽高。
  • 行内块元素（inline-block）

    又称：内联块元素
    特点：

    1. 在页面中不独占一行，一行中不能容纳下的行内元素，会在下一行继续从左到右排列。
    2. 默认宽度：由内容撑开。
    3. 默认高度：由内容撑开。
    4. 可以通过 CSS 设置宽高。

注意：元素早期只分为：行内元素、块级元素，区分条件也只有一条："是否独占一行"，如果按照这种分类方式，行内块元素应该算作行内元素。

修改元素的显示模式

通过 CSS 中的 display 属性可以修改元素的默认显示模式，常用值如下：

值 描述
none 元素会被隐藏。
block 元素将作为块级元素显示。
inline 元素将作为内联元素显示。
inline-block 元素将作为行内块元素显示。

盒子模型的组成

CSS会把所有的HTML元素都看成一个盒子，所有的样式也都是基于这个盒子。

  1. margin（外边距）： 盒子与外界的距离。
  2. border（边框）： 盒子的边框。
  3. padding（内边距）： 紧贴内容的补白区域。
  4. content（内容）：元素中的文本或后代元素都是它的内容。

img

盒子的大小 = content + 左右padding+ 左右border 。

注意：外边距 margin 不会影响盒子的大小，但会影响盒子的位置。

盒子内容区（content）

CSS属性名 功能 属性值
width 设置内容区域宽度 长度
max-width 设置内容区域的最大宽度 长度
min-width 设置内容区域的最小宽度 长度
height 设置内容区域的高度 长度
max-height 设置内容区域的最大高度 长度
min-height 设置内容区域的最小高度 长度

注意：
max-width、min-width一般不与 width 一起使用。
max-height、min-height一般不与 height 一起使用。

所谓的默认宽度，就是不设置width属性时，元素所呈现出来的宽度。
总宽度=父的content—自身的左右margin。
内容区的宽度=父的content—自身的左右margin—自身的左右border —自身的左右padding。

盒子内边距（padding）

CSS属性名 功能 属性值
padding-top 上内边距 长度
padding-right 右内边距 长度
padding-bottom 下内边距 长度
padding-left 左内边距 长度
padding 复合属性 长度，可以设置 1 ~ 4 个值

padding复合属性的使用规则：

  1. padding: 10px;四个方向内边距都是10px。
  2. padding: 10px 20px;上10px，左右20px。（上下、左右）
  3. padding: 10px 20px 30px;上 10px，左右20px ，下30px。（上、左右、下）
  4. padding: 10px 20px 30px 40px;上10px，右20px，下30px，左40px。（上、右、下、左）

注意点：

  1. padding的值不能为负数。
  2. 行内元素的左右内边距是没问题的，上下内边距不能完美的设置。
  3. 块级元素、行内块元素，四个方向内边距都可以完美设置。

盒子边框（border）

CSS属性名 功能 属性值
border-style 边框线风格，复合了四个方向的边框风格 none：默认值
solid：实线
dashed：虚线
dotted：点线
double：双实线
......
border-width 边框线宽度,复合了四个方向的边框宽度 长度，默认3px
border-color 边框线颜色,复合了四个方向的边框颜色 颜色，默认黑色
border 复合属性 值没有顺序和数量要求。
border-left
border-left-style
border-left-width
border-left-color

border-right
border-right-style
border-right-width
border-right-color

border-top
border-top-style
border-top-width
border-top-color

border-bottom
border-bottom-style
border-bottom-width
border-bottom-color
分别设置各个方向的边框 同上

边框相关属性共20个。
border-style、border-width、border-color其实也是复合属性。

盒子外边距（margin）

CSS属性名 功能 属性值
margin-left 左外边距 CSS中的长度值
margin-right 右外边距 CSS中的长度值
margin-top 上外边距 CSS中的长度值
margin-bottom 下外边距 CSS中的长度值
margin 复合属性，可以写1~4个值，规律同padding（顺时针） CSS中的长度值

  • margin注意事项

    1. 子元素的margin，是参考父元素的content计算的。（因为是父亲的content中承装着子元素）
    2. 上margin、左margin：影响自己的位置；下margin、右margin：影响后面兄弟元素的位置。
    3. 块级元素、行内块元素，均可以完美地设置四个方向的margin；但行内元素，左右margin可以完美设置，上下margin设置无效。
    4. margin的值也可以是auto，如果给一个块级元素设置左右margin都为auto，该块级元素会在父元素中水平居中。
    5. margin的值可以是负值。

  • margin 塌陷问题
    什么是margin塌陷？

    第一个子元素的上margin会作用在父元素上，最后一个子元素的下 margin 会作用在父元素上。

    如何解决margin塌陷？

    • 方案一：给父元素设置不为0的padding。
    • 方案二：给父元素设置宽度不为0的border。
    • 方案三：给父元素设置css样式overflow:hidden

  • margin合并问题
    什么是margin合并？

    上面兄弟元素的下外边距和下面兄弟元素的上外边距会合并，取一个最大的值，而不是相加。
    如何解决margin合并？
    无需解决，布局的时候上下的兄弟元素，只给一个设置上下外边距就可以了。

处理内容溢出

CSS属性名 功能 属性值
overflow 溢出内容的处理方式 visible：显示，默认值
hidden：隐藏
scroll：显示滚动条，不论内容是否溢出
auto：自动显示滚动条，内容不溢出不显示
overflow-x 水平方向溢出内容的处理方式 同overflow
overflow-y 垂直方向溢出内容给的处理方式 同overflow
  1. overflow-x、overflow-y不能一个是hidden，一个是visible，是实验性属性，不建议使用。
  2. overflow常用的值是hidden和auto，除了能处理溢出的显示方式，还可以解决很多疑难杂症。

隐藏元素的方式

  • 方式一：visibility属性

    visibility属性默认值是show，如果设置为hidden，元素会隐藏。
    元素看不见了，还占有原来的位置（元素的大小依然保持）。

  • 方式二： display 属性

    设置display:none，就可以让元素隐藏。
    彻底地隐藏，不但看不见，也不占用任何位置，没有大小宽高。

样式的继承

有些样式会继承，元素如果本身设置了某个样式，就使用本身设置的样式；但如果本身没有设置某个样式，会从父元素开始一级一级继承（优先继承离得近的祖先元素）。

  • 会继承的css属性

    字体属性、文本属性（除了vertical-align）、文字颜色等。

  • 不会继承的css属性

    边框、背景、内边距、外边距、宽高、溢出方式等。

一个规律：能继承的属性，都是不影响布局的，简单说：都是和盒子模型没关系的。

默认样式

元素一般都些默认的样式
优先级：元素的默认样式 > 继承的样式，所以如果要重置元素的默认样式，选择器一定要直接选择器到该元素。

布局小技巧

  1. 行内元素、行内块元素，可以被父元素当做文本处理。

    即：可以像处理文本对齐一样，去处理：行内、行内块在父元素中的对齐。
    例如：text-align、line-height、text-indent等。

  2. 如何让子元素，在父亲中水平居中：
    • 若子元素为块元素，给子元素加上：margin:0 auto;。
    • 若子元素为行内元素、行内块元素，给父元素加上：text-align:center。
  3. 如何让子元素，在父亲中垂直居中：
    • 若子元素为块元素，给子元素加上：margin-top，值为：(父元素content－子元素盒子总高)/2。
    • 若子元素为行内元素、行内块元素：

      让父元素的height=line-height，每个子元素都加上：vertical-align:middle;。
      补充：若想绝对垂直居中，父元素font-size设置为0。

元素之间的空白问题

产生的原因：

行内元素、行内块元素，彼此之间的换行会被浏览器解析为一个空白字符。

解决方案：

  1. 方案一： 去掉换行和空格（不推荐）。
  2. 方案二： 给父元素设置font-size:0，再给需要显示文字的元素，单独设置字体大小（推荐）。

行内块的幽灵空白问题

  • 产生原因：
    行内块元素与文本的基线对齐，而文本的基线与文本最底端之间是有一定距离的。
  • 解决方案：
    1. 方案一： 给行行内块设置vertical，值不为baseline即可，设置为middel、bottom、top均可。
    2. 方案二： 若父元素中只有一张图片，设置图片为display:block。
    3. 方案三： 给父元素设置font-size: 0。如果该行内块内部还有文本，则需单独设置font-size。

浮动

在最初，浮动是用来实现文字环绕图片效果的，现在浮动是主流的页面布局方式之一。

元素浮动后的特

  1. 标签：color,元素,基础,CSS,设置,选择器,css,属性
    From： https://www.cnblogs.com/wdszh/p/17453432.html

相关文章

  • 【python基础】复杂数据类型-列表类型（列表切片）
    1.列表切片前面学习的是如何处理列表的所有数据元素。python还可以处理列表的部分元素，python称之为切片。1.1创建切片创建切片，可指定要使用的第一个数据元素的索引和最后一个数据元素的索引。与range函数一样，python在到达指定的第二个索引前面的数据元素后停止。比如要输出列表......
  • css清除浮动
    1、为什么清除浮动  当子元素浮动时其父元素没有高度（比如列表页，父元素需要通过子元素的数量来确定高度），这时就会影响标准流父元素下面元素的布局，那么我们就需要清除浮动了。示例：<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-......
  • 基础网络速查速会
    五层网络模型TCP/IPHTTPPostManAJAX浏览器的跨域问题JWTCOOKIESESSION文件上传文件下载缓存协议CSRFXSS网络性能优化分片传输域名和DNSSSL/TLS/HTTPSHTTP2WebSocket......
  • 强化学习基础篇[3]：DQN、Actor-Critic详细讲解
    强化学习基础篇[3]：DQN、Actor-Critic详细讲解1.DQN详解1.1DQN网络概述及其创新点在之前的内容中，我们讲解了Q-learning和Sarsa算法。在这两个算法中，需要用一个Q表格来记录不同状态动作对应的价值，即一个大小为$[状态个数，动作个数]$的二维数组。在一些简单的强化学习环境中，比如......
  • 【python基础】复杂数据类型-列表类型（排序/长度/遍历）
    1.列表数据元素排序在创建的列表中，数据元素的排列顺序常常是无法预测的。这虽然在大多数情况下都是不可避免的，但经常需要以特定的顺序呈现信息。有时候希望保留列表数据元素最初的排列顺序，而有时候又需要调整排列顺序。python提供了很多列表数据元素排序的方式，可根据情况选用。1......
  • WPF 入门笔记 - 03 - 样式基础及控件模板
    ......
  • Java基础知识：面试官必问的问题
    数据类型基本类型byte/8char/16short/16int/32float/32long/64double/64boolean/~boolean只有两个值：true、false，可以使用1bit来存储，但是具体大小没有明确规定。JVM会在编译时期将boolean类型的数据转换为int，使用1来表示true，0表示false。JVM支持boolean......
  • linux 计算机基础
    1.  GPL、BSD、MIT、Mozilla、Apache和LGPL的区别  GPLGPL许可证的核心：允许任何人观看、修改，并散播程序软件里的原始程序码，条件是如果你要发布修改后的版本就要连源代码一起公布，不允许修改后和衍生的代码做为闭源的商业软件发布和销售。Linux就是采用了GPL协议。......
  • html+css简单易懂的轮播图实现
    实现轮播图感觉好复杂啊，这个比较简单的实现了但是还是没有怎么理解代码，只能先发出来慢慢学习学习了话不多说，直接上代码<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge">......
  • Java基础知识：面试官必问的问题
    数据类型基本类型byte/8char/16short/16int/32float/32long/64double/64boolean/~boolean只有两个值：true、false，可以使用1bit来存储，但是具体大小没有明确规定。JVM会在编译时期将boolean类型的数据转换为int，使用1来表示true，0表示false。JVM支持boolean......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99