2022-11-21

本周学习了一些css的基础知识。

# 为网页添加样式

## 术语解释

```css

h1{

    color: aqua;

    text-align: center;

}

```

css规则 = 选择器 + 声明块

### 选择器

选择器:选中元素

1. ID选择器:选中对应ID值的元素

2. 元素选择器:

3. 类选择器

### 声明块

## CSS代码书写位置

1. 内部样式表

书写在style元素中

2. 内联样式表,元素样式表

直接书写在元素的style属性中

3. 外部样式表【推荐】

将样式书写到独立的css文件中。

1).外部样式可以解决多页面样式重复的问题

2).有利于浏览器缓存,从而提高页面的响应速度

3).有利于代码分离(HTML和css),更容易阅读和维护

**link元素是个空元素,无结束标记**

还有一些常见的样式声明:

# 常见样式声明

>1. color

元素内部的文字颜色

**预设值**:定义好的单词

**三原色,色值**:光学三原色(红绿蓝)

```

rgb表示法:

rgb(0,255,0)

hex(16进制)表示法:

#红绿蓝

```

淘宝红:#ff4400,#f40

黑色:#000000,#000

白色:#ffffff,#fff

红色:#ff0000,#f00

绿色:#00ff00,#0f0

蓝色:#0000ff,#00f

青:#ff

黄:#ff0

灰色:#ccc

>2. background-color

元素背景颜色

>3. font-size

元素内部文字的尺寸大小

1)px:像素,绝对单位,简单的理解为文字的高度占多少个像素

2)em: 相对单位,相对于父元素的字体大小

每个元素必须有字体大小,如果没有声明,则直接使用父元素的字体大小,如果“没有”父元素(html),则使用基准字号。

**user agent , UA , 用户代理(也就是浏览器)**

>4. font-weight

文字粗细程度

> strong,默认加粗

>5. font-family

文字类型

**用户计算机中有的字体才会生效。**

推荐使用多个字体,以匹配不同的环境

sans-serif,非衬线字体

>6. font-style

字体样式,通常用它设置斜体

>i元素,em元素,默认样式是倾斜字体;实际使用中,通常用它表示一个图标(icon)

>7. text-decoration

文本修饰,给文本加线。

a元素

del元素:错误的内容

s元素:过期的内容

>8. text-indent

首行文本缩进

>9. line-height

每行文本的高度,该值越大,每行文本距离越大

设置行高为容器高度,可以让但行文本垂直居中

行高可以设置为纯数字,表示相对于当前元素的字体大小

>10. width

宽度

>11. height

高度

>12. letter-space

文字间隙

>13. text-align

元素内部文字的水平排列方式

>在浏览器中按住ctrl键打开新的网页时不会覆盖原网页

>设置行高为容器高度,可以让但行文本垂直居中:浏览器会自动将你的文字居中处理,比如文字高20px,但行高为50px,此时文字的上下都会有15的px。所以当你将容器高度设置为50px时,恰巧能让文字看起来是在容器中垂直居中的

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • ###CSS属性 ####文字属性 ```css 1.样式 fsfont-style:italic;倾斜的 fsn...
    独钓寒江雪kht阅读 4,014评论 0 1
  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5? 答:HTML5是最新的HTML标准。 注意:讲述HT...
    kismetajun阅读 28,086评论 1 45
  • 1.1CSS 基础与选择器初识 | CSS 1. CSS 加载方式有几种? CSS样式加载一共有四种方式: 1、行...
    没糖_cristalle阅读 4,221评论 0 0
  • 第1章 html基本结构 认识HTML: html不是一种编程语言,是一种标志语言 标记语言是由一套标识标签组成的...
    不喝可乐_7889阅读 3,921评论 0 0
  • 学习CSS的最佳网站没有之一 http://www.w3school.com.cn/tags/index.asp ...
    Amyyy_阅读 4,722评论 0 1