css(表现层)Cascading Style Sheets层叠样式表

HTML:===> 结构层 css:===> 表现层 js:===> 行为层


css的常用三种类型选择器:

1、基本选择器:

id

class

标签

*

逗号选择器(,)


2、包含选择器:

子代选择器(>)

后代选择器(空格)


3、属性选择器:

[name]

[name=value]

[name^=value]

[name$=value]


css常用样式:

height:

width:

border:1px solid #fee;

color:

background:

display:

css(表现层)Cascading Style Sheets层叠样式表_第1张图片


定位问题:

position:

DIV+CSS页面布局(盒子模型)


css(表现层)Cascading Style Sheets层叠样式表_第2张图片


css(表现层)Cascading Style Sheets层叠样式表_第3张图片

box-shadow: 4个参数,上下 ,左右 ,模糊度,颜色。

box-shadow: 3个参数,上下 左右 ,模糊度,颜色。

css(表现层)Cascading Style Sheets层叠样式表_第4张图片


一、css的三种引入方式:

css(表现层)Cascading Style Sheets层叠样式表_第5张图片

二、css选择器的类型:

css(表现层)Cascading Style Sheets层叠样式表_第6张图片

1.基本选择器

css(表现层)Cascading Style Sheets层叠样式表_第7张图片

2.包含选择器

css(表现层)Cascading Style Sheets层叠样式表_第8张图片

3、属性选择器

css(表现层)Cascading Style Sheets层叠样式表_第9张图片

+选择器:

css(表现层)Cascading Style Sheets层叠样式表_第10张图片

三、字体样式的设置

css(表现层)Cascading Style Sheets层叠样式表_第11张图片

background

css(表现层)Cascading Style Sheets层叠样式表_第12张图片

display

css(表现层)Cascading Style Sheets层叠样式表_第13张图片

hidden

css(表现层)Cascading Style Sheets层叠样式表_第14张图片

定位:

css(表现层)Cascading Style Sheets层叠样式表_第15张图片

弄明白绝对定位还是相对定位:

css(表现层)Cascading Style Sheets层叠样式表_第16张图片


css(表现层)Cascading Style Sheets层叠样式表_第17张图片

float:浮动

你可能感兴趣的:(css(表现层)Cascading Style Sheets层叠样式表)