简介
- CSS:指层叠样式表 (Cascading Style Sheets)
- 样式层叠:样式层叠就是对一个元素多次设置同一个样式,将使用最后一次设置的属性值
语法
样式层叠的优先级:内联样式–>内部样式表–>外部样式表–>浏览器缺省设置
css规则由两个主要的部分构成:选择器,以及一条或多条声明:
选择器 声明一 声明二 h1 {color:blue; font-size:12px;} css颜色
- p{color:#ff0000;} #十六进制的演示
- p{color:#f00;} #十六进制的缩写,即对于#rrggbb的颜色,可以用#rgb来表示
- p{color:rgb(255,0,0);} #rgb方式
- p{color:rgb(100%,0%,0%);} #rgb的百分百方式,一定得写成0%
id选择器,clas选择器
id选择器:css 中 id 选择器以 “#” 来定义
class选择器:css 中,类选择器以一个点”.”号显示内联样式,内部样式表,外部样式表
外部样式表:在外部以css结尾的文件中定义,然后在head之间用
<link rel="stylesheet" type="text/css" href="mystyle.css">
引入
内部样式表:在head之间,用<style>
标签定义
内联样式:在标签内使用style属性定义选择器优先级列表,从低往高,数组7优先级最高
- 通用选择器(*)
- 元素(类型)选择器
- 类选择器
- 属性选择器
- 伪类
- id选择器
- 内联样式
!important 规则例外:使用
!important
的样式,该样式会覆盖CSS中任何其他的样式声明。不建议使用对于复杂的选择器,可使用“权重计算”方式来判别
权重规则:内联样式=1000,id选择器=100,class类选择器=10,html标签选择器=1
选择器选用优先级规则:- 选择器都有一个权值,权值越大越优先
- 当权值相等时,后出现的样式表设置要优于先出现的样式表设置
背景(backgrouds)
background-color 不能继承,其默认值是 transparent
background的多个属性可以简写,顺序如下- background-color
- background-image
- background-repeat,背景图片重复,参数值有:no-repeat(不重复平铺),repeat-x(水平方向平铺),repeat-y(垂直方向平铺)
- background-attachment,背景图片固定,参数值有:fixed(浏览器窗口滚动,图片固定不动),scroll(默认值,图片随浏览器窗口一起滚动)
- background-position
文本(text)
color: 颜色
text-align: 对齐方式
text-decoration: 文字修饰,参数值有:uderline(下划线),overline(上划线),line-through(删除线),blink(使文字闪烁),none
text-transform: 字母大小写转换,参数值有:uppercase(全大写),lowercase(全小写),capitalize(单词首字母大写),none(默认),inherit(从父元素继承)
text-indent: 首行缩进
word-spacing: 文本间隔
letter-spacing: 字符间隔字体(fonts)
font-family: 字体系列
font-style: 字体样式,参数值有:normal(默认),italic(斜体),oblique(倾斜),inherit(从父元素继承)
font-size: 字体大小,有px,em之分,
详见:https://blog.csdn.net/jingru2017/article/details/79099464
font-weight: 字体粗细链接(link)
四种状态(a:hover 必须跟在 a:link 和 a:visited后面;a:active 必须跟在 a:hover后面):
- a:link - 正常,未访问过的链接
- a:visited - 用户已访问过的链接
- a:hover - 当用户鼠标放在链接上时
- a:active - 链接被点击的那一刻
color: 颜色修饰
text-decoration: 文本修饰
background-color: 背景颜色修饰列表样式(ul)
ul: 无需列表
ol: 有序列表
list-style-type: 列表项标记(无序的为形状,有序的为字母)
list-style-image: 列表项标记的图标
属性缩写顺序:- list-style-type
- list-style-position
- list-style-image
表格(table)
border-collapse: 折叠边框(即把两行边框变成一行边框)
text-align: 表格文字水平对齐
vertical-align: 表格文字垂直对齐盒子模型
css 盒模型本质上是一个盒子,封装周围的HTML元素,它包括:边距,边框,填充,和实际内容
- Margin(外边距) - 清除边框区域。Margin没有背景颜色,它是完全透明
- Border(边框) - 边框周围的填充和内容。边框是受到盒子的背景颜色影响
- Padding(内边距) - 清除内容周围的区域。会受到框中填充的背景颜色影响
- Content(内容) - 盒子的内容,显示文本和图像
总元素的宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距
总元素的高度=高度+顶部填充+底部填充+上边框+下边框+上边距+下边距
盒模型是区分方向的,顺序为上右下左边框(border)
border-style: 边框样式,也可以单独设置某一边,顺序为:上右下左,若书写缺省,自动以相对方向的边框样式为默认值
border-width: 边框宽度,1)长度设置,如2px,0.1em;2)关键词:thin,medium,thick
border-color: 边框颜色
属性简写顺序:border-width,border-style,border-color轮廓属性(outline)
轮廓(outline)是绘制于元素周围的一条线,位于边框边缘的外围,可起到突出元素的作用
outline-color: 外边框颜色
outline-style: 外边框样式
outline-width: 外边框宽度
属性简写顺序:outline-color,outline-style,outline-width外边距(margin)
填充(padding)
分组和嵌套
分组可以将具有相同样式的选择器进行分组,减少代码量
嵌套适用于选择器内部的选择器的样式显示(display)与可见性(visibility)
display(显示):其隐藏某个元素,且隐藏的元素不会占用任何空间
visibility(可见性):其隐藏某个元素,但隐藏的元素仍需占用与未隐藏之前一样的空间定位(positioning)
position: 定位类型
z-index: 元素的堆叠顺序,数值大的在前面
overflow: 当元素的内容溢出其区域时发生的事情,参数值有:auto, hidden, scroll, visible, inherit浮动(float)
clear: 清除浮动
float: 指定一个盒子(元素)是否可以浮动组合选择符
使用组合选择符可以让你直观的明白选择器与选择器之间的关系
- 后代选取器(以空格分隔),即所有子类
- 子元素选择器(以大于号分隔),即直接子类
- 相邻兄弟选择器(以加号分隔),即紧接在另一元素后的元素,且二者有相同父元素
- 普通兄弟选择器(以波浪号分隔),即所有指定元素的相邻兄弟元素
伪类
语法:selector:pseudo-class {property:value;},即 选择器:伪类名 {属性名:属性值}
伪元素
伪类与伪元素的区别:https://blog.csdn.net/q1056843325/article/details/53560588
导航栏
导航栏=链接列表,使用 ul , li 表示
下拉菜单
样式:.dropdown, .dropdown-content, .dropdown:hover .dropdown-content
display属性的值:inline, block, inline-block的区别
https://blog.csdn.net/kalama/article/details/79057686
哪些是行内元素,哪些是块元素???图片廊
图像透明,不透明
opacity属性:不透明度,从0.0(完全透明)到1.0(完全不透明)
图像拼合技术
#home{background:url('/xxx/img_navsprites.gif') no-repeat -10px 0;}
no-repeat后面的两个数值,代表背景图片移动的方向。
参数一:为负,表示背景图像向左移动;为正,表示背景图像向右移动
参数二:为负,表示背景图像向上移动;为正,表示背景图像向下移动属性选择器
属性选择器:
[title]{}
属性和值选择器:[title=w3cschool]{}
属性和值的选择器 - 多值[title~=hello] { color:blue; }
,~符号,表示属性值可以由多个单词组成,符合其中的一个即可[lang|=en] { color:blue; }
,|符号,表示属性值是以“en”开头,且只有一个单词
表单样式:input[type="text"]{}