HTML-CSS基础

HTML-CSS基础

1 CSS是什么

Cacding Style Sheets 层级样式表、级联样式：给元素添加样式

2 学习CSS的目的

1、为了美化网页
2、元素的属性不能改变所有的样式
3、元素的属性是代码比较臃肿，结构与样式没有分开

3 添加样式的三种方式(样式表)

3.1 行内样式表(内联样式表)

(1)给元素添加style属性，属性值是CSS的样式
(2)没有实现样式与结构的相分离
(3)只能给一个元素添加样式

属性A：属性值A; 属性B:属性值B

特点：1、只能适用于单个元素
2、没有实现结构与样式的相分离

3.2 内部样式表

(1)在head标签中添加style标签
(2)部分实现样式与结构的相分离
(3)可以给多个相同的选择器添加样式

type=“text/CSS” 可以省略

<style>

选择器 {
属性A: 属性值A;
属性B: 属性值B;
}

</style>

特点：1、适用于多个选择器相同的元素
2、部分实现了结构与样式的相分离

3.3 外部样式表

(1)在head标签中通过link标签链接外部的CSS文件
(2)实现样式与结构的相分离
(3)在同一个站点的html文件都可以引入

<link rel=“stylesheet” href=“css/style.css”>

rel：被链接的文件与当前文件之间的关系

href:CSS文件的地址

特点：1、使用与当前站点的任何HTML文件
2、完全实现了结构与样式的相分离

4 字体属性

4.1 字体的家族

font-family: "宋体";

默认的字体家族属性是 Microsoft YaHei

（1）汉字

font-family: "宋体"; 
font-family: "黑体"; 

（2）英文

font-family: SimSun; 
font-family: SimHei; 

（3）Unicode编码

font-family: \6977\4F53; 

4.2 字体的尺寸

默认的字体大小是16px

px : 像素

font-size: 30px;

4.3 字体的粗细

font-weight: bold;
font-weight: bolder;

100-900 正百的数也可以使用

font-weight: 300;

4.4 字体的倾斜属性

font-style: italic;
font-style: oblique;

4.5 字体的间距

letter-spacing: 20px;

4.6 字体的综合设置

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

font: oblique bolder 58px Simsun;

5 外观属性

5.1 颜色属性

5.1.1 英文名称

color: red;

5.1.2 RGB

0-255

color: rgb(100, 100, 254); 

5.1.3 十六进制

0-9 A-F

color: #ff0000; 
color: #00ff00;

5.2 首行缩进

单位是em 1em是1个汉字字符

text-indent: 2em;

5.3 文本位置属性

text-align: center;/*居中*/
text-align: right;/*靠右对齐*/

5.4 文本描述属性

/* 下划线：underline */
/* u  ins */
/* text-decoration: underline; */
/* 上划线 */
/* text-decoration: overline; */
/* 删除线：line-through            del  s */
text-decoration: line-through;

6 CSS基础选择器

6.1 什么是选择器

通过特定的符号去选择指定的元素

6.2 选择器分类

1、基础选择器：标签选择器、类名选择器、ID选择器、多类名选择器、通配符选择器
2、复合选择器：交集选择器、并集选择器、后代选择器、子代选择器
3、伪类选择器

6.3 基础选择器

6.3.1 标签选择器

通过标签的名获取指定元素

header {
      font-size: 60px;
      color: red;
    }

6.3.2 类名选择器

通过标签的名获取指定元素,前面加.

类名是可以重复的

.box {
      text-decoration: line-through;
    }

类名的命名规范:

1、一般有字母、数字、连接符-组成
2、不要以数字开头
3、要有语义化
4、驼峰命名法

6.3.3 ID选择器

通过ID名获取指定元素,前边加#

id是元素唯一的标识符，所以id不能重复

#box-list {
      font-weight: bold;
    }

6.3.4 多类名选择器

多个类名之间用空格隔开

.box,.box1 {
      text-decoration: line-through;
    }

6.3.5 通配符选择器

选择页面中所有的元素

* {
     text-align: center;
}

6.4 复合选择器

6.4.1 交集选择器

既是……又是…… 两个选择器之间紧挨着，不能加空格

div.box1 {
      font-size: 50px;
      color: red;
    }

6.4.2 并集选择器

多个选择器之间用逗号隔开，且每个选择器独占一行

.list1,
    .list2,
    .box2 {
      font-size: 50px;
      color: red;
    }

6.4.3 子代选择器

父元素与子元素之间有个 > 必须是亲儿子

.listUl>li>div {
      color: greenyellow;
    }

6.4.4 后代选择器

父元素与子元素之间有个空格

.listUl p {
      color: greenyellow;
    }

注意: 子代肯定是后代，但是后代不一定是子代

6. 5 伪类选择器

一般用于a标签

其他标签有没有伪类？ :hover :active是能使用的。

6.5.1 link

单击前的样式

.link1:link {
      color: hotpink;
    }

6.5.2 hover

鼠标移上去的样式

.link1:hover {
      color: purple;
    }

6.5.3 active

单击时的样式

.link1:active {
      color: blue;
    }

6.5.4 visited

单击结束后的样式

.link1:visited {
      color: red;
    }

7 必备小技巧

7.1 去除a标签的下划线

text-decoration: none;

7.2 去除ul默认的小点

list-style: none;

7.3 清除浏览器缓存

ctrl+shift+del 因为每次单击都会有缓存