CSS
概念:层叠样式表(Cascading Style Sheets)
一、语法概述
选择器{属性:值;属性:值; }
CSS注释:
/*这是注释*/
例如
p{
color:red;
/* 这是注释*/
font-size:24px;}
二、语法--选择器
2-1:ID和Class选择器
- 首先必须在html标签中加上 id属性或者class属性
- 对于id选择器: id选择器以“#”开头
- 对于class选择器:class选择器以“.”开头
2-2:标签选择器
利用html标签名
例子如下:
<!DOCTYPE html>
<html lang="en-US">
<head>
<style>
/*标签选择器*/
div{
float: left;
}
/*class选择器*/
.city {
margin: 5px;
padding: 15px;
width: 300px;
height: 300px;
border: 1px solid black;
}
/*id选择器*/
#aaa {
background-color: blue;
margin: 5px;
padding: 15px;
width: 300px;
height: 300px;
border: 1px solid black;
}
</style>
</head>
<body>
<h1>Demo</h1>
<br>
<div id="aaa">
<h2>Demo1</h2>
<p>Demo11111</p>
</div>
<div class="city">
<h2>Demo2</h2>
<p>Demo22222</p>
</div>
<div class="city">
<h2>Demo3</h2>
<p>Demo33333</p>
</div>
</body>
</html>
2-3:分组选择器
选择器1,选择器2,选择器3{
//css属性
}
h1{
color:red;
}
h2{
color:red;
}
h3{
color:red;
}
/*等价于如下*/
h1,h2h,h3{
color:red;
}
2-4:嵌套选择器
它可能适用于选择器内部的选择器的样式。
在下面的例子设置了三个样式:
- 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;
}
2-5组合选择符
四种组合方式:
- 后代选择器(空格)
- 子元素选择器(>)
- 相邻元素选择器(+)
- 普通兄弟选择器(~)
div p{
/*div下的所有p元素*/
}
div>p{
/*div下的直接子元素*/
}
div+p{
/*div的第一个兄弟元素p*/
}
div~p{
/*div后面的所有p兄弟元素*/
}
2-5:属性选择器
[属性名]{.............}
[属性名=值]{............}
p[attribute1][attribute2]{
/* [] 属性选择器,表示具有某种属性的所有元素;
多个参数表示同时具有多个属性;*/
}
a[href="http://www.123.com"]{
/* =具有某个属性,且属性值等于指定值的所有元素 */
}
div[class~="class1"]{
/* ~=具有某个属性,且属性值包含指定值的所有元素 */
}
input[title^="title1"]{
/* ^=指定属性的值以指定字符串开头 */
}
input[title$="title1"]{
/* $=指定属性的值以指定字符串结尾 */
}
input[title*="title1"]{
/* *=指定属性的值包含指定字符串 */
}
input[title|="title1"]{
/* |=指定属性的值等于title1或者以title1-开头 */
}
三、多重样式优先级
内联样式)Inline style > (内部样式)Internal style sheet >(外部样式)External style sheet > 浏览器默认样式
四、CSS中颜色的定义
- 十六进制: #ff0000
- RGB RGB(255,10,10)
- 颜色名称: red
五、CSS链接样式
- a:link - 正常,未访问过的链接
- a:visited - 用户已访问过的链接
- a:hover - 当用户鼠标放在链接上时
- a:active - 链接被点击的那一刻
实例
<!DOCTYPE html>
<html lang="en-US">
<head>
<style>
a:link {color:#000000;} /* 未访问链接*/
a:visited {color:#00FF00;} /* 已访问链接 */
a:hover {color:#FF00FF;} /* 鼠标移动到链接上 */
a:active {color:#0000FF;} /* 鼠标点击时 */
</style>
</head>
<body>
<a href="http://www.baidu.com" target="_blank" >百度</a>
</body>
</html>
六、盒子模型
- Margin(外边距) - 清除边框外的区域,外边距是透明的。
- Border(边框) - 围绕在内边距和内容外的边框。
- Padding(内边距) - 清除内容周围的区域,内边距是透明的。
- Content(内容) - 盒子的内容,显示文本和图像。
对于margin和padding的设置都是
属性名{上 右 下 左} 或者 属性名{上下 左右}
<!DOCTYPE html>
<html>
<head>
<title>盒子模型</title>
</head>
<style type="text/css">
#dv{
/*内容大小*/
width: 100px;
height: 100px;
/*内边距大小*/
/* padding 20px 15px 25 10 */
padding-left: 10px;
padding-right: 15px;
padding-top: 20px;
padding-bottom: 25px;
/*边框大小*/
/* border{3px solid red }*/
border-style: solid;
border-color: red;
border-width: 3px;
/*外边距*/
/*
margin-top:15px;
margin-bottom:15px;
margin-right:20px;
margin-left:20px;
*/
margin: 15px 20px;
}
</style>
<body>
<div id="dv">
dmemo111
</div>
</body>
</html>
七、隐藏元素。
Display:none; 隐藏元素,不影响布局
visibility:none; 隐藏元素。影响布局。
Display:inline; 将元素改变为内联元素; 只需要必须的宽度;不强制换行
Display: block;将元素改变为块元素;占据全部宽度,前后都有换行符
例如:
<!DOCTYPE html>
<html>
<head>
<title>display 和visibility</title>
</head>
<style type="text/css">
div{
border:3px solid red;
width: 500px;
height: 200px;
}
</style>
<body>
<div>
<h1 style="display:none;">显示1</h1>
<h1 style="color:red">display:不影响布局</h1>
</div>
<br/>
<div>
<h1 style="visibility:hidden">显示2</h1>
<h1 style="color:red">visibility:影响布局</h1>
</div>
<br/>
<div>
<h1 style="display:inline; background-color:green;"> 内联元素 display:inline</h1>
</div>
<br/>
<div >
<h1 style="display: block;background-color:green;">块元素 display:block</h1>
</div>
</body>
</html>
八、定位(Position)
postion属性制定了元素的定位类型。
position属性的五个值: static(静态) , relative(相对),fixed(固定),absolute(绝对),sticky(粘性)
8-1 :static定位(静态)
使用position:static;定位的元素,无特殊定位,遵循正常的文档流对象。【默认状态】
8-2:fixed定位
元素相对于浏览器窗口的固定位置。(不遵循正常文档流)【以自己为参照物】
8-3:relative定位
相对定位元素的定位(原始位置遵循正常文档流,移动后位置不遵循正常标准流)【以自己为参照物】
8-4:absolute定位
absolute是相对定位;相对于最近的已经定位的父元素;若无满足此要求的父元素,则以<html>作为参照物(不遵循正常文档流)
8-5:sticky定位
基于用户的滚动位置来定位。
粘性定位的元素是依赖于用户的滚动,在 position:relative 与 position:fixed 定位之间切换。
它的行为就像 position:relative; 而当页面滚动超出目标区域时,它的表现就像 position:fixed;,它会固定在目标位置。
元素定位表现为在跨越特定阈值前为相对定位,之后为固定定位。
<!DOCTYPE html>
<html>
<head>
<title>定位</title>
</head>
<style type="text/css">
#staticd{
border: 3px solid red;
position: static;
}
#fixedd{
border: 3px solid red;
position: fixed;
width: 500px;
height: 400px;
/*窗口上边框在该元素上方50px*/
top: 50px;
/*窗口由边框边框在该元素右方50px*/
right: 50px;
}
#relatived{
border:3px solid red;
position:relative;
width: 100px;
height: 100px;
/*原始位置,在当前元素向右边100px*/
left:750px;
/*原始位置在当前位置的上方100px*/
top:100px;
}
#absoluted{
border :3px solid green;
position:absolute;
/*父元素上边框在本元素向上10*/
top: 10px;
/*父元素左边框在本元素的左边10*/
left:-10px;
}
</style>
<body>
<div>
<p id="staticd">static定位</p>
</div>
<div>
<p id="fixedd">fixed定位</p>
</div>
<div>
<p id="relatived">relative定位</p>
</div>
<div style="width:500px;height:500px;background-color:red;position:relative; top:120px;">
<p id="absoluted">absolute定位</p>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
div.sticky {
position: -webkit-sticky;
position: sticky;
top: 0;
padding: 5px;
background-color: #cae8ca;
border: 2px solid #4CAF50;
}
</style>
</head>
<body>
<p>尝试滚动页面。</p>
<p>注意: IE/Edge 15 及更早 IE 版本不支持 sticky 属性。</p>
/*Internet Explorer, Edge 15 及更早 IE 版本不支持 sticky 定位。 Safari 需要使用 -webkit- prefix (查看以下实例)。*/
<div class="sticky">我是粘性定位!</div>
<div style="padding-bottom:2000px">
<p>滚动我</p>
<p>来回滚动我</p>
<p>滚动我</p>
<p>来回滚动我</p>
<p>滚动我</p>
<p>来回滚动我</p>
</div>
</body>
</html>