前端自学5——CSS基础

whfdcd！

已于 2024-07-31 15:34:02 修改

阅读量1.1k

点赞数 29

文章标签： css 前端

于 2024-07-31 15:31:21 首次发布

本文链接：https://blog.csdn.net/m0_57364534/article/details/140824258

版权

1.CSS简介、代码风格

键值对：“属性：属性值”colo:red

多个键值对用;隔开

1.样式格式书写

1.紧凑格式

h3 {color:deeppink;font-size:20px}

2.展开格式，常用

h3 {
  color: deeppink;
  font-size: 20px
}

2.样式大小写

常用小写

h3 {

colo: pink;

}

3.空格规范

1.属性值前面，冒号后面，保留一个空格

2.选择器（标签）和大括号中间保留空格

p {
  color: rgb(67, 59, 219);
  font-size: 20px
}

2.CSS基础选择器

基础选择器：标签、类、id通配符

由单个选择器组成，包括标签选择器、类选择器、id选择器、通配符选择器

①标签选择器：标签名{

属性1：属性值1；

属性2：属性值2：

...

}

②类选择器1

可单独选一个或者某几个标签

.类名{

属性1：属性值1:；

}

将所有拥有red类的HTML元素均为红色

.red{

color: red;

}

语法：

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

样式点定义，结构类（class）调用

类命名规则：头：header；内容：content/container；尾：footer；导航栏：nav

侧边栏：sidebar；栏目：column；页面外围控制整体布局宽度：wrapper...

③类选择器2-多类名

使用方式：

<div class="red font20">亚瑟</div>

④id选择器

一般和js搭配使用

语法：

#id名 {
  属性1;属性值2;
  ...
}

注意：id属性只能在每个HTML文档中出现一次，口诀：样式#定义，结构id调用，只能调用一次，别的标签切勿使用

⑤通配符选择器

使用*定义，表示选取页面中所有元素（标签）

语法：

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

不需要调用，自动给所有未定义元素使用样式；特殊情况才使用

清除所有元素的内外边距：

*{

margin:0;

padding:0;

}

2.CSS字体属性

1.字体系列

font-family定义文本的字体系列

h3 {
  font-family: '宋体';
}

p {
  /* ''中没有的字体自动往后推，多个单词或中文推荐使用''包含 */
  font-family: 'Microsoft Yahei', Times, serif;
}

2.字体大小写

font-size定义字体大小

h2 {
  font-size: 35px;
}

p {
  font-size: 25px;
}

可以给body指定整个页面文字的大小

标题标签比较特殊，需要单独指定文字大小

3.字体粗细

font-weight：font-weight: bold;

实际使用中一般用：font-weight: 600;控制字体粗细，数据后面不用单位

加粗bold（700），正常：normal（400）

4.文字样式

font-style，语法：

p {
  font-style: normal;
}

italic：倾斜样式

注意：平时很少给文字加斜体，反而要给斜体标签（em，i）改为不倾斜字体

5.字体复合属性

用简写的方式写代码：

font:font-style font-weight font-size/line-height font-family

div {
  font-style: italic;
  font-weight: 700;
  font-size: 18px;
  font-family: 'Microsoft yahei';
}

简写为：

div{
  /* font:font-style font-weight font-size/line-height font-family; */
  font: italic 700 18px 'Microsoft yahei';
}

必须按照语法顺序书写，不能更换顺序，各属性用空格隔开

必须要有文字大小font-size和文字主题font-family，否则font属性不起作用

3.css文本属性

可定义文本外观，如颜色、对齐文本、装饰文本、文本缩进、行间距等

文本颜色：color，常用16进制（#ff0000）

对齐文本：text-align，只能设置水平对齐方式text-align：left/right/center

装饰文本：text-decoration，添加下划线、删除线、上划线等，none（默认没有）underline（下划线）overline（上划线，几乎不用）line-through(删除线，不常用）

文本缩进：text-indent，指定文本的第一行缩进，通常是将段落的首行缩进。相对单位em，就是当前元素（font-size）一个文字大小，如果当前元素没有设置大小，则会按照父元素的1个文字大小

行间距：line-height行高，测量工具：

4.CSS的引入方式

1.行内样式表（行内式）

在元素标签内部的style属性中设定css样式，适合于修改简单样式，书写繁琐，不推荐

<p style="color: pink;">花落知多少</p>

2.内部样式表（嵌入式）

写到html页面内部，将所有css代码抽取出来，单独放到一个<style>标签中

<style>

  p {
    font-size: 20px;
    line-height: 8px;
  }

  .spring {
    /* font-weight: bold; */
    font-weight: 600;
  }

  div {
    font: italic 700 18px 'Microsoft yahei';
    text-align: center;
    text-decoration: underline;
  }

</style>

理论上可以放到任何地方，一般放在<head>标签中，方便控制整个页面样式，但结构与样式没有完全分离