CSS
<center></center>用了一个标签,使内容居中
CaseCade StyleSheet 级联样式单
样式的编写有三种方式
第一种:内联样式,使用style声明样式
<div style=”color:red”></div>
第二种: 内部样式
<head>
<style>
…..
…..
</style>
</head>
第三种:外部样式
<head>
<link rel=”stylesheet” style=”text/css” href=”x.css”></link>
</head>
内联样式少使用,内部样式全站中只有一个页面风格的拥有的样式,推荐使用外部样式,但是在使用的时候不要太多。
CSS:基本语法
属性名:属性值
选择器{/*该样式的作用*/
属性名:属性值
……
}
Css选择器:重点/难点:
1.通过选择器:选择页面中的所有元素
*{}
2.元素选择器:选择指定的元素
xxx{}
3 ID选择器加#:选择具有指定id的元素
#id{}
Css常用属性的重点与难点:
4 类选择器:选择具有指定类名的标签内容
.类名 {}
5 并列与过滤选择器 选择器1 选择器2 选择可被两个选择器同时选定的元素 如.product .mark{….}
6父子选择器 选择器1 选择器2{….} 例如
{
{
Div span{…}//Div下的span元素
div .span{…}//Div下的类名为span的元素
}
7 直接子元素选择器
选择器1 > 选择器2 选中子元素1下面的直接子元素2 div>span{….}
7 多选选择器
选择器1,选择器2,选择器3…..选择器n{…}
8 伪类选择器: :伪类名{….}
x:link{….}//未被访问过的链接呈现什么样式
x:visited{…..}//访问过的连接呈现什么样式
x:hover{……}//当鼠标悬停在元素上方的时候
x:active{…..}//当鼠标元素被激活的时候,也就是按下的时候
x:focus{……}//元素获取焦点的时候
css样式的级别:!important->内联->#id选择器->类选择器/伪类选择器->内部/外部样式->元素选择器->浏览器预定义样式
css中的尺寸
相对尺寸:
所占父元素的百分比 %
Px 像素,指频幕上的一个点
Em:表示标准字体大小
绝对尺寸:
在web应用开发过程中几乎不用相对尺寸
cm:厘米
mm:毫米
in:英寸
pt:磅
css中的颜色:
(1) 英文字母表示法:red greenyellow
(2) Rgb(xxx,xxx,xxx) 如:span{color:rgb(255,0,0)}
(3) Rgb{xx%,xx%,xx%,} 如:span{color:rgb(30%,50%,0%)}
(4) 六位得16进制数 如:#fsdfsa
(5) 三位得16进制数 如:#ff0
属性 |
|
|
width |
|
|
Height |
|
|
Min-width |
|
|
Max-width |
|
|
Min-height |
|
|
Max-height |
|
|
overflow |
| Visible Hidden Scroll auto |
Border-width | 边框的属性 |
|
Border-style | 边框的属性 | None//没有 Solid//默认实线 Double//双实线得效果 Dotted//双虚线 Dashed//虚线 ….. |
Border-color | 边框的属性 | Transparent透明的颜色 |
border | 边框样式集合 宽度线条颜色 | 2px solid #fdffff |
Outline-color | 外围轮廓 | #dsfsaf |
Outline-width | 轮廓宽度 | #1px |
Outline-style | 轮廓样式 | None//没有 Solid//默认实线 Double//双实线得效果 Dotted//双虚线 Dashed//虚线 ….. |
outline | 颜色样式轮廓 | #dsffsf dashed 2px |
Border-radius | 边框半径,绘制圆角边框 | 可以取 4/3/2/1/也可以是百分比 |
Box-shadow | 边框阴影 不占页面空间
| h-shadow水平阴影(必须) v-shadow 竖直阴影(必须) blur 可选为模糊距离 spread 扩展半径 color 为颜色(必须) inset将外部阴影改为内部阴影 |
Border-image | 使用图片做边框 | Source:url(box.png) Width:20 Repeat:round url(box.png) 20 stretch url(box.png) 20 repeat |
Border-image-width | 图片边框的宽度 | 20 |
Border-image-repeat | 图片边框是否应平铺/铺满/拉伸 |
|
Border-image-source | 图片路径 | url(a.png) |
CSS3选择器
在 CSS 中,选择器是一种模式,用于选择需要添加样式的元素。
"CSS"列指示该属性在哪个 CSS 版本中定义的。(CSS1、CSS2还是 CSS3。)
|
1.盒模型:
如果两个元素都指定了margin那么间距会合并,合并后的间距是他们中较大的一个的值.
Outline,box-shadow不会占用页面空间,所以不计入盒子模型的计算。
盒子模型的计算:margin+border+padding+content(width+height)
Float:会对间距合并产生影响
名称 | 属性 | 值 |
Padding-top | 填充上 | 15 |
Padding-left | 填充左 | 15 |
Padding-right | 填充右 | 15 |
Padding-bottom | 填充底 | 15 |
padding | 10px 10px 20px 12px 22px 23px 10px 20px 22px 32px 上 右 下 左 | |
float | 排布方式 | Left从左到右依次排开 |
border-top | 填充上 | 9.714 |
border -left | 填充左 | 9.714 |
border -right | 填充右 | 9.714 |
border -bottom | 填充底 | 9.714 |
border | ||
margin-top | 填充上 | - |
margin -left | 填充左 | - |
margin -right | 填充右 | - |
margin -bottom | 填充底 | - |
margin | 0 auto 让元素相对于父元素居中 |
名称 | 属性 | 值 |
Background-color | 设置元素的背景色 背景色会占据填充区域,但是不会占据间距 | 如果有背景图,背景图是在背景颜色的上面 |
Background-image | 背景图片 | url(image/xxx.png) |
Backgroung-repeat | 重复方式 | No-repeat Repeat-x Repeat-y repeat |
Background-position | 背景图的位置 | Right bottom Left bottom Center center X y X% y% |
Background-attachment | 背景是否滚动 | Scroll fixed |
Background-clip | 背景颜色的绘制区域 | Border-box 只铺到边框 Padding-box只铺到padding Content-box只铺到内容 |
Background-origin | 背景图的定位区域 | Border-box 只铺到边框 Padding-box只铺到padding Content-box只铺到内容 |
background | 背景 | Color:red url(xxx.png) repeat: attachment:scroll position:x% y% |
Background-image | 凡是使用了背景图的地方都可以指定渐变的方式 | Linear-gradient (angle,color-point)线性渐变 Radial-gradient 径向渐变 Repeating-linear-gradient重复线性渐变 |
元素的定位:
(1) 流/静态定位 position:static; 不能严格指定位置
(2) 浮动定位 float:left/right; 不能严格指定位置
(3) 相对定位 position:relative; 使用left/right/top/bottom进行定位
占用页面空间: 以其自己作为静态元素的定位原点
(4) 绝对定位 position:absolute; 使用left/right/top/bottom进行定位
不占用页面空间:以最近的祖先元素的padding起点为原点且随着页面内容的滚动而滚动
(5) 固定定位 position:fixed; 使用left/right/top/bottom进行定位
不占用页面空间:以body为定位原点,不随页面的滚动而滚动
CSS中复杂的选择器
选择器名称 | 事例 | 含义 |
选1 选2 | Div li{….} | 子代选择器 |
选1>选2 | div>li{….} | 直接子代选择器 |
选1+选2 | input+span{…..} | 相邻兄弟选择器:选择紧挨着的下一个兄弟元素 |
选1~选2 | div~span{…..} | 通用兄弟选择器:选择与1具有相同父元素的所有2 |
[属性名] | 选择具有指定属性的元素 | |
[属性名=属性值] | [type=”text”] | 匹配具有指定属性且属性值为指定值的元素 |
元素名[属性名=属性值] | Input[type=”text”] | 选择属性名属性值对应的元素 |
[属性名~=属性值] | [type~=”text”] | 选择具有属性名,且属性值中包含指定单词的元素(必须是完整的单词) |
[属性名*=属性值] | [type*=”text”] | 选择具有属性名,且属性值中具有指定的字母组合的元素(不必是完整的单词) |
[属性名^=属性值] | [type^=”text”] | 选择具有指定属性且属性中有指定的值开头的元素 |
[属性名$=属性值] | Class*=”xx” | 选择具有指定属性,且属性的值以xx字母结尾的元素 |
[属性名|=属性值] | Class|=”xx” | 选择指定元素,并且属性值以xx开头的 |
xxx:target | Div{ Display:none Div:target{ Display:block } | 目标伪类选择器:选定当前锚点的目标元素:<href=”xxx”> <div id=”xxx”>div成为锚点也就是目标元素 |
xxx:enable | Xxx为空时,表示匹配所有的 | 匹配每个xxx已启用的函数 |
xxx:disabled | 匹配每个xxx被禁用掉的函数 | |
xxx: checked | 匹配每个xxx已被选中的元素 | |
xxx:first-child | 选择属于父元素的第一个子元素的每个xxx元素 | |
xxx:last-child | 选择属于父元素的最后一个子元素的每个xxx元素 | |
xxx:only-child | 选择属于父元素的唯一一个子元素的每个xxx元素 | |
:empty | Div:empty{….} | 匹配没有子元素的父元素 |
:not(选1) | Div:Not(.strong){…} Div:not([class=”nihao”]){…} | 取反 |
:first-letter | P:first:letter | 选取指定元素中文本的首字母 |
::select | 匹配一段文字中的选择部分 | |
:before | P:Before( content:”子曰” ) | 可以在内容之前加内容 |
:after | P:After(content:”—摘自《论语》”) Div:before{content:url(a.png)} | 可以在内容的后面加上内容content后面是纯文本|图片|计数器 |
说明: :xxx伪类选择器 ::xxx伪元素选择器