Css 层叠样式表
Body a .box{}
目的:html结构和css样式分离
语法
选择器{属性名:属性值;属性名:属性值; }
说明:
1.一个css样式包括选择器和格式声明语句
2.选择器就是选择给哪个html标签加样式
3.属性名:属性值;
4.属性值不用双引号
5.单位通常以px为单位,通常情况必须带单位
css样式带单位,html不带单位
如何引入css样式
1.行内样式表
每一个标签都有style属性
<标签 style="属性名:属性值;"></标签>
2.内嵌样式表
在head标签中输入xhtml
<head>
<style type="text/css">
p{
color:red; /*文本颜色*/
font-size:14px;
}
</style>
</head>
3.外部样式表
<lint rel="sylesheet" href="外部样式表文件 xx.css"/>
保存的时候拓展名为.css文件
4.导入样式表
格式:@import url(另外一个css样式)
@import url(XX.css)放在第一行
必须放到css文件中
选择器分类
1.基本选择器
1.1标签选择器:选择给哪个标签加样式,自动指向该标签
body{ } p{ }
1.2类选择器
.myclass{} .page_header{ } .login_content_input{ }
用时:<ul class="ul_two"> <h2 class="ul_two">
类选择器可以引用多次
1.3id选择器
给特定的html标签加样式
#myid{ } #id1{ } #checkform1{ }
id选择器只能引用一次,通常给js用,不是用来设置样式的
1.4通用选择器
给所有的标签加样式
*{ }
IE6不支持
2.复合选择器
2.1多元素选择器
多个标签共有的属性和属性值放在一起
选择器,选择器,选择器{共有属性:属性值;}
2.2后代元素选择器
给html的后代标签加样式
选择器1 选择器2 {属性:属性值;}
选择器1里面的选择器2
2.3子元素选择器
给html标签的子标签加样式
选择器>选择器{属性:属性值;}
适用于只有一层的关系
伪类:--锚<a>内容必须做好链接
a:link 未访问的链接
a:visited 访问过的链接
a:hover 鼠标移动连接上
a:active 单击鼠标左键那一时刻的样式
文本属性
font-size 文本的大小 例如 font-size:12px;
font-weight 文本是否加粗 font-weight:bold///normal ;
font-style 文本是否倾斜 font-style:italic ;倾斜 font-style:normal;正常
font-family:文字的字体 例如 font-family:隶书; 默认是宋体
text-decoration 文本是否有线条 text-decoration:underline ;下划线, text-decoration:overline; 上划线 text-decoration:line-through;删除线 text-decoration:none;去掉所有的线条
text-indent:文本首行缩进 例如 text-indent:2em;
color 文本的颜色 例如color:red;
letter-spacing:字母和字母之间的距离 例如letter-spacing:2px;
word-spacing:单词和单词之间的距离 例如 word-spacing:2px;
text-align:文本的对齐方式 left center right 例如 text-align:center;
背景属性
backgraoud-color 背景颜色
background-image 背景图片
background-repeat 背景图片是否平铺
no-repeat 不平铺
repeat-x 横向平铺
repeat-y 纵向平铺
repeat 都平铺
background-position 背景图片位置
left
center
right
top
center bottom
数值 正负
background-position:背景颜色 背景图片 是否平铺 (附件) 水平 垂直;
例如 background-position:0 0;
backgroud-(attachment 背景附件,背景是否随着上方内容一起移动
取值 :fixed 背景固定 scroll 滚动
<!--设置主体标签, 背景图片 ,纵向平铺 水平居中 垂直距离顶端20px-->
body{
background:url(images/bg.jpg) repeat-y fixed center 20px;
}
注意:只有水平和垂直不能颠倒,其他属性值可以顺序颠倒
列表
去掉前面的项目符号
list-style:none;
<style type="text/css">
ul,ol{
/* list-style-type:none; 有序和无序前面的项目符号*/
list-style:none;
/*用小图代替列表前的符号*/
list-style-image: url(images/protitle.jpg);
}
</style>
表格
<style type="text/css">
table{
width:800px; /*表格的宽度*/
border:1px solid blue;/*边框线1像素 实线 颜色为蓝色*/
border-collapse:collapse; /*合并表格的边框线*/
}
td{
border:1px solid blue;/*单元格的边框线 1像素 实线 蓝色*/
}
</style>
边框
<style type="text/css">
.box_one{
width:500px;
height:300px;
/* border-top-width:1px;
border-top-color:blue;
border-top-style:solid;*/
border-top:1px solid blue;/*上边框粗细为1像素实线 颜色为蓝色*/
border-right:2px solid red;
border-bottom:1px dashed gray; /*下边框的粗细为1像素 虚线 灰色*/
border-left:1px dotted gray;
}
.box_hao{
width:998px;
height:48px;
border-top:2px solid #208c82; /*上边框粗细为2像素 实线 颜色为绿色*/
border-bottom:1px solid #a0a0a0;
}
.box_hao_two{
width:500px;
height:300px;
}
.box_hao_three{
width:100px;
height:50px;
}
.box_hao_two,.box_bao_three{
border:1px solid gray;
}
</style>
上边框
1.Border-top-color:颜色值;上边框的颜色
2.Border-top-style:线型;线型有 solid 实线 dashed 虚线 dotted 点状线
3.Border-top-width:粗细;例如border-top-width:2px;
简写为
Border-top:粗细 线型 颜色;
右下左边框同理
盒子模型
1.内容区:width和height
2.边框 border
3.内边距 padding
3.1 padding-top
3.2 padding-right
3.3 padding-bottom
3.4 padding-left
简写形式 padding:10px 20px 30px 40px;
上右下左
4.外边距 margin
3.1 margin-top
3.2 margin-right
3.3 margin-bottom
3.4 margin-left
5.浮动 float
特点:设置浮动的元素不占空间
设置浮动的元素层级高于普通元素
在一行中的元素横向排列 都要设置浮动
盒子在页面水平居中:margin:auto;
清除格式
*{margin:0;padding:0;}
如果后期使用再重新设置
body,div,h2,ul,li{
margin:0;
padding:0;
}
网页的布局思想
1.清除格式
2.设置页面属性
body{
font-size:14px;
font-family:"宋体";
color:#000000;
background-color:#e2e2e2;
line-height:150%;
}
行内元素和块元素
行内元素:输入完标签之后,不是自己独占一行
宽和高由内容决定,width height不能用
--css样式:display:inline
span b i u strong a
--
块元素:输入完标签自己独占一行
可以设置宽度高度
div p h1 table ul li ol dl dt dd
--
块-行内 转换
display:inline
--
行内-块 转换
display:block
Overflow
内容溢出时使用的属性
overflow:hidden;隐藏溢出部分
overflow:auto;如果盒子装不下出现滚动条
overflow:scroll;不论能否装下都有滚动条
继承
外层元素的样式会被里面的元素继承使用
优先级
单个选择器优先级
标签<类<id
复合选择器优先级
.box ul li{}<.box.ont.two ul li{}<#myid ul li{}
清除浮动
clear:left/right/both;
div里面还有<div>父盒子没有设置固定高,里面设置了浮动,父元素受影响,无法正常计算
--如何让父元素得到自然高?
1.在父盒子最下面加<div>给div设置清除浮动属性;
2.浏览器的bug-在父元素样式加overflow:hidden;
margin距离
1.不浮动取最大值
2.浮动相加
定位
position:static默认/fixed固定/relative相对位置/absolute绝对定位
fixed:相对于浏览器窗口定位
不设置定位坐标就在原来位置
层级比普通标签高
固定定位之后一定是块元素
relative:如果结合定位坐标,相对【自身】,作为参考点
层级要高于普通的元素
absolute:设置绝对定位,不占空间
设置层级高于普通的元素
不结合定位坐标,就是在原来的位置
绝对定位如果定位坐标,以祖先元素(设置绝对定位,相对定位)作为坐标的参考点
如果祖先没有设置定位,一直往上找,直到找到body,就以body来进行定位,相对于整个窗口来进行定位
Html5介绍
-html-xhtml版本-w3c和whatwg-->html5
-html5=html5+css3+js+api
-特点:
代码更加简洁
标签语句语义化
新增属性
代码更加宽松
-ie9以上支持html5
-html5的结构
<<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>day7</title>
</head>
<body>
</body>
</html>>
-代码更加宽松
向下兼容-html可以把所有标签看成双标签
-html5新增的标签
<header></header>网页头部
<nav></nav>网站导航
<section></section>代表网页的一个块 类似div
<article></article>网页的文章内容
<aside></aside>网页文档的侧边栏
<footer></footer>代表网页的页脚
<body>
<header></header>
<nav></nav>
<section>
<article></article>
<aside></aside>
</section>
<footer></footer>
</body>
html5新增的type属性值
用户名:<input type="text" name="username" class="myclass" placeholder="用户名/邮箱/账号" required="required">
placeholder="内容" 输入框的提示信息
required="required" 必须填写
autofocus="autofocus" 自动获取焦点到输入框
html5新增的表单属性
邮箱<input type="email" name="emailc">
限定输入的必须是email类型
url<input type="url" name="address">
限定输入的必须是url类型
用户名:<input type="text" name="username" class="myclass" placeholder="用户名/邮箱/账号" required="required" autofocus="autofocus"><br>
邮箱:<input type="email" name="emailc"><br>
网站地址:<input type="url" name="address"><br>
日期:<input type="date" name="dat"><br>
周:<input type="week" name="we"><br>
面包:<input type="number" name="mianbao">个<br>
颜色:<input type="color" name="co"><br>
亮度:<input type="range" name="ran"><br>
搜索:<input type="search" name="searchnew">
视频:
<video controls>
<source src="images/movie.mp4">
<source src="images/movie.ogg">
<source src="images/movie.webm" >
</video>
音频:
<audio controls >
<source src="images/白狐.mp3">
<source src="images/白狐.OGG">
</audio>
Css3
Css2+新语法
对css2进行扩充 删减 优化
属性选择器
E-element元素 data-属性
E[data] 选择带有data属性的元素对象,给该元素对象加样式
E[data=”one”] 选择带有data属性的元素对象,并且属性值等于one的加样式
E[data^=”o”] 选择器带有data属性的元素对象,并且属性值以o开头的 ^开头
E[data$=”e”] 选择器带有data属性的元素对象,并且属性值以e结尾的 $结尾
E[data*=”n”] 择器带有data属性的元素对象,并且属性值包含n,*包含
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
/* .box li[class]{ 带有class属性的给加颜色为红色
color:red;
}*/
/*.box li[class="col-one"]{
color:red;
font-size:14px;
}*/
/* .box li[class^="t"]{
color:blue;
}
.box li[class$="e"]{
color:red;
} */
li[class*="col-"]{
color:red;
}
</style>
</head>
<body>
<div class="box">
<ul>
<li class="one">html1</li>
<li class="two">css1</li>
<li class="three">css3</li>
<li class="four">bootstrap</li>
<li class="col-one">javascript</li>
<li class="col-two">mysql</li>
<li id="col-md">jquery</li>
<li >php</li>
</ul>
</div>
</body>
</html>
伪类结构
E---element元素
E:first-child{ } 第一个孩子
E:last-child{ } 最后一个孩子
E:only-child{ } 只有一个孩子
E:nth-child(n){ } 第n个孩子 n=1 2 3 4 5 … li:nth-child(3){ }
E:nth-child(2n+1)
E:nth-child(odd) 获得奇数孩子,n=1 3 5 7 …
E:nth-child(2n){ }
E:nth-child(even){ } 获得偶数孩子 n=2 4 6 8
伪元素
E:first-letter 设置第一个文字
E:first-line 第一行文字
E:after 盒子里面插入的内容 在盒子的里面的后面
E:before 在盒子插入内容,在盒子里面的最前边
文本阴影
Text-shadow:水平 垂直 模糊强调 颜色;
正值 右侧 负值 左侧
垂直 正值 下 负值 上
可以有多组值,之间用逗号相隔
盒子阴影
Box-shadow:水平 垂直 模糊尺寸 颜色 内外阴影inset;
默认是外阴影但是如果是外阴影不加outset
如果有多组值中间用逗号相隔
水平 正值是右侧 负值 左侧
垂直 正值下面 负值 上面
盒子变成圆角:border-redius:50%;
设置半透明颜色
Color:rgba(255,0,0,0.3)
Background:rgba(0,0,0,0.6)
背景图片的尺寸
Background-size
:宽度
高度
;
例如
:background-size: 400px 500px;
Background-size:cover;
背景图片会把整个盒子(
宽度和高度
)都用背景覆盖上
Background-size:contain
背景图片会把盒子的宽度或高度覆盖就停止