首页 > 代码库 > css标签

css标签

CSS代码的语法规则

 

 

l CSS代码它是由选择器和一对大括号组成

大括号里面由一条一条声明语句组成

每一条语句的后面都需要写一个英文状态下面的分号

每一条语句它都是“属性:属性值”这种格式组成的

l 属性值一般情况下不需要加引号

如果属性值是数值  那么一般情况下要加单位   px  像素

CSS代码中千万不要出现HTML的标记   

 

快速入门

 

标签的通用属性

class:表示一类的意思  如果拥有相同的class属性值 那么这些就称之为一类

id:它相当于身份证号码   在一个HTML文档中 必须是唯一

title:设置标题

name:设置名称

style:样式属性

尺寸样式属性

属性名

功能

width

给元素设置宽度  要记得加px

height

给元素设置高度  要记得加px

 

 

 

文本与字体样式属性

属性名

功能

color

给文本设置颜色

font-size

给文本设置大小

font-weight

给文本进行加粗  

取值:normal(正常的  不加粗)

      bold(加粗)

font-style

设置文本给斜体  

取值:italic

font-family

用于给文本设置字体  

text-align

设置文本的水平对齐方式

取值:leftrightcenter

text-transform

大小写转换、首字母大写

取值:

uppercase(将小写字母转换为大写字母)

lowercase(将大写字母转换为小写字母)

Capitalize(首字母大写)

text-indent

用于实现首行缩进  一般都给p标记来使用

line-height

行高  一行高度

它主要是用来设置一行中的文本垂直居中对齐  让行高的值与高度的一样就可以实现

 

 

列表样式属性

属性名

功能

list-style-type

用来将列表前面的项目符号给清除掉

取值:none()disc(实心园)circle(空心园)square(小方块)

list-style-position

用于设置列表前面符号的位置

取值:inside(在里面)outside(在外面 默认值)

list-style-image

将列表前面的项目符号设置为一张图片

例如:

list-style-image:url(图片的路径)

list-style

简写属性

list-style它的值个数不定 顺序不定

每一个值之间都要使用空格来分隔

list-style:none url(图片的地址) inside;

 

超级链接的不同状态有哪些?

正常状态  未访问之前的状态

访问过后的状态

鼠标放上状态  只是把鼠标放上超级链接的上面 但是没有点击鼠标的左键

激活状态   按下鼠标左键的那一瞬间

伪类选择器的标识:

 

正常状态 :link{格式声明语句;}

访问过后的状态 :visited{格式声明语句;}

鼠标放上状态 :hover{格式声明语句;}

激活状态 :active{格式声明语句;}

 

注意:

伪类选择器它是有顺序的   

这里顺序要遵守:爱恨准则  先要有爱 才有恨  “Love  hate

 

属性选择器

属性选择器它是跟标签中的属性有关

<table   width=”100”></table>

 

1)格式:[attr]{格式声明语句}  attribute   

作用:匹配拥有指定属性的元素  这里只跟属性名有关 跟属性值没有关系

2)格式:[attr=val] {格式声明语句}

作用:匹配attr这个属性的是val

 

3)格式:[attr^=val] {格式声明语句}

作用:匹配attr这个属性的属性值是以val开头的所有元素

4)格式:[attr$=val] {格式声明语句}

作用:匹配attr这个属性的属性值是以val结尾的所有元素

5)格式:[attr*=val] {格式声明语句}

作用:匹配attr这个属性的属性值只要是包含了val的所有元素

 

 

背景样式属性

属性名

功能

background-color

设置背景颜色

background-image

设置背景图片

background-repeat

设置背景图片是状态

取值:no-repeat(不平铺)

repeat-x(水平方向进行平铺)

repeat-y(垂直方向进行平铺)

background-position

设置背景图片的位置

写法:backgound-position:水平位置 垂直位置

关于位置的表示方式有三种:英文单词、固定值、百分比

英文单词:

     水平位置:leftcenterright

     垂直位置:topcenterbottom

background

简写属性  它的值个数不定 顺序不定

 

浮动

float:它是用来实现让一个元素浮动  取值有两个:left(向左浮动)right(向右浮动)

 

清除浮动

使用清除浮动的属性  clear  这个属性取值有三个:left(清除左浮动)right(清除右浮动)both(两个都浮动)   这个清除浮动的属性它一般是用在浮动元素的最后面  我们会在浮动元素的最后面新建一个空白的div 这个div里面不要放置任何的内容  这个div它就是用clear这个属性来实现清除浮动

使用overflow:hidden来清除浮动  它主要是给无序列表来使用

overflow:hidden;这个主要作用是用来将溢出的部分进行隐藏  

 

 

给浮动元素的父元素设置一个固定的高度  但是这个方法不建议使用 因为一个元素的高度它应该是由其内容来决定   

 

position

position:它的英文意思“位置”的意思

它在CSS中主要是用来实现对一个元素的定位

CSS中定位有三种方式:

固定定位 position:fixed

相对定位 position:relative

绝对定位 position:absolute

 

注意:

要实现一个元素的定位 那么一定使用定位的坐标

left:表示定位的元素离左边多远

right:表示定位的元素离右边多远

top:表示定位的元素离上边多远

bottom:表示定位的元素离下边多远

 

box- shadow

盒子阴影

box-shadow水平阴影  垂直阴影  阴影的模糊大小  阴影的大小  阴影的颜色  阴影在哪里

 

 

text-shadow

 

 

border-collapse

border-collapse:collapse;  它主要是用来设置很细的表格边框线

 

css标签