目录
1.id选择器： # para1（ id=“para1” ）
2.classid选择器 .center 或者p.center（ class=“center” ）
1.选择器
1.id选择器： # para1（ id=“para1” ）
2.classid选择器 .center 或者p.center（ class=“center” ）
2.样式表
1.外部
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>2.内部
<head>
<style>
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("images/back40.gif");}
</style>
</head>3.内联
<p style="color:sienna;margin-left:20px">这是一个段落。</p>
4.多重
内联样式 > 内部样式>外部样式> 浏览器默认样式
3.背景
background-image:url('gradient2.png');
background-repeat:repeat-x;
<!--水平方向平铺-->
background-repeat:no-repeat;
<!--不平铺-->
background-position:right top;
<!--图片在右上方-->
4.文本 text
1.文本颜色
h1 {color:#00ff00;}2.文本对齐
h1 {text-align:center;}
p.date {text-align:right;}
p.main {text-align:justify;}
<!--每一行被展开为宽度相等，左，右外边距是对齐-->3.文本修饰
h1 {text-decoration:overline;}
h2 {text-decoration:line-through;}
h3 {text-decoration:underline;}
4.文本转化
所有字句变成大写 小写字母 每个单词的首字母大写
p.uppercase {text-transform:uppercase;}
p.lowercase {text-transform:lowercase;}
p.capitalize {text-transform:capitalize;}
5.文本缩进
文本的第一行的缩进
p {text-indent:50px;}
5.字体 font
1.字型
p{font-family:"宋体"}2.字体样式
正常 斜体
p.normal {font-style:normal;}
p.italic {font-style:italic;}
3.字体大小
h1 {font-size:40px;}
p {font-size:14px;}
4.链接
a:link {color:#000000;} /* 未访问链接*/
a:visited {color:#00FF00;} /* 已访问链接 */
a:hover {color:#FF00FF;} /* 鼠标移动到链接上 */
a:active {color:#0000FF;} /* 鼠标点击时 */
6.列表
1. 指定图像为标记
ul
{
list-style-image: url(../html/tou.png);
}2.常规标记
ul.a {list-style-type: circle;}
ul.b {list-style-type: square;}
ol.c {list-style-type: upper-roman;}
ol.d {list-style-type: lower-alpha;}
7.表格
1.表格边框
指定了一个表格的Th和TD元素的黑色边框
显示一个表的单个边框，使用 border-collapse属性
table
{
border-collapse:collapse;
}
table,th, td
{
border: 1px solid black;
}
2.表格宽度和高度
table
{
width:100%;
}
th
{
height:50px;
}
3.表格文字对齐
td
{
height:50px;
vertical-align:bottom; //竖直对齐方式
text-align：right; //水平对齐方式
}
4.表格填充
8.盒子模型
1.元素的宽度和高度
div {
width: 300px;
border: 25px solid green;
padding: 25px;
margin: 25px;
}
总元素的宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距
总元素的高度=高度+顶部填充+底部填充+上边框+下边框+上边距+下边距
2.边框属性
p
{
border-top-style:dotted;
border-right-style:solid;
border-bottom-style:dotted;
border-left-style:solid;
}
3.轮廓
4.margin
margin属性可以有一到四个值。
margin:25px 50px 75px 100px;
上边距为25px
右边距为50px
下边距为75px
左边距为100px
margin:25px 50px 75px;
上边距为25px
左右边距为50px
下边距为75px
margin:25px 50px;
上下边距为25px
左右边距为50px
margin:25px;
所有的4个边距都是25px
5.padding
同上
9.分组 和 嵌套 选择器
1.分组选择器
h1,h2,p
{
color:green;
}
2.嵌套选择器
p{ }: 为所有 p 元素指定一个样式。
.marked{ }: 为所有 class=“marked” 的元素指定一个样式。
.marked p{ }: 为所有 class=“marked” 元素内的 p 元素指定一个样式。
p.marked{ }: 为所有 class=“marked” 的 p 元素指定一个样式。
p
{
color:blue;
text-align:center;
}
.marked
{
background-color:red;
}
.marked p
{
color:white;
}
p.marked{
text-decoration:underline;
}
10.定位 position
position 属性的五个值：
static
relative
fixed
absolute
sticky
1.static 定位
HTML 元素的默认值，即没有定位，遵循正常的文档流对象。
静态定位的元素不会受到 top, bottom, left, right影响。
div.static {
position: static;
border: 3px solid #73AD21;
}
2.fixed 定位
元素的位置相对于浏览器窗口是固定位置。
即使窗口是滚动的它也不会移动：
p.pos_fixed
{
position:fixed;
top:30px;
right:5px;
}
3.relative 定位
相对定位元素的定位是相对其正常位置。
h2.pos_left
{
position:relative;
left:-20px;
}
h2.pos_right
{
position:relative;
left:20px;
}
移动相对定位元素，但它原本所占的空间不会改变。
4.absolute 定位
绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于:
h2
{
position:absolute;
left:100px;
top:150px;
}
5.sticky 定位
sticky 英文字面意思是粘，粘贴，所以可以把它称之为粘性定位。
position: sticky; 基于用户的滚动位置来定位。
粘性定位的元素是依赖于用户的滚动，在 position:relative 与 position:fixed 定位之间切换。
它的行为就像 position:relative; 而当页面滚动超出目标区域时，它的表现就像 position:fixed;，它会固定在目标位置。
元素定位表现为在跨越特定阈值前为相对定位，之后为固定定位。
这个特定阈值指的是 top, right, bottom 或 left 之一，换言之，指定 top, right, bottom 或 left 四个阈值其中之一，才可使粘性定位生效。否则其行为与相对定位相同。
11.布局 - Overflow
12.Float(浮动)
如果图像是右浮动，下面的文本流将环绕在它左边：
img
{
float:right;
}
13. 布局 - 水平 & 垂直对齐
要水平居中对齐一个元素可以使用 margin: auto;
.center {
margin: auto;
width: 50%;
border: 3px solid green;
padding: 10px;
}
使用 position: absolute; 属性来对齐元素:
.right {
position: absolute;
right: 0px;
width: 300px;
border: 3px solid #73AD21;
padding: 10px;
}
14.CSS 组合选择符
在 CSS3 中包含了四种组合方式:
后代选择器(以空格分隔)
子元素选择器(以大于号分隔）
相邻兄弟选择器（以加号分隔）
普通兄弟选择器（以破折号分隔）
1.后代选择器
后代选择器用于选取某元素的后代元素。
所有元素插入到元素中:
div p
{
background-color:yellow;
}
2.子元素选择器
子元素选择器只能选择作为某元素子元素的元素。
元素中所有直接子元素
div>p
{
background-color:yellow;
}
3.相邻兄弟选择器
相邻兄弟选择器可选择紧接在另一元素后的元素，且二者有相同父元素。
如果需要选择紧接在另一个元素后的元素，而且二者有相同的父元素，可以使用相邻兄弟选择器
所有位于元素后的第一个元素:
h1 + p
{
background-color:yellow;
}
4.后续兄弟选择器
后续兄弟选择器选取所有指定元素之后的相邻兄弟元素。
所有元素之后的所有相邻兄弟元素
div~p
{
background-color:yellow;
}
15.first-child 伪类
1.匹配第一个
选择器匹配作为任何元素的第一个子元素的元素：
p:first-child
{
color:blue;
}
2.匹配所有
选择相匹配的所有元素的第一个元素：
p > i:first-child
{
color:blue;
}
3.匹配所有作为第一个子元素的
选择器匹配所有作为元素的第一个子元素的元素中的所有元素:
p:first-child i
{
color:blue;
}
扫一扫
2102
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
