2019-03-08

CSS样式：

简介

HTML

如何展现数据

CSS

进行美化

JS

实现数据动态化

动态站的实现

概要

Cascading Style Sheets(层叠样式表)

作用

实现内容显示跟样式分离

方便项目维护

实现重用

是个元素用到同一个样式

heigtht =120  width=100

如何使用

三种方式

在元素中使用style属性

不推荐使用

11111

​

在head标签中使用style标签

通过外部文件引入

第一步在工程根目录下新建css文件夹

第二歩在css文件中创建.css文件

右键--->new---> StyleSheet

第三步在需要的html文件中的head标签中使用link标签引入.css文件

分类

内联样式

第一种

内部样式

第二种

外部样式

第三种

语法格式

选择器 {属性:值; 属性:值;....}

说明

css样式由 选择器和声明组成

声明使用大括号{}

在大括号中使用 属性:值的方式

多个属性:值用分号隔开

最后一个属性可以省略分号

示例代码

p { height: "100px"}

选择器

作用

当我们要设置元素样式的时候,通常要先找到要设置样式的元素

基本选择器

ID选择器

在html的元素中设置id属性

在css代码中使用#id的方式去选择

class选择器

html的元素中使用class属性

css代码中使用  . 类名

元素选择器(标签选择器)

对html指定标签起作用

html

​

​

css

p{}

*

匹配所有元素

子类选择器

选择器标签的子类元素

语法格式

选择器 > 选择器 > ..

后代选择器

语法格式

匹配子类还有孙子类,依次类推

伪类

选择器:hover

盒子模型

前期准备知识

块级元素

特点

独占一行

div p  h ul ol dl li table  tr form

可以设置宽高

内联元素

特点

不独占一行

不能设置宽高

元素

a span  lable

内联块

特点

不独占一行

可以设置宽高

元素

img input

四个属性

内容

width

取值

数字+单位

100px

百分比

参照父类容器的宽度

50%

heigth

取值

数字+单位

100px

百分比

参照父类容器的高度

50%

边框

border

语法格式

border:边框的大小,样式,颜色

取值

边框大小

1px

百分比

样式

solid

颜色

字母

red

white

16进制

#FFFFFF

常用

border

四个方向设置相同

border-left: 1px solid blue;

border-right: ;

border-bottom: ;

border-top: ;

内边距

padding

语法格式

padding:10px;

四个方向设置一样

两个值

三个值

四个值

注意

pading设置多个值,方向顺时针,从上->右-->下-->左

外边距

margin

注意事项

块级元素上下的边距取大值而不是相加,内联元素或者内联块 左右的外边距相加

内联元素无法设置margin-top margin-bottom  但是设置left和right

margin可以设置负值,如果设置成负值朝相反的方向移动

浮动

文档流

浏览器对元素的排版,从左右至右,从上至下的摆放元素

作用

打破正常的文档(脱离文档流)

概念

浮动就是元素可以向右向左移动,直到浮动的元素外边缘碰到包含框或者另外一个浮动元素就会停止

语法格式

float

子主题 1

可选值

left

right

注意事项

当我们使用了浮动,内联元素就会变成块级元素

不足

会造成父类容器高度塌陷

解决方案

清除浮动

固定套路

.clear {zoom: 1;}

.clear:after {    content: "";    display: block;    width: 0;    height: 0;    visibility: hidden;    clear: both;}

使用原则

在子元素上使用浮动,.在父类容器中清除

元素类型转化

display

子主题 1

可选值

block

将其他元素转化成块级元素

inline

将其他类型的元素转化成内联元素

inline-block

将其他类型的元素转化内联块元素

XMind: ZEN - Trial Version