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:下外边距

注:资料均为网上查找,如有侵权请联系管理员删除!

  • 发表于:
  • 原文链接:http://kuaibao.qq.com/s/20180130G0D9OS00?refer=cp_1026

相关快讯

扫码关注云+社区