CSS
前言：
基础知识
CSS:Cascding Style Sheet 层叠样式表
层叠性:多个多个样式控制一个标签,这几个样式对一个标签同时生效
css的作用
1.实现了样式和html的代码分离。
2.弥补html对属性的的控制不足。
3.精确的控制页面的布局。
4.可以提高页面的执行效率。
5.css还有特殊的功能。
css的特性
继承性、层叠性
CSS 跟HTML 配合使用的方式
方式1–内联样式
将CSS 代码写在标签上 所有的标签都会有一个 style属性我们的CSS代码 就可以写在 style 属性里面每个CSS样式 写法 属性名:属性值;属性名2:属性值2;属性3:属性值3
内联样式的写法:只能控制单个标签,且书写凌乱,不推荐使用.
方式2–内部方式
将style属性写在标签内部 常用
方式3–外联样式
CSS样式写在一个单独文件中 这种方式常用
基本语法
<style type=“text/css”>
选择器{
属性1:属性值；
属性2：属性值
。。。。。。
}
</style>
选择器
1.类选择器
2.id选择器
3.标记选择器
4.包含选择器
5.伪类
类选择器
格式：.（这里有个点）类名{}
id选择器
格式#ID名 {}
标签选择器
标签名{}
包含选择器
Diyiceng dierceng disanceng{}用空格隔开
通配符选择器 *
- {}选择所有标签
伪类
四个状态
1.未连接 a:link
2.已经访问链接 a:visited
3.进入链接 a:hover
4.激活（按下）状态 a:active
其中的hover 和active 可以用于其他控价
子选择器 div >p
div >p{意思是 div 里面所有的子标签p 都被会选中 注意对孙子标签是不起作用的 }
相邻选择器 +
div +p{同级的下一个挨着的p元素(单个的p 后面在跟p是选不中的) 如果在div 和p 之间隔着一个元素 那是选不中的 }
相邻所有选择器 div ~
div ~p{ div 后面所有同级的p元素 即使多个p 元素 之间有隔着的其他元素 也是能选中p元素 }
属性选择器
a[title] {a标签中所有带有title属性的标签 }
a[title=num1]{a标签中所有带有title属性且属性值为num1的标签 }
a[title^=num] {a标签中所有带有title属性且属性值以num开头的标签 }
a[title$=num]{a标签中所有带有title属性的属性值以num结尾的标签 }
a[title|=num] {a标签中所有带有title属性且属性值以num-连接的标签 }
a[title~=num] {a标签中所有带有title属性的多个属性值以 空格隔开的 有其中一个属性值的标签 }
a[title*=num] {a标签中所有带有title属性且属性值 包含num的标签 }
a[title=num][name=lisi] {a标签中符合两个属性的标签 }多个属性选择
过滤选择器(伪类选择器)
：first-letter第一行的第一个字母或汉字
：first-line子元素第一行
：first-child第一个子元素
:last-child 最后一个子元素
:not(selector) id不是my的所有元素。
::selection 当鼠标左键选中文本时 （两个冒号 前面不加任何标签 ）
:root 选择文档的根元素。 跟* 这个选择器很相似
:empty没有子元素的每个元素（包括文本节点）。
：enabled选择每个启用的 元素。
:disabled选择每个被禁用的元素
：checked选择每个被选中的元素
：focus选择获得焦点的元素
：first-of-type选择的这个元素是父元素中的第一个 （要有子父级关系 、可以包含多层子父级关系）
:last-of-type选择的这个元素是父元素中的最后一个 （要有子父级关系系 、可以包含多层子父级关系）
:only-of-type选择的这个元素在父元素中只有一个（父元素中只有一个元素、 也可能有其他元素,但是p元素只有一个、可以包含多层子父级关系）
:only-child选择属于其父元素的唯一子元素的每个元素。这个父元素只有一个再没有其他元素 （可以有很多元素，但只能有一种）只有一层子父级关系
:nth-child(n) 选择属于其父元素中的第n个元素
:nth-last-child(n) 同上，从最后一个子元素开始计数。
:nth-of-type(n) 选择属于其父元素第n个元素的每个 元素。意思就是 父元素 div 里面的第n个子元素里面嵌套的第n个元素会被选中
:nth-last-of-type(n) 同上，但是从最后一个子元素开始计数。
:before在每个 元素的内容之前插入内容。
:after在每个元素的内容之后插入内容。
p:before { content:“台词：-”; background-color:yellow; color:red; font-weight:bold; }
p:after { content:“台词：-”; background-color:yellow; color:red; font-weight:bold; }
一般来说 这两个 选择器 会配合 content 来使用
选择器的优先级
在页面中同一个html元素有不同的选择器定义样式的。
1、id选择器最高
2、类选择器
3、标记选择器
基本属性
位置属性
Position
属性值：
absolute绝对定位left、right、top、buttom
width: //宽度 height: //高度
float: right; //浮动到哪个位置设置left或right层为左右排列默认是上下排列
clear:both/left/right/none; //属性规定元素的哪一侧不允许其他浮动元素。一般用于使用float后无法换行，给两个控件中间夹一个空层设置style=“clear:both;”
字体属性
设置字体
font-family:
属性值： 只要电脑上有的字体，浏览器都可以显示（字体样式可以参考office提供的字体库）
<head>
<title> New Document </title>
<style type="text/css">
h2{ font-family:黑体 }
p{ font-family:隶书,楷书,"Conrier New" }
</style>
</head>
<body>
<h2>设置字体</h2>
<hr>
<p>使用css来设置字体</p>
</body>
</html>
字体大小的设置
font-size:绝对尺寸/关键字/相对尺寸/百分比
属性值:
相对尺寸：xx-small(极小),x-small（较小）,smaller,small（小）,medium（标准）,large（大）
<head>
<title> New Document </title>
<style>
#p1{ font-size:30px}//使用了ID选择器，字体大小用像素设置
#p2{ font-size:0.1cm}//使用了ID选择器，字体大小用长度设置
.p1{ font-size:large}//使用了类选择器，字体大小用相对尺寸设置
</style>
</head>
字体颜色
color:可以使用颜色的英文名称，也可以使用#16进制数（使用取色小工具得道德颜色是这种方式）
字体的样式
font-style
属性值
normal----正常显示字体
italic—斜体字
oblique–歪斜体（倾斜角度大一点）
字体的加粗
font-weight
属性值：
normal ---- 正常显示
bold ----粗体（数字700粗细值）
bolder —加粗
lighter —细体（比正常字体稍微细一点）
number ----数字型（一般整百设置，有9个级别（100----900）数字取值越大越粗）
字体的阴影
text-shadow
属性值： 水平阴影、垂直阴影、模糊距离，以及阴影的颜色
示例： text-shadow: 5px 5px 5px #FF0000;
字体的变体
font-variant 设置字体是否显示为小型的大写字母
主要用于设置英文字体
属性值
normal --正常字体
small-caps 表示英文字母显示为小型的大写字母
overflow:scroll/visible/hidden/auto //超出内容是否包裹
css对文字的排版
调整字符间距
letter-spacing 用来控制字符之间的间距，这个间距实际上就是在浏览器中所显示的字符间的空格距离。
属性值：
normal —表示正常显示（默认）
长度–可以使用负数，带上单位
单位px(像素)
添加文字的修饰
text-decoration
属性值：
underline----添加下划线
overline—添加上划线
line-through–添加删除线
blink—添加闪烁效果（只能在Netscape的浏览器中正常显示）
none–没有任何的修饰
文本的对齐方式
text-align用来控制文本的排列和对齐方式
属性值：
left–左对齐
right–右对齐
center–居中对齐
justify–两端对齐
段落的缩进设置
text-indent 用来控制每个段落的首行缩进的距离。
属性值：
长度（数字）带上单位
百分比相对于上一级元素的宽度
行高的设置
line-height 用来控制文本内容之间行间距
属性值
normal—浏览器默认的行高
数字–设置行高带上单位
百分比----表示行高是该元素字体大小的百分比
背景属性
background: == background-color层的背景颜色
background-image:url(‘top.jpg’);为层设置背景图片
背景附件的设置
background-attachment是指设置背景图片是否随着滚动条的移动而移动
属性值：
scroll —表示背景图片随着滚动条的移动而移动
fixed—表示背景图片固定在页面上不动，不随滚动条移动而移动
设置背景图片的重复
background-repeat 设置背景图片总是在水平和垂直方向重复显示铺平整个网页。
属性值：
repeat 背景图片在水平和垂直方向平铺
repeat-x 背景图片在水平方向平铺
repeat-y 背景图片在垂直方向平铺
no-repeat 背景图片不平铺
背景图片的位置设置background-position
关键字 百分比 位置说明
top left 0% 0% 左上位置
top center 50% 0% 靠上居中
top right 100% 0% 右上位置
left center 0% 50% 靠左居中
center center 50% 50% 正中位置
right center 100% 50% 靠右居中
bottom left 0% 100% 左下位置
bottom center 50% 100% 靠下居中
bottom right 100% 100% 右下位置
边框属性
边框
border边距指的是设置网页中某个元素的四边和网页中其他元素之间的空白距离
上边距 margin-top
下边距 margin-bottom
左边距 margin-left
右边距 margin-right
复合设置 margin
**属性：**数字、百分比、 auto —自动提取边框的值，默认值
border-radius:20px;//边框圆角先把边框设置后再设置圆角
border-image:url(border.png) 30 30 round;//边框图片 大小模式
边框的样式
border-style
基本语法
border-style整个边框的设置
border-top-style设置上边线
border-bottom-style设置下边线
border-left-style设置左边线
border-right-style设置右边线
属性值：
none 没有边框
dotted 点线
dashed 虚线
solid 实线
double 双实线
groove 凹型线
ridge 凸型线
inset 嵌入式
示例border:2px solid #f98510;//边框的宽度和样式以及颜色
边框的宽度
border-width
基本语句：
border-width
border-top-width
border-bottom-width
border-left-width
border-right-width
属性值：
thin ----细边框
medium —中等边框
thick–粗边框
长度—数字
取同一个值：四条边框线是同一个线型
取两个值：上下边框使用第一个取值，左右边框使用第二个取值
取三个值： 上边框取第一个值，左右取第二个值，下边框取第三个值
取4个值：上第一个值，右取第二个值，下取第三个值，左取第四个值
边框的颜色
border-color
基本设置语法：
border-color
border-top-color
border-bottom-color
border-left-color
border-right-color
可以分别设置四个边框的颜色
边框的阴影
box-shadow: 10px 10px 5px #888888;//添加阴影
属性值：
X方向的偏移像素
Y方向的偏移像素
模糊的像素值
阴影颜色
填充
用来设置边框和其内部的元素之间的空白距离
上边距 padding-top
下边距 padding-bottom
左边距 padding-left
右边距 padding-right
复合设置 padding
属性值数字—长度 百分比
显示属性
display:block/none/inline //显示为块 隐藏 显示为行
visibility:visible//显示元素
visibility:hidden//隐藏元素
z-index:2;// 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。Z-index 仅能在定位元素上奏效（例如 position:absolute;）
动画属性
放大缩小位移Transform
属性值：
rotate(30deg)旋转30度
translate(50px,100px) 从左侧移动 50 像素，从顶端移动 100 像素
scale(2,4) 把宽度转换为原始尺寸的 2 倍，把高度转换为原始高度的 4 倍。
skew(30deg,20deg) 围绕 X 轴把元素翻转 30 度，围绕 Y 轴翻转 20 度。
示例transform:rotate(30deg);//旋转 scale(2,2);//缩放 translate(30px,20px);//位移
动画
Animation
格式：
@keyframes myfirst
{ 0% {background: red;}
25% {background: yellow;}
50% {background: blue;}
100% {background: green;} }
@keyframes myfirst
{ from {background: red;}
to {background: yellow;}}
过渡动画
transition
格式：
div{transition:width 5s;
width:100px;height:100px;
background:red;}
div:hover { width:300px; } 先定义一个层的hover 鼠标进入后把宽度改为300px 则就会看到过渡动画
轮廓
outline:#00ff00 dotted thick;
鼠标显示相关
cursor:auto/crosshair/default/pointer/move/e-resize/ne-resize/nw-resize/n-resize/wait/text/help
cursor:url(’’),default;
浏览器兼容问题
格式：-xx-
前缀：ms:微软IE、o欧朋、webkit苹果谷歌、moz火狐
HTML与CSS的结合
html文件头部使用css
css设置位于<head>部分
<head>
<title> New Document </title>
<!--style 说明所要使用的标记 -->
<!-- type="text/css" 说明这是一段css代码-->
<style type="text/css">
h3{color:black;font-size:35px;font-family:黑体 }
p{background:yellow;color:red;font-family:宋体}
</style>
</head>
<body>
<h3>在html文件的头部使用css</h3>
<hr>
<p>在html文件头部应用css(层叠样式表)</p>
</body>
</html>
在html的标记的内部使用css
基本语法：
<html标记 style=“样式的属性1:样式的属性1;样式的属性2:样式的属性2;…”>
<head>
<title> New Document </title>
</head>
<body>
<h1 style="color:red;font-size:50px;font-family:黑体">标签内部使用css</h1>
<hr>
<p style="background:cyan;color:red;font-family:宋体">在html标记的内部使用css</p>
</body>
</html>
使用外部css文件
基本语法：
<head>
<link rel=“stylesheet” type=“text/css” href=“css样式表文件的存放位置”>
rel=“stylesheet” 是指在html文件中使用的是外部样式表文件
type=“text/css” 指明该文件的类型是样式表文件
href=“css样式表文件的存放位置” 样式表文件的地址（绝对路径或相对路径）
</head>
步骤：
第一 编写外部css文件（后缀名【.css】）
h3{color:red; font-size:35px;font-family:黑体}
p{ background:yellow; color:red;font-family:宋体}
第二 引用链接 <link rel=“stylesheet” type=“text/css” href=“css样式表文件的存放位置”>
<head>
<title> New Document </title>
<link rel="stylesheet" type="text/css" href="mycss.css">
</head>
<body>
<h3>使用外部css</h3>
<hr>
<p>在html文件使用外部css(层叠样式表)</p>
</body>
</html>
531
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
