1 css的快速入门
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>三种样式出现的位置</title>
<!--需求1: 修改id="p001的样式为红色-->
<!--需求2: 修改 当前页面所有div的颜色为 绿色-->
<!--需求3: 修改 整个项目所有span的颜色为 蓝色-->
<style>
/**/
div {
color : green;
}
</style>
<link href="css/out.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<h2>行内样式</h2>
<!--
特点：出现在标签开头的位置，以style属性的方式存在，只能对这一个标签起作用。
-->
<p id="p001" style="color:red">从前有座山</p>
<p>从前有座山</p>
<hr/>
<h2>内部样式</h2>
<!--
特点：以style标签的形式存在，对整个网页中所有的元素起作用
-->
<div>今天没有足球看</div>
<div>今天没有足球看</div>
<div>今天没有足球看</div>
<div>今天没有足球看</div>
<div>今天没有足球看</div>
<div>今天没有足球看</div>
<div>今天没有足球看</div>
<div>今天没有足球看</div>
<hr/>
<h2>外部样式</h2>
<!--特点：以css文件的方式存在HTML网页之外，可以重用于多个网页文件，使用前要导入css文件 -->
<span>好好学习，天天向上</span>
<span>好好学习，天天向上</span>
</body>
</html>
2 在html中引入css样式的三种方式
css\out.css
/*需求3: 修改 整个项目所有span的颜色为 蓝色*/
span {
color : red;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>三种样式出现的位置</title>
<!--需求1: 修改id="p001的样式为红色-->
<!--需求2: 修改 当前页面所有div的颜色为 绿色-->
<!--需求3: 修改 整个项目所有span的颜色为 蓝色-->
<style>
/**/
div {
color : green;
}
</style>
<link href="css/out.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<h2>行内样式</h2>
<!--
特点：出现在标签开头的位置，以style属性的方式存在，只能对这一个标签起作用。
-->
<p id="p001" style="color:red">从前有座山</p>
<p>从前有座山</p>
<hr/>
<h2>内部样式</h2>
<!--
特点：以style标签的形式存在，对整个网页中所有的元素起作用
-->
<div>今天没有足球看</div>
<div>今天没有足球看</div>
<div>今天没有足球看</div>
<div>今天没有足球看</div>
<div>今天没有足球看</div>
<div>今天没有足球看</div>
<div>今天没有足球看</div>
<div>今天没有足球看</div>
<hr/>
<h2>外部样式</h2>
<!--特点：以css文件的方式存在HTML网页之外，可以重用于多个网页文件，使用前要导入css文件 -->
<span>好好学习，天天向上</span>
<span>好好学习，天天向上</span>
</body>
</html>
3 三种引入方式的优先级
/*需求3: 修改 整个项目所有span的颜色为 蓝色*/
div {
background-color: blue;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>对比三种引入css方式的优先级</title>
<!-- 需求: 对比三种引入css方式的优先级 -->
<link href="css/out.css" rel="stylesheet" type="text/css"/>
<style>
div {
background-color: green;
}
</style>
</head>
<body>
<!-- <div style="background-color: red">好好学习, 天天向上</div>-->
<div>好好学习, 天天向上</div>
</body>
</html>
4 基本选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>基本选择器的使用</title>
<!-- 需求1: 通过表签名选择器将p标签的字体颜色改为 红色 -->
<!-- 需求2: 通过class选择器将class="one" 的样式改为 绿色 -->
<!-- 需求3: 通过id选择器将id="two" 的样式改为 蓝色-->
<!-- 需求4: 将所有的标签的字体颜色改为 黄色 -->
<style>
/*需求1: 通过表签名选择器将p标签的字体颜色改为 红色*/
p {color: red}
/*需求2: 通过class选择器将class="one" 的样式改为 绿色*/
.one {color : green}
/*需求3: 通过id选择器将id="two" 的样式改为 蓝色*/
#two {color:blue;}
/*需求4: 将所有的标签的字体颜色改为 黄色*/
* {color:yellow}
</style>
<!--
基本选择器的优先级:
通用选择器 < 标签名选择器 < class选择器 < id选择器
-->
</head>
<body>
<h2>标签选择器</h2>
<p>这是第1段</p>
<p>这是第2段</p>
<p class="one">这是第3段</p>
<hr/>
<h2>类选择器</h2>
<div class="one">我是一个块级容器</div>
<div>我是一个块级容器</div>
<hr/>
<h2>ID选择器</h2>
<div id="two" class="one">我使用双节棍</div>
<hr/>
<h2>通用选择器</h2>
<span>许三高的歌不错</span>
</body>
</html>
5 层级选择器 和 属性选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--需求1: 将ul标签的后代li标签的字体颜色改为红色 -->
<!--需求2: 将属性type=text的input标签标签的背景颜色改为蓝色-->
<style>
/*需求1: 将ul标签的后代li标签的字体颜色改为红色*/
ul li {color:red }
/*需求2: 将属性type=text的input标签标签的背景颜色改为蓝色*/
/*设置含有type属性的标签*/
/*[type] {background-color: red}*/
/*设置含有type属性的input标签*/
/*input[type] {background-color: red}*/
/*将属性type=text的input标签标签的背景颜色改为蓝色*/
input[type="text"] {background-color: blue}
</style>
</head>
<body>
<h2>层级选择器</h2>
<li>红烧肉</li>
<li>地沟油炒鸡蛋</li>
<ul>
<div>
<li>麻辣豆腐</li>
<li>芹菜</li>
</div>
</ul>
<hr/>
<h2 type="aaa">属性选择器</h2>
用户名：<input type="text"> <br/>
密码：<input type="password">
</body>
</html>
6 扩展选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS扩展选择器：伪类、并集、交集选择器</title>
<!--需求1: 将正常超链接的字体颜色改为红色 -->
<!--需求2: 将点击过后超链接字体颜色改为绿色 -->
<!--需求3: 将鼠标悬浮在超链接上的字体颜色为蓝色 -->
<!--需求4: 将鼠标点击超链接但未弹起的字体颜色为黄色 -->
<!--需求5: p标签和div标签的字体颜色为 粉色 -->
<!--需求6: 将id=sex的input标签的背景色 颜色 红色 -->
<!--需求7: 将class=three的input标签背景色为 黄色 -->
<!--需求8: id="user"的input标签获取鼠标焦点时 背景色为 黄色-->
<style>
/*伪选择器的顺序不能变,必须是 lvha; 如果顺序变了, 效果就不对了*/
/*需求1: 将正常超链接的字体颜色改为红色*/
a:link {color:red}
/*需求2: 将点击过后超链接字体颜色改为绿色*/
a:visited {color:green}
/*需求3: 将鼠标悬浮在超链接上的字体颜色为蓝色*/
a:hover {color:blue}
/*需求4: 将鼠标点击超链接但未弹起的字体颜色为黄色*/
a:active {color: yellow}
/*需求5: p标签和div标签的字体颜色为 粉色*/
/*分解写*/
/*p {*/
/* color:pink;*/
/*}*/
/*div {*/
/* color:pink;*/
/*}*/
/*合并写*/
div,p {
color:yellow;
}
/*需求6: 将id=sex的input标签的背景色 颜色 红色*/
/*input[id='sex'] {background-color: blue}*/
input#sex {background-color: red}
/*需求7: 将class=three的input标签背景色为 黄色*/
input.three {background-color: yellow}
/*需求8: id="user"的input标签获取鼠标焦点时 背景色为 黄色*/
input#user:focus {
/*background-color: yellow;*/
border: 1px solid blue;
}
</style>
</head>
<body>
<h2>伪类选择器</h2>
<!--#表示当前页面，锚点-->
<a href="#1">这是链接</a><br/>
<a href="#2">这是链接</a><br/>
<a href="#3">这是链接</a><br/>
<a href="#4">这是链接</a> <br/>
姓名：<input type="text" id="user">
<hr/>
<h2>并集选择器</h2>
<p>我们是害虫</p>
<div class="three">我们是益虫</div>
<hr/>
<h2>交集选择器</h2>
性别：<input type="text" id="sex"><br/>
性别：<input type="text" class="three">
<hr/>
</body>
</html>
7 背景样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--需求1: 指定body标签的背景颜色 为黄色-->
<!--需求2: 指定body标签的背景图片为 img/girl1.jpg-->
<!--需求3: 指定body标签的平铺方式: 1. x方向平铺, 2 y方向平铺, 3 两个方向平铺, 4.不平铺 -->
<!--需求4: 起始平铺位置: 左上角的坐标 距上100px 居左200px-->
<!--需求5: 指定背景的宽度为100px -->
<style>
body {
/*需求1: 指定body标签的背景颜色 为黄色*/
background-color: yellow;
/*需求2: 指定body标签的背景图片为 img/girl1.jpg*/
background-image: url("img/girl1.jpg");
/*需求3: 指定body标签的平铺方式: 1. x方向平铺, 2 y方向平铺, 3 两个方向平铺, 4.不平铺*/
/*background-repeat: repeat-x; 1. x方向平铺*/
/*background-repeat: repeat-y; 2 y方向平铺*/
/*background-repeat: repeat; 3 两个方向平铺*/
background-repeat: no-repeat;
/*需求4: 起始平铺位置: 左上角的坐标 距上100px 居左200px*/
background-position: 100px 200px;
/*需求5: 指定背景的宽度为100px*/
background-size: 400px;
}
</style>
</head>
<body>
<h1>骑自行车的女孩</h1>
</body>
</html>
8 案例1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*1. 诗放在div的层中，宽400px，全文字体大小14px; 设置一个边框: 1px 实线 红色*/
div {
width: 400px;
font-size: 14px;
border : 1px solid red;
}
/*2. 标题放在h1中。每段文字放在p中*/
/*3. 标题文字大小18px，颜色#06F，居中对齐*/
h1 {
font-size: 18px;
color : #06F;
text-align: center;
}
p {
/*4. 每段文字缩进2em*/
text-indent: 2em;
/*5. 段中的行高是22px*/
line-height: 32px;
}
/*6. "胸怀中满溢着幸福，只因你就在我眼前",加粗，倾斜，蓝色*/
.xiong {
font-weight: bold;
font-style: italic;
color: blue;
}
/*7. 最后一段，颜色#390; 下划线，鼠标移上去指针变化。*/
p:last-child {
color : #390;
text-decoration: underline;
cursor: wait;
}
/*8. 美字加粗，颜色color:#F36，大小18px;*/
#mei {
font-weight: bold;
color : #F36;
font-size: 18px;
}
/*9. 文席慕容，三个字，12px，颜色#999，不加粗*/
h1 span {
font-size: 12px;
color : #999;
font-weight: normal;
}
</style>
</head>
<body>
<div id="content">
<h1>初相遇 <span>文/席慕容</span></h1>
<p><span id="mei">美</span>丽的梦和美丽的诗一样，都是可遇而不可求的，常常在最没能料到的时刻里出现。</p>
<p>我喜欢那样的梦，在梦里，一切都可以重新开始，一切都可以慢慢解释，心里甚至还能感觉到，所有被浪费的时光竟然都能重回时的狂喜与感激。<span class="xiong">胸怀中满溢着幸福，只因你就在我眼前</span>，对我微笑，一如当年。</p>
<p>我喜欢那样的梦，明明知道你已为我跋涉千里，却又觉得芳草鲜美，落落英缤纷，好像你我才初相遇。</p>
</div>
</body>
</html>
9 标准盒子和怪异盒子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*
标准盒子，默认值
标准盒子模型：宽和高会被边框的粗细和内边距撑大
修改class="test1"的样式
1 指定为标准盒子
2 宽200px
3 高200px
4 内边距 10px
5 边框 15px 实线 #eee
*/
.test1 {
width : 200px;
height: 200px;
padding: 10px;
border: 1px solid red;
/*指定为标准盒子*/
box-sizing: content-box;
}
/*
怪异盒子：宽和高是固定，内容因为边框的粗细和内边距会被挤压
修改class="test2"的样式
1 指定为标准盒子
2 宽200px
3 高200px
4 内边距 10px
5 边框 15px 实线 #eee
*/
.test2 {
width : 200px;
height: 200px;
padding: 10px;
border: 1px solid red;
/*指定为怪异盒子*/
box-sizing: border-box;
}
</style>
</head>
<body>
<h2>标准盒子</h2>
<div class="test1">
</div>
<hr/>
<h2>怪异盒子</h2>
<div class="test2">
</div>
</body>
</html>
10 跟边框相关的样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*1. 盒子模型宽和高分别是200px，边框使用double线形，红色，1px粗细*/
div.box {
width : 200px;
height: 200px;
/*border-style: double;*/
/*border-color: red;*/
/*border-width: 1px;*/
border : 1px blue double;
border-radius: 20px;
/*2. 上内边距10px，右内边距20px，下内边距30px，左内边距40px*/
/*padding-top: 10px;*/
/*padding-right: 20px;*/
/*padding-bottom: 30px;*/
/*padding-left: 40px;*/
/*3. 使用缩写的1句话的方式实现*/
/*padding : 10px 20px 30px 50px; 上右下左*/
/*padding : 10px 20px 30px;*/
/*padding : 10px 20px;*/
padding : 10px;
/*4. 对div整个居中*/
/*text-align: center;*/
margin: auto;
}
</style>
</head>
<body>
<div class="box">
我喜欢那样的梦，在梦里，一切都可以重新开始，一切都可以慢慢解释，心里甚至还能感觉到，所有被浪费的时光竟然都能重回时的狂喜与感激。
</div>
</body>
</html>
11 注册案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*1. 表格有四行，第一行和第四行跨2列，第一行是标题th，第四行是放按钮。使用图片按钮*/
table {
/*2. table居中,宽300px，高180px; 边框solid 1px gray*/
margin: auto;
width:300px;
height: 180px;
border:1px solid gray;
border-radius: 20px;
/*3. table添加背景，不平铺，图片背景的宽度和高度与table的宽和高一样。*/
background-image: url("img/bg1.jpg");
background-size: 300px 180px;
}
/*4. td的文字对齐居中，字体大小14px*/
td {
text-align: center;
font-size: 14px;
}
/*5. 用户名和密码文本框使用类样式，也可以使用其它选择器。宽150px，高32px，边框用实线，圆角5px，1个宽度，黑色*/
input#user,input#password {
width: 150px;
height: 32px;
border : 1px solid black;
border-radius: 5px;
}
/*6. 使用伪类样式，当鼠标移动到文本框上的时候，变成虚线橙色边框。得到焦点，背景色变成浅黄色*/
#user:hover, #password:hover {
border : 1px dotted orange;
}
/*得到焦点，背景色变成浅黄色*/
#user:focus, #password:focus {
background-color: lightyellow;
}
/*7. 文本框前面有头像，密码框前面有键盘，左内边距35*/
#user {
background-image: url("img/head.png");
background-repeat: no-repeat;
padding-left: 35px;
}
#password {
background-image: url("img/keyboard.png");
background-repeat: no-repeat;
padding-left: 35px;
}
</style>
</head>
<body>
<table>
<tr>
<!--跨2列-->
<th colspan="2">黑马旅游注册</th>
</tr>
<tr>
<td>用户名：</td>
<td>
<input type="text" id="user">
</td>
</tr>
<tr>
<td>密码：</td>
<td>
<input type="password" id="password">
</td>
</tr>
<tr>
<td colspan="2">
<input type="image" src="img/regbtn.jpg">
</td>
</tr>
</table>
</body>
</html>
2480
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
