选择器 {
属性名:属性值;
属性名:属性值;
属性名:属性值;
}
h1 {
color: red;
font-size: 5px;
}
<标签 style="属性名:属性值; 属性名:属性值;">内容标签>
<h1 style="color: deepskyblue; font-size: 20px">滴滴滴h1>
标签中通过
标签来控制样式,只能影响当前文件<head>
<style>
选择器 {
属性名: 属性值;
属性名: 属性值;
}
style>
head>
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>引入方式title>
<style>
div{
color: white;
font-size: 20px;
background-color: pink;
}
style>
head>
<body>
<div>啦啦啦div>
<div>哒哒哒div>
body>
html>
标签中通过
标签来引入独立 css 文件,可以影响不同的文件<link rel="stylesheet" href="css文件">
rel:表示“关系 (relationship) ”,属性值指链接方式与包含它的文档之间的关系,引入css文件固定值为stylesheet。
href:属性需要引用某文件系统中的一个文件。
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>引入方式title>
<link rel="stylesheet" href="css/01.css">
head>
<body>
<div>蹦蹦炸弹!!!div>
body>
html>
css 样例
div{
color: red;
font-size: 50px;
text-align: center;
}
/*注释内容*/
/* 设置h1的样式 */
h1 {
color: blue;
background-color: yellow;
border: 1px solid black;
}
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>基本选择器title>
<style>
/*元素选择器*/
div{
color: orangered;
}
/*类选择器*/
.cls{
color: lightskyblue;
}
/*id选择器*/
#d1{
color: greenyellow;
}
#d2{
color: green;
}
style>
head>
<body>
<div>啦啦啦div>
<hr/>
<div class="cls">哒哒哒div>
<div class="cls">蹦蹦炸弹div>
<hr/>
<div id="d1">花车颠啊颠div>
<div id="d2">纳西妲睁开眼div>
body>
html>
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>属性选择器title>
<style>
[type]{
color: orangered;
}
[type=password]{
color: lightskyblue;
}
style>
head>
<body>
用户名:<input type="text" /><br/>
密 码:<input type="password"/><br/>
邮 箱:<input type="email"/>
body>
html>
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>伪类选择器title>
<style>
a{
text-decoration: none;
}
/*未访问状态*/
a:link{
color: lightskyblue;
}
/*已访问状态*/
a:visited{
color: plum;
}
/*鼠标悬浮状态*/
a:hover{
color: aquamarine;
}
/*已选中状态*/
a:active{
color: yellow;
}
style>
head>
<body>
<a href="http://www.baidu.com" target="_blank">百度一下a>
body>
html>
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>组合选择器title>
<style>
/*后代选择器*/
.center li{
color: orangered;
}
/*分组选择器*/
span,p{
color: aquamarine;
}
style>
head>
<body>
<div class="top">
<ol>
<li>小时候li>
<li>乡愁是一枚小小的邮票li>
<li>我在这头li>
<li>母亲在那头li>
ol>
div>
<div class="center">
<ol>
<li>长大后li>
<li>乡愁是一张窄窄的船票li>
<li>我在这头li>
<li>新娘在那头li>
ol>
div>
<span>一切都是命运span><br/>
<p>一切都是烟云p>
body>
html>
要想实现这个界面,首先要进行页面布局,然后再填充文本、图片、超链接
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>边框样式title>
<style>
.d1{
border: 5px solid red;
width: 150px;
height: 150px;
}
.d2{
/*设置上边框*/
border-top: 5px solid orangered;
/*设置左边框*/
border-left: 5px double lightskyblue;
/*设置下边框*/
border-bottom: 5px dashed greenyellow;
/*设置右边框*/
border-right: 5px dotted yellow;
width: 150px;
height: 150px;
}
.d3{
width: 150px;
height: 150px;
border: 5px solid orange;
border-radius: 25%;
}
style>
head>
<body>
<div class="d1">div>
<br/>
<hr/>
<div class="d2">div>
<br/>
<hr/>
<div class="d3">div>
body>
html>
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>文本样式title>
<style>
div{
/*文本颜色*/
color: /*orange*/ #ffA500;
/*字体*/
font-family: 仿宋;
/*行间距*/
line-height: 50px;
}
/*下划线 none:无 underline:下划线 overline:上划线 line-through:删除线*/
/*水平方式 left:居左 center:居中 right:居右*/
.d1{
/*下划线 none:无 水平方式 left:居左*/
text-decoration: none;
text-align: left;
}
.d2{
/*下划线 underline:下划线 水平方式 center:居中*/
text-decoration: underline;
text-align: center;
}
.d3{
/*下划线 overline:上划线 水平方式 right:居右*/
text-decoration: overline;
text-align: right;
}
.d4{
/*下划线 line-through:删除线 水平方式 right:居右*/
text-decoration: line-through;
text-align: right;
}
/*文字垂直对齐 top:居上 bottom:居下 middle:居中 百分比*/
#sp1{
vertical-align: bottom;
}
#sp2{
vertical-align: 50%;
}
#sp3{
vertical-align: top;
}
style>
head>
<body>
<div class="d1">一切都是没有结局的开始div>
<div class="d2">一切都是稍纵即逝的追寻div>
<div class="d3">一切欢乐都没有微笑div>
<div class="d4">一切苦难都没有泪痕div>
<img src="../img/wx.png" />
<span id="sp1">微信span>
<hr/>
<img src="../img/wx.png" />
<span id="sp2">微信span>
<hr/>
<img src="../img/wx.png" />
<span id="sp3">微信span>
body>
html>
注意:
文字垂直使用center发现无法控制,所以这里使用了百分比
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单样式title>
head>
<body>
<table width="400px" border="1px" align="center">
<thead>
<tr>
<th>姓名th>
<th>性别th>
<th>年龄th>
<th>数学th>
<th>语文th>
tr>
thead>
<tbody>
<tr align="center">
<td>张三td>
<td rowspan="2">男td>
<td>23td>
<td colspan="2"> 90td>
tr>
<tr align="center">
<td>李四td>
<td>23td>
<td>95td>
<td>98td>
tr>
tbody>
<tfoot>
<tr align="center">
<td >总分数td>
<td colspan="4">373td>
tr>
tfoot>
table>
body>
html>
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>样式控制title>
<style>
/*背景重复*/
body{
/*不重复*/
/*background: url("../img/bg.jpg") no-repeat;*/
/*水平重复*/
/*background: url("../img/bg.jpg") repeat-x;*/
/*垂直重复*/
/*background: url("../img/bg.jpg") repeat-y;*/
/*水平垂直重复*/
background: url("../img/bg.jpg") repeat;
}
/*轮廓控制*/
input{
/*双实线*/
/*outline: double;*/
/*圆点*/
/*outline: dotted;*/
/*虚线*/
/*outline: dashed;*/
/*无*/
outline: none;
}
/*控制元素*/
div{
/*内联元素:无换行无长宽*/
/* display: inline;*/
/*块级元素:有换行*/
/*display: block;*/
/*内联元素:有长宽*/
/*display: inline-block;*/
/*width: 120px;*/
/*height: 120px;*/
/*隐藏元素*/
display: none;
}
style>
head>
<body>
用户名:<input type="text" />
<div>春div>
<div>夏div>
<div>秋div>
<div>冬div>
body>
html>
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>盒子模型title>
<style>
.wai{
border: 1px solid orangered;
width: 200px;
height: 200px;
}
.nei{
border: 1px solid cornflowerblue;
width: 100px;
height: 100px;
/*外边距设置*/
/*margin-top: 50px;
margin-left: 50px;
margin-bottom: 50px;
margin-right: 50px;*/
/*margin: 50px;*/
/*上、右、下、左*/
margin: 30px 35px 70px 65px ;
}
style>
head>
<body>
<div class="wai">
<div class="nei">
div>
div>
body>
html>