什么是css?
css的中文含义为层叠样式表
我的理解就是在通过连接html文件 把要修饰的东西单拎出来放到css中 来优化html文件 的代码 增加可读性 方便于修改;
css的语法结构
标记{ 属性:属性值;属性:属性值;} 属性值末尾要加分号 属性后加冒号 大括号包围
yangshi {color:red;}
css 的应用场景(优先级)
标记内的样式
语法结构:
<style type = 'text/css'>
标记{属性:属性值}
</style>
外链式的结构: 项目中常用通用的模式
单独为一个样式文件
语法结构:
<link/>
属性:type 属性值:text/css
href 属性值:文件的地址
rel属性值:stylesheet
<link type='text/css' href='文件地址' rel='stylesheet'/>
位置:放在html中 的head部分
导入式 样式
语法结构:
<style type='text/css'>
@import url('文件地址’)
</style>
位置同样放在head里面
优先级:标记内>内嵌式>导入式
注意内嵌和外链式的执行顺序
css中的选择器
标签选择器
id选择器:
<div id="名称"></div> 盒子 名称不能是中文、不能是纯数字、只能写英文或者拼音 不能数字开头
id选择器的样式唯一
样式表中找id选择器
格式:
#名称{属性:属性值;}
class选择器:
<div class="名称"></div> 名称不能是中文、不能是纯数字、只能写英文或者拼音 不能数字开头
class样式是可以重复的
样式表中找id选择器
格式:
.名称{属性:属性值;}
后代选择器(派生选择器):
语法结构:选择器名称 标签/选择器
例如:
#box a{ 属性:属性值;}
伪类选择器:
专门修饰超链接
语法结构:
标记/选择器名:伪类选择器名称{ 属性:属性名;}
:hover 鼠标悬停
:link 超链接本身 a
:visited 访问过
:active 激活 鼠标点击一瞬间产生的样式
l-v-h-a 同时设置的时候 顺序
· 全局选择器
去除掉页面中多余的间距 padding、margin
* { padding:0;margin:0}
群组选择器:
样式相同,在一起设置
语法结构:
选择器名称 其他选择器的名称
#div p,.box p{ 属性:属性值;}
css中的单位:
像素(px)
百分比(%)
css属性:
文字属性:
· font-size 文字大小
· font-family文字字体 属性值:系统字体 默认是宋体 注意:字体加双引号
· font-weight文字加粗 属性值:bold
· font-style文字样式 属性值:normal 普通样式、italic
· color 文字颜色(rgb、rgba)
· text-indent首行缩进 用于段落
· text-align文字位置 属性值:left、center、right
· text-decoration 文字修饰 属性值:none 没有下划线、underline 加下划线、overline 加上划线、line-through 加删除线
一般用于修饰超链接
· line-height 行高(行间距)
· letter-spacing 字间距
· text-transform 形式转换 属性值:uppercase 完全转换成大写、lowercase 完全转换成小写、none 不转、capitalize 首字母转 换成大写 适用于字母
边框属性:
· border-left 左边框
· border-right 右边框
· border-top 上边框
· border-bottom 下边框
border:上 右 下 左
语法结构:
border: 线宽 线型(solid 实线 dashed 虚线(杠) dotted 虚线(点) ) 线色
例如:
border: 1px solid #00ff00
padding内部白属性:
· padding-left 左内边距
· padding-right 右内边距
· padding-top 上内边距
· padding-bottom 下内边距
注意事项:使用padding 会增加div的容量 如果设置左右方向,则需要用宽度减去设置的padding值,反之用高度减去设置的 padding值
margin外补白属性:
· margin-left 左外边距
· margin-right 右外边距
· margin-top 上外边距
· margin-bottom 下外边距
背景属性:
· background-color 背景颜色
· background-image 背景图片
· background-repeat 是否重复
重复:repeat
不重复:no-repeat
x轴方向:repeat-x
y轴方向:repeat-y
· background-position 图片定位
属性:水平方向:left、center、right
垂直方向:top、middle、bottom
定位属性:
· 绝对定位 absolute
· 相对定位 relative
· 静态定位 static(默认) 相当于没有定位
· 固定 fixed
· 层叠加 z-index
· top、left、right、bottom
(注意父层为相对子层为绝对)
布局属性:
· 浮动布局 float 属性值:left、right
· 清除浮动布局 clear 属性值:both 清除两侧浮动、left、right、none 不清除
· 是否显示/行元素修改为块元素 display 属性值:none 隐藏元素、block 行元素修改为块元素
· 超出内容隐藏 overflow
属性值:
hidden 内容会被修剪,并且其余内容是不可见的。
visible 默认值。内容不会被修剪,会呈现在元素框之外。
auto 如果内容被修剪,则浏览器会显示滚动条以便查看其余的内容。
scroll 内容会被修剪,但是浏览器会显示滚动条以便查看其余的内容。
· 是否显示对象 visibility
属性值:
visible 默认 可见、
hidden 不可见 、
collapse 使用表格时候隐藏一行或者一列,也可以用于表单
鼠标属性:
· cusor 属性值:default(默认)、move、pointer 小手、text、url
无序列表属性:
· list-style 属性值:none
· list-style-type 属性值:none
尺寸属性:
· width 属性值:像素、百分比
· height 属性值:像素
(关于各种属性值 这边建议亲们还是 全部背会呢 :D