<!DOCTYPE html>
<html>
<head>
<title>MyHtml.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<style type="text/css">
div{color:red;font-size:100px;}
</style>
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<link rel="stylesheet" type="text/css" href="demo1.css"/>
</head>
<body>
This is my HTML page. <br>
内嵌样式:
把css的代码嵌入到html标签中
<div style="color:red; font-size:100px;"> This is my HTML page.</div>
语法:
使用style属性将样式嵌入到html标签中
属性的写法: 属性:属性值
多个属性之间使用分号(;)隔开
不建议使用
内部样式:
在head标签中使用style标签进行css的引入
<!--
<style type="text/css">
div{color:red;font-size:100px;}
</style>
-->
语法:
使用style标签进行css的引入
<!-- <style type="text/css"> -->
属性: type:告知浏览器使用css解析器去解析(写法固定)
属性的写法: 属性:属性值
多个属性之间使用分号(;)隔开
外部样式:
将css样式抽取成一个单独的css文件,谁去使用谁就对其引用
<!-- <link rel="stylesheet" type="text/css" href="demo1.css"/> -->
语法:
创建css文件 将css属性写在css文件中
在head中使用link标签进行引入
<!-- <link rel="stylesheet" type="text/css" href="css文件地址"/> -->
rel:代表要引入的文件与html的关系
type:告知浏览器使用css解析器去解析
href:css文件的地址
属性的写法: 属性:属性值
多个属性之间使用分号(;)隔开
@import方式(不常用)
<style type="text/css">
@import url("css的文件地址");
</style>
link与@import方式区别
有些浏览器不支持@import,所有浏览器都支持link
import方式是等待html加载完毕之后在加载,
import方式不支持js的动态修改
css选择器
1.基本选择器
元素选择器(标签选择器)
语法:html标签名{css属性}
<!--
在head标签里头写
<style type="text/css">
span{color:red;font-size:100px;}
</style>
在body里写
<span>hello css!!!!</span>
-->
id选择器 id具有唯一性
<style type="text/css">
#div1{background-color:red;}
#div2{background-color:pink;}
</style>
<div id="div1">hello css1</div>
<div id="div2">hello css2</div>
语法:
#id的值{css属性}
class选择器(常用)
<style type="text/css">
.style1{background-color:red}
.style2{background-color:pink}
</style>
<div class="style1">div1</div>
<div class="style1">div2</div>
<div class="style2">div3</div>
语法: ,class的值{css属性}
id选择器>class选择器>元素选择器 同时对一个标签修饰,id选择器优先权最高
2.属性选择器
<style type="text/css">
input[type='text']{background-color:red}
input[type='password']{background-color:yellow}
</style>
<form action="">
name:<input type="text"/> <br/>
pass:<input type="password" /><br/>
</form>
语法:
基本选择器[属性='属性值']{css属性}
3.伪元素选择器(表示状态之间的切换)
a标签的伪元素选择器
<style type="text/css">
a:link{color:blue}
a:hober{color:red}
a:active{color:green}
a:visited{color:black}
</style>
<a href="#">请点击</a>
语法:
静止状态
a:link{css属性}
悬浮状态
a:hover{css属性}
触发状态
a:active{css属性}
完成状态
a:visited{css属性}
4.层级选择器
<style type="text/css">
#d1 .class2 span{color:red}
</style>
<div id="d1">
<div class="class1">
<span>span1</span>
</div>
<div>
<span class="class2">span2</span>
</div>
</div>
<div id="d2">
<div class="class1">
<span>span1</span>
</div>
<div>
<span class="class2">span2</span>
</div>
</div>
语法:父级选择器 子级选择器 ......
css属性
1.文字属性
font-size:字体大小
font-family:字体类型
2.文本属性
color:字体颜色
text-decoration:下划线
属性值:none underline(有下划线)
text-align:对齐方式
属性值:left right center
3.背景属性
background-color:背景颜色
background-image:背景图片
属性值的格式: url("图片地址");
background-repeat:平铺方式
属性值:no-repeat(不平铺) repeat-x(横向平铺) repeat-y(纵向平铺) repeat(默认横向纵向平铺)
4.列表属性
<style type="text/css">
ul{list-style-type:decimal-leading-zero;}
ul{list-style-image:url("images/a.gif");}
</style>
<ul>
<li>111111</li>
<li>222222</li>
<li>333333</li>
<li>444444</li>
</ul>
list-style-type:列表项前的小标志
属性值:...
list-style-image:列表项前的小图片
属性值:url("图片地址");
5.尺寸属性
<style type="text/css">
#d1{width:100px;height:200px;background-color:red;}
</style>
<div id="d1">div1</div>
width:宽度
height:高度
6.显示属性
display:
属性值:
none:隐藏
block:块级显示
inline:行级显示
使用案例
<form action="">
name:<input id="name" type="text" /><span id="span">对不起 输入不符合要求</span>
<br>
pass:<input id="pass" type="password" />
<br>
<input id="btn" type="button" value="button" />
</form>
<style type="text/css">
span{color:red;display: none}
</style>
<script type="text/javascript">
document.getElementById("btn").onclick = function(){
document.getElementById("span").style.display = "inline";
};
</script>
7.浮动属性
float:
属性值:left right
clear:清除浮动 left right both
缺点: (1)影响相邻元素不能正常显示
(2)影响父元素不能正常显示
盒子模型
<style type="text/css">
#moooncake{width:100px;height:100px;background-color:red;}
#box{width:100px;height:100px;border:10 px solid green;padding:20px;margin:50px;}
</style>
<div id="box">
<div id="mooncake">
花里胡哨
</div>
</div>
border:
border-style:边框的线型
border-color:边框的颜色
border-width:边框的宽度
border-top:上边框
border-bottom:下边框
border-left:左边框
border-right:右边框
padding:代表边框内部与内部元素之间的距离
padding:10px 上下左右都是10px
padding:1px 2px 3px 4px 上右下左分别是1px 2px 3px 4px
padding:1px 2px 上下是1px 左右是2px
padding:1px 2px 3px 上是1px 下是3px 左右是2px
padding-top: 单独设置
margin:代表边框外壁与其他元素之间的距离
margin:10px 上下左右都是10px
margin:1px 2px 3px 4px 上右下左分别是1px 2px 3px 4px
margin:1px 2px 上下是1px 左右是2px
margin:1px 2px 3px 上是1px 下是3px 左右是2px
margin-top: 单独设置
</body>
</html>
<html>
<head>
<title>MyHtml.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<style type="text/css">
div{color:red;font-size:100px;}
</style>
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<link rel="stylesheet" type="text/css" href="demo1.css"/>
</head>
<body>
This is my HTML page. <br>
内嵌样式:
把css的代码嵌入到html标签中
<div style="color:red; font-size:100px;"> This is my HTML page.</div>
语法:
使用style属性将样式嵌入到html标签中
属性的写法: 属性:属性值
多个属性之间使用分号(;)隔开
不建议使用
内部样式:
在head标签中使用style标签进行css的引入
<!--
<style type="text/css">
div{color:red;font-size:100px;}
</style>
-->
语法:
使用style标签进行css的引入
<!-- <style type="text/css"> -->
属性: type:告知浏览器使用css解析器去解析(写法固定)
属性的写法: 属性:属性值
多个属性之间使用分号(;)隔开
外部样式:
将css样式抽取成一个单独的css文件,谁去使用谁就对其引用
<!-- <link rel="stylesheet" type="text/css" href="demo1.css"/> -->
语法:
创建css文件 将css属性写在css文件中
在head中使用link标签进行引入
<!-- <link rel="stylesheet" type="text/css" href="css文件地址"/> -->
rel:代表要引入的文件与html的关系
type:告知浏览器使用css解析器去解析
href:css文件的地址
属性的写法: 属性:属性值
多个属性之间使用分号(;)隔开
@import方式(不常用)
<style type="text/css">
@import url("css的文件地址");
</style>
link与@import方式区别
有些浏览器不支持@import,所有浏览器都支持link
import方式是等待html加载完毕之后在加载,
import方式不支持js的动态修改
css选择器
1.基本选择器
元素选择器(标签选择器)
语法:html标签名{css属性}
<!--
在head标签里头写
<style type="text/css">
span{color:red;font-size:100px;}
</style>
在body里写
<span>hello css!!!!</span>
-->
id选择器 id具有唯一性
<style type="text/css">
#div1{background-color:red;}
#div2{background-color:pink;}
</style>
<div id="div1">hello css1</div>
<div id="div2">hello css2</div>
语法:
#id的值{css属性}
class选择器(常用)
<style type="text/css">
.style1{background-color:red}
.style2{background-color:pink}
</style>
<div class="style1">div1</div>
<div class="style1">div2</div>
<div class="style2">div3</div>
语法: ,class的值{css属性}
id选择器>class选择器>元素选择器 同时对一个标签修饰,id选择器优先权最高
2.属性选择器
<style type="text/css">
input[type='text']{background-color:red}
input[type='password']{background-color:yellow}
</style>
<form action="">
name:<input type="text"/> <br/>
pass:<input type="password" /><br/>
</form>
语法:
基本选择器[属性='属性值']{css属性}
3.伪元素选择器(表示状态之间的切换)
a标签的伪元素选择器
<style type="text/css">
a:link{color:blue}
a:hober{color:red}
a:active{color:green}
a:visited{color:black}
</style>
<a href="#">请点击</a>
语法:
静止状态
a:link{css属性}
悬浮状态
a:hover{css属性}
触发状态
a:active{css属性}
完成状态
a:visited{css属性}
4.层级选择器
<style type="text/css">
#d1 .class2 span{color:red}
</style>
<div id="d1">
<div class="class1">
<span>span1</span>
</div>
<div>
<span class="class2">span2</span>
</div>
</div>
<div id="d2">
<div class="class1">
<span>span1</span>
</div>
<div>
<span class="class2">span2</span>
</div>
</div>
语法:父级选择器 子级选择器 ......
css属性
1.文字属性
font-size:字体大小
font-family:字体类型
2.文本属性
color:字体颜色
text-decoration:下划线
属性值:none underline(有下划线)
text-align:对齐方式
属性值:left right center
3.背景属性
background-color:背景颜色
background-image:背景图片
属性值的格式: url("图片地址");
background-repeat:平铺方式
属性值:no-repeat(不平铺) repeat-x(横向平铺) repeat-y(纵向平铺) repeat(默认横向纵向平铺)
4.列表属性
<style type="text/css">
ul{list-style-type:decimal-leading-zero;}
ul{list-style-image:url("images/a.gif");}
</style>
<ul>
<li>111111</li>
<li>222222</li>
<li>333333</li>
<li>444444</li>
</ul>
list-style-type:列表项前的小标志
属性值:...
list-style-image:列表项前的小图片
属性值:url("图片地址");
5.尺寸属性
<style type="text/css">
#d1{width:100px;height:200px;background-color:red;}
</style>
<div id="d1">div1</div>
width:宽度
height:高度
6.显示属性
display:
属性值:
none:隐藏
block:块级显示
inline:行级显示
使用案例
<form action="">
name:<input id="name" type="text" /><span id="span">对不起 输入不符合要求</span>
<br>
pass:<input id="pass" type="password" />
<br>
<input id="btn" type="button" value="button" />
</form>
<style type="text/css">
span{color:red;display: none}
</style>
<script type="text/javascript">
document.getElementById("btn").onclick = function(){
document.getElementById("span").style.display = "inline";
};
</script>
7.浮动属性
float:
属性值:left right
clear:清除浮动 left right both
缺点: (1)影响相邻元素不能正常显示
(2)影响父元素不能正常显示
盒子模型
<style type="text/css">
#moooncake{width:100px;height:100px;background-color:red;}
#box{width:100px;height:100px;border:10 px solid green;padding:20px;margin:50px;}
</style>
<div id="box">
<div id="mooncake">
花里胡哨
</div>
</div>
border:
border-style:边框的线型
border-color:边框的颜色
border-width:边框的宽度
border-top:上边框
border-bottom:下边框
border-left:左边框
border-right:右边框
padding:代表边框内部与内部元素之间的距离
padding:10px 上下左右都是10px
padding:1px 2px 3px 4px 上右下左分别是1px 2px 3px 4px
padding:1px 2px 上下是1px 左右是2px
padding:1px 2px 3px 上是1px 下是3px 左右是2px
padding-top: 单独设置
margin:代表边框外壁与其他元素之间的距离
margin:10px 上下左右都是10px
margin:1px 2px 3px 4px 上右下左分别是1px 2px 3px 4px
margin:1px 2px 上下是1px 左右是2px
margin:1px 2px 3px 上是1px 下是3px 左右是2px
margin-top: 单独设置
</body>
</html>