CSS 基础学习(一)

学习_学习_再学习

已于 2022-07-18 15:16:35 修改

阅读量66

点赞数

分类专栏： web 文章标签： css

于 2022-07-18 11:38:08 首次发布

本文链接：https://blog.csdn.net/m0_38144883/article/details/125845194

版权

web 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

本文介绍了CSS的基本概念，如其用于美化HTML的职责，以及CSS的语法规范，包括选择器的选择与分类。详细阐述了各种选择器的用法，如标签选择器、类选择器和ID选择器。同时，讨论了字体系列、字号、文字粗细和文本风格等文本属性。此外，还提到了CSS的引入方式，包括内部、行内和外部引入。最后，提供了一个新闻页布局的实践案例。

摘要由CSDN通过智能技术生成

1. 简介

HTML 的局限性:只是显示网页元素,只有简单的样式
CSS（Cascading Style Sheets）网页的美容师：让 HTML 专注去做结构的呈现，结构样式相分离

2. CSS 语法规范

构成：选择器 { 样式 }
选择器以及一条或者多条声明；

```css
          分号结尾
             |
  h1{color:red;}
  |   |     |  
选择器 属性  属性值

```

3. CSS 代码风格

样式格式书写
- 紧凑形
- 展开形（约定）
样式的大小写 (小写字母书写)
空格规范
属性值前面，冒号后面保留空格;
选择器和大括号中间保留空格

```css
   空格
    | 
  h1 {
    color: red;
  }       |
         空格

4. CSS 选择器

作用：选择器（选择符）, 根据不同需求“选择标签使用”。
CSS做了两件事：
1. 选择标签;
2. 设置标签的样式。

5. 选择器分类

基础选择器
- 标签「tag」选择器 , html 的标签名
  优点：把某一类标签全部选中；
  缺点：不能差异处理。
  p|h*|a|span|div...
- 类「.class」选择器
  口诀：样式点定义，结构类调用，一个或多个，开发最常用
  注意：不能用标签名称类名;长名字用短横线分割；
  [header,footer,nav,silder,search,new,column,...]
```
  <div class="star-red"></div>
  
  .star-red {
    color: red;
  }
```
  - 类选择器(多类名) : 一个标签可以指定多个类名
    <div class="star-red star-big"></div>
    
    使用场景：统一修改，节省代码
    
    注意：中间有空格，
- id 「#id」选择器
  
  口诀：样式#定义，结构id调用，只能调用一次，别人切勿使用
  
  <div id="nav"></div>
```
  #nav {
    color: red;
  }
```
- 通配符选择器「*」: 选取页面中所有的元素
复合选择器

6. 字体系列

font-family 字体
常见字体：Times New Roman, Times, serif, Mircosoft YaHei

常用的CSS字体名称	–
宋体	SimSun
黑体	SimHei
微软雅黑	Microsoft YaHei
微软正黑体	Microsoft JhengHei
新宋体	NSimSun
新细明体	PMingLiU
细明体	MingLiU
标楷体	DFKai-SB
仿宋	FangSong
楷体	KaiTi
仿宋_GB2312	FangSong_GB2312
楷体_GB2312	KaiTi_GB2312

font-size 字号
注意：一般会给 ,body { font-size: 12px;} 指定大小；标题标签单独指定文字大小

font-weight 文字粗细 : 实际开发中提倡 (数字) 加粗、变细;

值	描述
normal	默认值。定义标准的字符。
bold	定义粗体字符。
bolder	定义更粗的字符。
lighter	定义更细的字符。
	100
	200
	300
	400 `(不加粗)`
	500
	600
	700 `(加粗)`
	800
	900
定义由粗到细的字符。400 normal，而 700 等同于 bold。
inherit	规定应该从父元素继承字体的粗细。

font-style 文本风格

值	描述
normal	默认值。浏览器显示一个标准的字体样式。
italic	浏览器会显示一个斜体的字体样式。
oblique	浏览器会显示一个倾斜的字体样式。
inherit	规定应该从父元素继承字体样式。

- font 复合属性写法; `(不可换顺序)`
  font-style、font-weight 必须要有的属性
  `font: font-style font-weight [font-size/line-height] [font-family];`

7. CSS 文本属性

color 文字颜色
预定义颜色值 (测试)
十六进制 (开发中多)
RGB (代码格式)
text-align 设置元素文本 水平对齐的方式 : center | left(默认值) | right

text-decoration 装饰文本 : [ 下划线 | 上划线 |linethrow ]

值	描述
none	默认。定义标准的文本。(重点)
underline	定义文本下的一条线。(重点)
overline	定义文本上的一条线。
line-through	定义穿过文本下的一条线。
blink	定义闪烁的文本。
inherit	规定应该从父元素继承 text-decoration 属性的值。

text-indent : 文本缩进 , 段落的[首行]缩进；正负都可以 em 当前元素的文字大小来计算的
text-indent: 2em; 缩进当前文字两个字符的大小
line-height 行间距
行高 = 上间距 + 文本高度 + 下间距
场景：大段落设置行高
测量方式：第二行文本的下沿到第一行文本的上沿

8. CSS 引入方式

内部 <style></style>理论放在 head 中;
行内 style = "" 必须是双引号;
外部 <link rel="stylesheet" href="">

* 综合案例:新闻页练习 *

素材下载地址
1). web端布局：先讲解HTML5常用标签，接着讲解CSS3常见样式，主要学习盒子模型，浮动，定位还有高级布局技巧，增加的H5C3新特性，新语法，最后讲解PC端品优购项目。以及CSS3动画 2d 3d效果
2). 移动端布局：主要讲解视口、二倍图、流失布局，flex布局，rem布局，响应式布局，还会增加摹客使用等工具。