首页 > 代码库 > css标签
css标签
CSS代码的语法规则
l CSS代码它是由选择器和一对大括号组成
l 大括号里面由一条一条声明语句组成
l 每一条语句的后面都需要写一个英文状态下面的分号
l 每一条语句它都是“属性:属性值”这种格式组成的
l 属性值一般情况下不需要加引号
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 |
设置文本的水平对齐方式 取值：left、right、center |
|
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:水平位置 垂直位置 关于位置的表示方式有三种：英文单词、固定值、百分比 英文单词： 水平位置：left、center、right 垂直位置：top、center、bottom |
|
background |
简写属性 它的值个数不定 顺序不定 |
浮动
float：它是用来实现让一个元素浮动 取值有两个：left(向左浮动)、right(向右浮动)
清除浮动
l 使用清除浮动的属性 clear 这个属性取值有三个：left(清除左浮动)、right(清除右浮动)、both(两个都浮动) 这个清除浮动的属性它一般是用在浮动元素的最后面 我们会在浮动元素的最后面新建一个空白的div 这个div里面不要放置任何的内容 这个div它就是用clear这个属性来实现清除浮动
l 使用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标签