CSS基础

最新推荐文章于 2024-05-16 10:00:00 发布

@西楚霸王

最新推荐文章于 2024-05-16 10:00:00 发布

阅读量164

点赞数

分类专栏： CSS基础文章标签： css html5

本文链接：https://blog.csdn.net/qq_41027812/article/details/108185087

版权

CSS基础专栏收录该内容

1 篇文章 0 订阅

订阅专栏

CSS基础

css简介

css是什么
- Cascading style sheets (层叠样式表)（级联样式表）
css作用
- 改变文本内容：(文本大小，文本颜色，对齐方式…)
  *改变标签的样式
- 改变页面的布局

css引入方式

行内引入（行内式）

    <p style="color: red;font-size: 20px;">
              hello world
      </p>

特点：结构层和表示层完全不分离，代码冗余，只作用于当前标签

文本内部引入（内嵌式）

    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style>
            div {
                color: red;
                font-size: 20px;
            }
        </style>
    </head>

特点：结构层和表示层不完全分离，代码相对冗余，作用于当前页面

文本外部引入（外链式）

    <link rel="stylesheet" href="./css/index.css">

特点：结构层和表示层完全分离，代码清晰简洁，可以作用于多个页面

css引入方式优先级

内嵌式和外链式优先级相同，后引入的生效，行内样式最优先

基础选择器

通配符选择器
标签选择器
class选择器
- 可以包含多个类选择器，用空格分开
id选择器
- 同一个文本唯一
优先级比较
- id选择器>class选择器>标签选择器>通配符选择器*

css字体属性

font-size
- 设置字体的大小，浏览器默认是16px, 最小设置不能小于12px (设置1px-11px跟12px的大小是一样的)
font-family
- 设置文本的字体系列，如果属性值包含中文或者空格，要加引号，回退系统（备用字体），假如浏览器不支持第一个字体，第二个字体可以生效。
- serif – 衬线字体，笔画有粗有细
  - 宋体（SimSun）
  - Times New Roman
- sans-serif – 无衬线字体，笔画粗细均匀
  - 微软雅黑（Microsoft Yahei）
  - 华文黑体（STHeiti）、华文细黑（STXihei）
  - 黑体-简（Heiti SC）
font-style
- 设置文字字体样式
  - normal 正常显示
  - italic 斜体显示
font-weight
- 设置字体的粗细
  - lighter 细体 100
  - normal 默认，标准的字体 400
  - bold 粗体 700
  - bolder 粗体 900
  - 100-900
line-height
- 设置行高
  - normal 默认，合理的行高
  - length 设置固定的行间距
  - number 设置数字，此数字与当前字体尺寸相乘的结果
font: font-style font-weight font-size/line-height font-family

+ 注意：只有同时具有font-size和font-family的值时，简写才生效

css文本属性

color
- 设置文本的字体颜色
text-align
- 设置文本的水平对齐方式，默认都是左对齐，相对于标签本身的宽度来对齐的
  - left 默认左对齐
  - center 居中对齐
  - right 右对齐
  - justify 设置文本两端自动对齐
text-decoration
- 设置文本的装饰
  - none 默认，没有装饰
  - underline 定义文本的下划线
  - overline 定义文本上的上划线
  - line-through 定义贯穿文本的一条线
text-indent
- 设置文本的首行缩进

css长度单位表示

px
- 像素值，绝对长度单位
em
- 相对长度单位，如果不作用于自身的font-size,相对于当前元素本身的font-size
- 如果作用于自身的font-size, 那就相对于父标签的font-size
%
- 百分比，相对于父标签
rem
- 相对于根元素（html）的font-size, 一般作用于移动端

css颜色表示

英文单词 red
六位的十六进制数 #RRGGBB
- 如果 #aabbcc 可以简写为 #abc
- 可以设置为8位，最后两位代表不透明度 (00 - ff)
rgb(r,g,b)
- 三种整数 0 - 255
- 三个百分比
rgb(r,g,b,alpha)
- alpha 可是设置 0 到 1的小数，代表不透明度
rgba(r,g,b,alpha)兼容性更好
- alpha 可是设置 0 到 1的小数，代表不透明度

HTML列表

都是块级元素

无序列表
- 项目的列表li，自带粗体的圆点项目符号
- list-style: none; 去掉项目符号
- ul>li 复合标签，ul标签的子标签必须是li标签
- ```
<ul>
        <li>HTML</li>
        <li>CSS</li>
        <li>JS</li>
</ul>
```

有序列表

项目的列表li，自带数字的项目符号
list-style: none; 去掉项目符号
ol>li 复合标签，ol标签的子标签必须是li标签

  <!-- type: 设置前面符号的类型
       start: 代表起始数字
       reversed: 设置倒数 -->
<h4>班级姓名</h4>
    <ol type="1" start="5" reversed>
        <li>张三</li>
        <li>李四</li>
        <li>王五</li>
        <li>赵六</li>
    </ol>

自定义列表

项目列表dt dd，dd天然自带留白
dl>dt | dd 复合标签

<dl>
        <dt>HTML</dt>
        <dd>超文本标记语言</dd>
        <dt>CSS</dt>
        <dd>层叠样式表</dd>
        <dt>js</dt>
        <dd>脚本语言</dd>
</dl>

HTML表格

表格的基本结构
- table: 表格最外层大标签
- tr: 表格每一行
- td: 表格每个单元格，默认居左
表格的完整结构
- thead: 表格的头部，通常写表格每一列的标题
- tbody: 表格的主体，写表格的数据
- tfoot: 表格的底部，写表格的脚注
- th: 表格标题的单元格。默认居中
- caption: 表格的标题
表格自带属性
- border: 表格的边框
- cellpadding: 单元格的内容与边框之间的空间
- cellspacing: 单元格与单元格之间的空间
- align: 单元格的水平对齐方式如果写在table标签里面，表示表格的对齐方式，在table标签里面写text-align，表示单元格的对齐方式
- valign: 单元格的垂直对齐方式
表格的css属性
- border-collapse
  - separate：默认，每个单元格拥有独立的边框
  - collapse: 表格设置为单一边框，cellspacing失效
- vertical-align 设置单元格的垂直对齐方式
表格的合并
- 行合并
  - rowspan
  - 两行合并为一行，上下合并
- 列合并
  - colspan
  - 两列合并为一列，左右合并