2020-03-11

CSS简述

HTML》》页面的结构》》 人的面部

CSS》》 美化页面》》 给人化妆

CSS:层叠样式表

层叠：一层一层叠加

样式表：存储样式的地方，多个样式

CSS可以使HTML页面更好看，CSS+DIV布局更加灵活，更容易绘制出用户需要的结构。

CSS作用：修饰HTML页面，更丰富多彩地展示超文本信息

二.CSS入门案列

1.创建一个HTML文件

2.在HTML上创建一个字体标签

3.字体标签中新增一个style属性，并修改style属性值

三。为什么使用CSS替代HTML属性设置样式

因为HTML属性在单独使用时有一定的局限性，所以要配合CSS样式代码才可以展示更为丰富的效果

四。CSS的代码规范

1。放置规范

2.格式规范

选择器名称（属性名：属性值；属性名：属性值；。。。。。）

3.代码规范

属性名和属性值之间用：链接，最后;结尾

CSS注释：/**/  等同于java的多行注释

五。CSS选择器

1.基本选择器

<1>元素选择器

HTML标签又叫HTML元素

以HTML标签名作为选择器名称 

2.id选择器

每个HTML标签都有一个id属性，id的属性值必须在本页面是惟一的

以HTML的id的属性值作为选择器名称

3.类选择器

每个HTML标签都有一个class属性，class属性值即为类名

以HTML的类名（class属性值）作为选择器名称

六、边框属性

所有的HTML标签都有边框，默认边框不可见

border设置边框的样式

格式：宽度样式颜色;

例如：border: 1px solid red; 表示1像素粗的实线红色边框

线条样式：solid实线、none无边框、double双线边框

七、布局

float

通常默认的排版方式，将页面中的元素从上到下一一罗列，而实际开发中，需要左右方式进行排版，就需要使用浮动属性

格式：选择器{float:属性值;}

八、转换

display

块元素：独占一行，常见：h1 p div ul li……

行内元素（内联元素）：只占自身大小，自动换行，常见：span a input……

display属性可以使得元素在行内元素和块元素之间相互转换

格式：选择器{display:属性值;}

九、字体

font-size：用于设置字体的大小

color：用于设置字体的颜色

十、CSS盒子模型

1、什么是盒子模型

所有HTML元素，我们都可以看成一个四边形，即一个盒子

用CSS来设置元素盒子的内边距、边框、外边距的样式的方式，称为盒模型