Css
Cascading style sheets 层叠样式列表
Css不仅可以静态的修饰网页,还可以配合配合各种脚本语言动态的对网页元素进行格式化。
Css作用
结构和样式分离,是的后期易于维护和修改。
可以使用多套样式,使网页由任意样式的切换效果
页面载入更快,降低服务器成本
样式分类
样式分为内部样式、外部样式、行内样式。
内部样式
<style type="text/css>
p{
Background-color:red;
Font-size:20px;
}
外部样式
<link rel=”stylesheet” type=”text/css” href=”index.css”>
Css文件内写入
P{
Background-color:red;
Font-size:20px;
}
行内样式
<p style=" Background-color:red;Font-size:20px;"></p>
选择器
标签选择器
P{
Background-color:red;
Font-size:20px;
}
定位需要修改格式的位置
类选择器
<style type="text/css>
.xz{
Background-color:red;
Font-size:20px;
}
<p class=“xz”>类选择器类选择器</p>
Xz作为类标签定位要修改的部分
Id选择器
<style type="text/css>
#xz{
Background-color:red;
Font-size:20px;
}
<p id=“xz”>类选择器类选择器</p>
背景设置
Background-color 背景颜色
Background-image 背景图片 url(地址)
Background-repeat 背景图片的重复方向 默认repeat repeat-x横向 repeat-y纵向 no-repeat不重复
Background-attachment 背景是否随着滚动条滚动 scroll fixed
Background-position 背景图片起始位置 top/buttom/left/right center/left/right如果只定义了一个值那么另一个指为center x% y% 如果只定义了一个值那么另一个指为50%
X px ypx如果只定义了一个值那么另一个指为50%
如果主要修改背景可以写成
Body{
background: yellow url(image/1.jpg)repeat scroll/….
}
符合属性可以来整体定义
注释
/*----*/
文本样式
Color 单词 十六进制#000000 rgb(255,255,255) 文本颜色
Direction ltr rtl 文本书写方向
Letter-spacing npx可以为负数 字符间距
Line-height npx 行高
Text-align left right center justify 对齐方式
文本修饰
text-decoration none underline overline line-through 文本的修饰:下划线
text-shadow h-shadow(px)v-shadow(px) blur模糊程度 color颜色文本设置阴影】
text-transform none capitalize首字母大写uppercase全部大写lowercase 全部小写
text-indent npx Nem(em表示字符单位) 首行缩进
字体类
定义文本大小,字形
font-family 隶书、宋体、楷体等字体 设置字体
font-style normal italic部分斜体 oblique 规定斜体的文本
Font-weight normal bold 100-900 文本加粗
font-size npx 字体大小
列表样式
list-style-type none,disc,circle,square,decimal…. 设置列表项目的外观
list-style-position inside,outside 列表符号的位置
list-style-image url,none 把图片设置为列表项目的标记
list-style 同前面三个 简写属性,涵盖以上三个列表样式属性
伪类选择器
大多在超链接中使用。
:alink 未访问的链接
:visited 已经访问过的链接状态
:hover 鼠标悬挂在链接上的状态
:active 向点击的链接设置样式
:focus 选择拥有键盘输入焦点的元素 大都在文本框中使用 大多不和focus一起使用
结构性伪类
First-child 选择元素的第一个元素
Last-child 选择某个元素的最后一个元素
Nth-child(n)选择某个元素的一个或者多个特定的子元素
Nth-last-child(n)选择某个元素的一个或者多个特定的子元素 从这个元素的最后一个子元素开始
First-of-type 选择一个上级元素下的第一个同类子元素
伪元素选择器
::selection 选择内容设置样式
::before 在选中的项目之前写入内容 content:“内容内容”
::after 在选中的项目之后写入内容 content:“内容内容” before于after设置的内容无法被选中
::first-line 选中内容的首行设置样式 p::first-line{ }
::first-letter 首个文字设置样式
Css其他选择器
1、id * 选择指定元素中被用户选中的内容
2、逗号选择器 , 联合选择器
3、空格选择器 子孙(后代)选择器
4、> 选择器 子选择器(不是子孙后代)
5、+ 选择器 同辈,兄弟选择器 紧跟者的属性
6、[] 属性选择器
选择器的优先级
1、!important
2、行内样式
3、ID
4、类 class
5、标签
6、通配符 *
7、浏览器默认属性