CSS学习

01.HTML教程/css简介/基础

一、CSS的简介

1.什么是CSS

层叠式样式表（Cascading Style Sheets）

CSS是对HTML修饰的语言

层叠式 ：层层覆盖叠加 如果同一个CSS对HTMl冲突的 有优先级问题

样式表：CSS属性样式的集合

2.CSS的作用

A.可以对HTML进行修饰 使HTML更加美观

B.提高样式表的复用率

C.将文本与样式完全分离

3.CSS引用样式 和书写规范

1)内嵌样式

把CSS样式嵌入到HTML当中 使用一次

我的第一个CSS

语法：

1)使用style属性将CSS样式嵌入到HTML中

2)属性的书写规范 属性：属性值；

3)多个属性使用分号分割

不建议使用：违背W3C标准

2)内部样式

在head标签中使用style进行样式引用 本页面都可以使用该样式

语法：

1)使用style标签引入CSS样式的

link与import的区别**

1)link所有浏览器都支持 import部分IE低版本浏览器不支持

2)先加载HTML文件再加载样式文件

3)import不支持js动态修改

二、CSS选择器*

1.基本选择器

A.标签选择器

语法：

HTML标签

案例：

HELLOWORLD样式

B.id选择器 id唯一标识

#id的名字

案例：

HELLOCSS1

HELLOCSS2

C.class选择器

.class选择器名称

案例：

div1

div2

总结：优先级： id>class>标签

D.属性选择器

语法：

基本选择器[属性=‘属性值’]

案例：

username:

password:

E.伪元素选择器

a标签的伪元素选择器

语法：

静止状态：a:link

悬浮状态：a:hover

触发状态：a:active

完成状态：a:visited

案例：

点击我吧

F.层级选择器

语法：

父级选择器 子级选择器 ...

案例：

div1

div2

div1

div2

三、CSS样式*

1.文字属性

font-size:大小

font-family:字体类型

2.文本属性

color:颜色

text-decoration:下划线

text-align:对齐方式(水平)

left center right

案例：

HELLOCSS

点我吧

3.背景属性

background-color:背景颜色

background-image:背景颜色

属性值 url("图片地址");

background-repeat:平铺方式

repeat：横纵平铺 默认

repeat-x:横向平铺

repeat-y:纵向平铺

no-repeat:不平铺

案例

4.列表属性

list-style-type:列表项前的小标志

属性：属性值特别多

list-style-image:列表项前的小图片

属性值：url("图片地址")

案例：

苹果

香蕉

桃子

5.尺寸属性

width：宽度

height:高度

案例：

div1

div2

6.显示属性

display

属性值：

none;（隐藏）

block;块级显示

inline;行级显示

案例：

div1

div2

span

点击我

a:hover #d1{

width:200px;

height:200px;

border:1px solid red;

display: block;

}

7.浮动属性

float:

属性值：left

right

clear:

属性值：

left

right

none

both(清除所有)

缺点：

1.影响相邻元素不能正常显示

2.影响父级不能正常显示

四、盒子模型

border:边框

border-width:边框宽度

border-color:边框颜色

border-style:边框的样式

border-top:上边框

border-left:左边框

border-right:右边框

border-bottom:下边框

border:1px 2px 3px 4px

border:1px 2px 上下 1 左右 2

border:1px

border:1px 2px 3px 上 1 右左 2 下 3

顺序：上右下左

padding:内边距

padding-top:上内边距

padding-left:左内边距

padding-right:右内边距

padding-bottom:下内边距

margin:外边距

margin-top:上外边距

margin-left:左外边距

margin-right:右外边距

margin-bottom:下外边距

注：资料均为网上查找，如有侵权请联系管理员删除！