通过css样式禁止修改textarea大小
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
textarea{
resize: none;
}
</style>
</head>
<body>
<form action="#" method="post">
<textarea name="" rows="30" cols="30"></textarea>
<input type="submit" value=""/>
</form>
</body>
</html>
元素的显示类型
- 块元素
- 典型的快元素就是div或者p
- 独占一行或多行
- 可以用CSS修改高度和宽度
- 行内元素
- 典型的行内元素就是span
- 一行可以出现多个
- 不可以用CSS修改高度和宽度
- 行内块元素
- 典型的行内块元素是img
- 一行可以出现多个
- 可以使用CSS修改高度和宽度
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
div{
background-color: red;
width: 300px;
height: 300px;
}
span{
background-color: yellow;
width: 300px;
height: 300px;
}
p{
background-color: pink;
width: 300px;
height: 300px;
}
img{
width: 300px;
height: 300px;
background-color: gray;
}
</style>
</head>
<body>
<div>
aaaaa
</div>
<span>
bbbb
</span>
<p>
ccccccc
</p>
<img src="1.jpg" alt="" />
</body>
</html>
CSS的display样式
- display样式的作用是修改元素的默认显示属性
- display: block; 把元素修改为块元素
- display:inline; 把元素修改为行内元素
- display: inline-block; 把元素修改为行内块元素
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
div{
display: inline; /*inline行内*/
background-color: red;
width: 300px;
height: 300px;
}
span{
display: block; /*block就是块元素的意思*/
background-color: yellow;
width: 300px;
height: 300px;
}
p{
display: inline-block; /*inline-block行内块*/
background-color: pink;
width: 300px;
height: 300px;
}
img{
width: 300px;
height: 300px;
background-color: gray;
}
</style>
</head>
<body>
<div>
aaaaa
</div>
<span>
bbbb
</span>
<p>
ccccccc
</p>
<img src="1.jpg" alt="" />
</body>
</html>
后代选择器
- 标签一定要有嵌套关系,这才叫后代
- 语法
父标签 后代标签{CSS样式}
父简单选择器 后代简单选择器{CSS样式}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*后代选择器, 只选择div里面的p里面的span*/
div span{
color: red;
}
</style>
</head>
<body>
<div>
aaaaaaaaaaaaa
<p>
bbbbbbb
<span>ccccccc</span>
</p>
</div>
<span>
111111111111111111
</span>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*后代选择器, 只选择类名c1里面的id为id1的标签*/
.c1 #id1{
color: red;
}
</style>
</head>
<body>
<div class="c1">
aaaaaaaaaaaaa
<p>
bbbbbbb
<span id="id1">ccccccc</span>
</p>
</div>
<span>
111111111111111111
</span>
</body>
</html>
并列选择器
- 可以一次性选择多个元素,使用相同的CSS样式
- 语法
选择器1, 选择器2, ..........{CSS样式}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
div, .c1, #id1{
color: red;
}
</style>
</head>
<body>
<div>
aaaaaaaaaaaaaaaaaaaa
</div>
<p class="c1">
bbbbbbbbbbbbbbbbbbbb
</p>
<span id="id1">
ccccccccccccccccccccccccccc
</span>
</body>
</html>
选择器权重
- id 100
- 类 10
- 标签 1
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
div p{/*1 + 1*/
color: red;
}
p{/*1*/
color: blue;
}
#id1{/*100*/
color: yellow;
}
.c1 #id1{/*10 100;*/
color: green;
}
</style>
</head>
<body>
<div class="c1" id="id2">
<p id="id1" >
aaaaaaaaaaaaaaaaaaaaaaaaa
</p>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.c1 p{/*11*/
color: yellow;
}
div .c2{/*11*/
color: red;
}
</style>
</head>
<body>
<div class="c1">
<p class="c2">
aaaaaaaaaaaaaaaaaaaa
</p>
</div>
</body>
</html>
- 以下代码不适用于优先级,而是继承性
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#id1{
color: red;
}
p{
color: yellow;
}
</style>
</head>
<body>
<div id="id1">
<p>
aaaaaaaaaaaaaaaaaaaaaaaaaaaaa
</p>
</div>
</body>
</html>
CSS不同的书写位置
-
内嵌式
- 把css代码和html代码放到同一个html文件中
- 在html文件中通过style标签把css代码包裹起来
-
外链式
- 把html文件和css文件彻底的分离
- 外链式的写法,总是有一个独立的css文件
- 在html文件中通过link标签的href属性指向这个外部的css文件
01.css
div{
background-color: yellow;
height: 500px;
width: 500px;
font-size: 100px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="01.css"/>
</head>
<body>
<div>
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
</div>
</body>
</html>
- 行内式
- 把css代码做为style属性的值,写在和标签一行
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div style="color: red;">
aaaaaaa
</div>
</body>
</html>
不同css书写方式的优先级
- 内嵌式和外链式没有优先级高低,遵循css三大特性
- 行内式优先级高于内嵌式和外链式
!important最高
02.css
div{
color: yellow !important;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="02.css"/>
<style type="text/css">
div{
color: red;
}
</style>
</head>
<body>
<div style="color: blue;">
aaaaaaaaaaaaaaaaaaaaaaaaaa
</div>
</body>
</html>
不同CSS书写方式使用场景
- 内嵌式
- 由于内嵌式是把css与html写到一个文件里,所以网页的加载速度会相对变快
- 不符合W3C要求
- 对网页加载速度有要求的场景,偶尔使用
- 电商网站首页可能会采用内嵌式CSS
- 外链式
- 相比内嵌式,网页加载速度有些慢
- 完全符合W3C的要求
- 大多数的网页都是采用外链式CSS书写
- 行内式
- 不推荐使用
播放音频
- audio标签
- src=“要播放的音频文件名”
- controls=“controls” 显示内部默认的播放器
- 要使用audio标签播放音频,需要第一步把音频文件拷贝到html文件所在目录
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<audio src="1.mp3" controls loop></audio>
</body>
</html>
播放视频
- video标签
- src指向要播放的视频文件
- width播放窗口的宽度
- height播放窗口的高度
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<audio src="1.mp3" controls loop></audio><br />
<video width="800" height="" src="1.mp4" controls></video>
</body>
</html>
课堂练习-谷歌logo
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
span{
font-size: 300px;
}
.c1{
color: blue;
}
.c2{
color: darkred;
}
.c3{
color: orange;
}
.c4{
color: green;
}
</style>
</head>
<body>
<span class="c1">G</span>
<span class="c2">o</span>
<span class="c3">o</span>
<span class="c1">g</span>
<span class="c4">l</span>
<span class="c2">e</span>
</body>
</html>
边框
- 可以给元素加一个边框
- border 颜色 宽度 线型
- 同时设置上下左右四个边
- border-top 上边框
- border-bottom 下边框
- border-left 左边框
- border-right 右边框
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
div{
width: 600px;
height: 600px;
background-color: yellow;
border: red 10px solid ;
}
.c1{
width: 100px;
height: 100px;
border: black 30px dotted;
}
.c2{
width: 100px;
height: 100px;
border: black 30px solid;
}
.c3{
width: 300px;
height: 300px;
border-top: red 10px solid;
border-bottom: red 20px solid;
border-left: blue 30px solid;
border-right: blue 40px solid;
}
</style>
</head>
<body>
<div>
aaaaaaaaaaa
</div>
<img class="c1" src="1.jpg" alt="" />
<img class="c2" src="1.jpg" alt="" /><br />
<img class="c3" src="1.jpg" alt="" />
</body>
</html>
课堂练习-修改网页背景色
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
body{
font-size: 200px;
color: white;
background-color: black;
}
</style>
</head>
<body>
sdfsfdsfdsfdsfdsfdsfdsfdsfdsfdsfdsfdsfdsfdsfdsf
</body>
</html>
课堂练习-两个盒子
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
div{
width: 400px;
height: 400px;
font-size: 50px;
}
.c1{
color: red;
background-color: blue;
}
.c2{
color: blue;
background-color: red;
}
</style>
</head>
<body>
<div class="c1">
课堂练习
</div>
<div class="c2">
课堂练习
</div>
</body>
</html>
课堂练习-九宫格
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
div{
height: 120px;
}
span{
display: inline-block;
width: 100px;
height: 100px;
}
.c1{
background-color: red;
border: black 10px solid;
}
.c2{
background-color: black;
border: red 10px solid;
}
</style>
</head>
<body>
<div>
<span class="c1"></span><span class="c2"></span><span class="c1"></span>
</div>
<div>
<span class="c2"></span><span class="c1"></span><span class="c2"></span>
</div>
<div>
<span class="c1"></span><span class="c2"></span><span class="c1"></span>
</div>
</body>
</html>
盒子模型
- 网页基本都是有多个盒子组成的
- 盒子模型有几个要素
- 内容
- 边框border
- 内边距padding
- 外边距margin
- top上
- bottom下
- left左
- right右
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.c1{
width: 300px;
height: 300px;
border: red 10px solid;
padding: 10px;
margin: 30px;
}
.c2{
width: 300px;
height: 300px;
border: red 10px solid;
padding-top: 10px;
padding-bottom: 20px;
padding-left: 30px;
padding-right: 40px;
margin-top: 10px;
margin-bottom: 20px;
margin-left: 30px;
margin-right: 40px;
}
</style>
</head>
<body>
<img class="c1" src="1.jpg"/><img class="c2" src="1.jpg"/>
</body>
</html>
311
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
