您现在的位置:首页 >> 前端 >> 内容

CSS01

时间:2016/9/3 9:15:12 点击:

  核心提示:◆Css概念CSS 指层叠样式表 (Cascading Style Sheets)级联样式表◆Css与html的关系Css以html为基础的。Css主要设置的就是html标签中的属性样式,css进行网...

◆Css概念

CSS 指层叠样式表 (Cascading Style Sheets)级联样式表

◆Css与html的关系

Css以html为基础的。

Css主要设置的就是html标签中的属性样式,css进行网页布局。

◆Css语法

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

选择器:就是一个选择谁的过程。

属性 赋值 介绍
color color: red;前景色(文字颜色)
font-size font-size: 20px;设置文字大小
width width: 30px;设置宽度
Height height:30px;设置高度
Background-color background-color:red;设置背景颜色
Text-align text-align:center; left|right;文字居中
Text-indent text-indent: 2em;首行缩进

Px:像素

注意:

Text-align:center; 在块级元素中可以让文字居中

注意:

选择器

浮动

盒子模型

定位


◆Css书写位置介绍

内嵌式写法

CSS01

 

◆选择器的分类

?基础选择器

◆标签选择器

◆类选择器 (☆☆☆☆☆)

◆id选择器

◆通配符选择器

?复合选择器

◆标签指定式选择器 (☆☆☆☆)

◆后代选择器 (☆☆☆☆☆)

◆并集选择器


标签选择器

标签:就是html中的标签。

用法:

   标签名{属性:值;  属性:值;}
CSS01

补充:

颜色的显示方式:

? 直接设置对应颜色的名称

CSS01

? 通过十六进制显示

以#开头 0-ff

CSS01

?通过rgb方式显示

R: 代表的是红色(red) 0-255

G: 代表的是绿色(green) 0-255

B: 代表的是蓝色(blue) 0-255

?rgba

a: 设置透明度 alpha 0-1


CSS01


类选择器(重点)

用法:

.自定名称{属性:值;}

调用:

标签通过class属性调用类样式

CSS01

特点:

? 谁调用谁改变,多个标签可以同时调用一个类样式

? 一个标签可以调用多个类样式(相当于人的名字)

类的命名规范

CSS01

?不能以纯数字或者以数字开头定义类名

?不推荐使用汉字定义类名

CSS01

?不能以特殊符号或者以特殊符号开头(“_”除外)定义类名

?不建议使用标签名或者属性名定义类名


Id选择器

用法:

CSS01

调用:

通过id属性调用样式

CSS01

特点:

?不建议多个标签使用同一id选择器的样式(id和js配合使用)

?一个标签只能调用一个id样式


通配符选择器

用法:

*{属性:值; 属性:值;}


CSS01

特点:

?将页面中所有的标签都选中,设置样式

?进行页面样式的初始化

补充:

在写样式的时候(类选择器),如果有样式代码重复使用的时候,我们要提取公共类。


CSS01

字体相关属性

Font-size: 设置文字大小

Font-family: 设置文字字体

Font-weight: 设置文字加粗

Font-style: 设置文字斜体

Line-height: 行高


Font-family

直接设置汉字

CSS01

设置对应字体的英文

CSS01

可以设置unicode编码

Font-family可以设置多个值

CSS01

Font-weight

取值方式:

? 直接设置数字 100-900

? bold (字体加粗) 效果与700-900

? normal(文字字体正常显示)

注意:文字加粗显示,推荐使用 font-weight:700;

CSS01

Font-styl e(斜体)

? italic 文字斜体显示

? normal 文字正常显示

Font属性联写

用法:

font: font-style  font-weight  font-size/line-height    
     font-family 

CSS01

注意:

? font属性联写必须有font-size 和font-family(其他属性可以不写)

? font-size 和font-family的顺序不能换

标签指定式选择器

用法:

标签名.选择器名{属性:值; 属性:值;}

特点关系: 既。。。又。。。。

CSS01

或者

CSS01

后代选择器

特点:

标签之间必须属于嵌套关系。

用法:

选择器 +空格+ 选择器{属性:值; 属性:值;...}

特点:

选择器之间必须有空格

关系:

父与子的关系


并集选择器

用法:

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

作用:

将样式集体声明,css样式初始化。

特点:

并集选择器之间必须用逗号隔开!

CSS01

margin: 0 auto; 让盒子居中显示。



Tags:CS SS S0 01 
作者:网络 来源:我的博客