这几天更的那么勤就是找准定位有目的了吧。
先说说学完CSS和刚学完html5的一个感受对比
刚学完HTML的时候是像找到了一个有着大体骨架的房子
而学完CSS就像在给房子添砖加瓦
我估计后面学到JS就是给房子粉饰上油漆了
CSS相当于将HTML彻彻底底地抽象成一个结构似的东西
HTML虽然可以给字体上色 但是CSS说：这是我的活，我可以做的比你更精致，更好。
将HTML的布局一步步地分开，和word中的排版几乎就是孪生兄弟，只不过这次换到网页上
这次用代码写而已。。。
CSS的三种表现方式
外部样式 连接式(常用) 导入式(old-fashioned)
直接上代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
h1{
color: green;
}
</style>
</head>
<body>
<h1>666</h1>
</body>
</html><link rel="stylesheet" href="css/style.css">html@import url("css/style.css")2.选择器
2.1基本选择器
1.标签选择器：选择一类标签
2.类 选择器 class：选择所有class属性一致的标签
3.id选择器 id选择器 全局唯一
4.优先级 id>class>标签选择器
3.美化网页元素
3.1文本样式
/*颜色
RGB 0-F 十六进制
RGBA 0-1 透明度
text-indent 2em 首行缩进两个字符
line height: 行高
height:文本高度
line height =height 单行文字上下居中
vertical-align = middle 水平对齐
*/
/*上划线 中划线 下划线
text-decoration: underline;
text-decoration: overline;
text-decoration: line-through;<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>文本样式</title>
<style>
h1{
color:rgba(0,255,255,0.5);
}
#TsingHua{
color: #902e78;
background: rgba(9, 242, 210, 0.87);
text-indent: 2em;
height:50px;
line-height: 10px;
font:oblique 900 50px 楷体,serif ;
text-decoration: underline;
}
/*颜色
RGB 0-F 十六进制
RGBA 0-1 透明度
text-indent 2em 首行缩进两个字符
line height: 行高
height:文本高度
line height =height 单行文字上下居中
vertical-align = middle 水平对齐
*/
/*上划线 中划线 下划线
text-decoration: underline;
text-decoration: overline;
text-decoration: line-through;
*/
</style>
</head>
<body>
<h1 class="demo">故事介绍</h1>
<p class="p1">
9月12日9时35分，国家科技重大专项——华能石岛湾高温气冷堆核电站示范工程1号反应堆首次达到临界状态，
机组正式开启“带核运行”。这是示范工程继今年完成双堆冷试、双堆热试、首次装料后取得的又一重大进展，
距离今年年内并网发电的目标再进一步。
</p>
<p id="TsingHua">
清华荣获突出贡献中关村奖1人，杰出青年中关村奖1人，成果奖一等奖6项，二等奖4项
</p>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>文本阴影,超链接伪类</title>
<style>
a{
text-decoration: none;/*没有下划线*/
color:black;
font-size:50px;
}
/*伪类:鼠标悬停*/a:hover{
color:orange;
font-size: 100px;
}
/*伪类：鼠标长按不放*/a:active {
color: green;
font-size: 100px;
}
a:visited{
color: yellow;
font-size: 100px;
}
/*文字阴影
格式：text-shadow: 颜色 水平偏移px上下偏移px 阴影半径px（越大越模糊）*/
#price{
text-shadow: #219024 10px -10px 10px;
}
</style>
</head>
<body>
<a href="https://www.baidu.com" target="_blank">
<img src="../image/1.png" alt="图片">
<p>这是一张图片</p>
</a>
<p id="price">这是上面的价格</p>
</body>
</html>3.4 &3.5文本阴影 超链接伪类
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>文本阴影,超链接伪类</title>
<style>
a{
text-decoration: none;/*没有下划线*/
color:black;
font-size:50px;
}
/*伪类:鼠标悬停*/a:hover{
color:orange;
font-size: 100px;
}
/*伪类：鼠标长按不放*/a:active {
color: green;
font-size: 100px;
}
a:visited{
color: yellow;
font-size: 100px;
}
/*文字阴影
格式：text-shadow: 颜色 水平偏移px上下偏移px 阴影半径px（越大越模糊）*/
#price{
text-shadow: #219024 10px -10px 10px;
}
</style>
</head>
<body>
<a href="https://www.baidu.com" target="_blank">
<img src="../image/1.png" alt="图片">
<p>这是一张图片</p>
</a>
<p id="price">这是上面的价格</p>
</body>
</html>3.6 列表样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>列表样式</title>
<link rel="stylesheet" href="css/style.css" type="text/css">
</head>
<body>
<div id="nav">
<h2 class="item">商品介绍</h2>
<ul>
<li><a href="#">图书</a> <a href="#">音像</a> <a href="#">数字产品</a></li>
<li><a href="#">家妆</a> <a href="#">潮牌</a> <a href="#">阿里巴巴</a></li>
<li><a href="#">五年高考三年模拟</a> <a href="#">数码产品</a> <a href="#">小电影</a></li>
<li><a href="#">小雨伞</a> <a href="#">万艾可</a> <a href="#">G903</a></li>
</ul>
</div>
</body>
</html>#nav {
width:500px;
height:500px;
}
.item {
font: oblique 900 50px Serif;
color: black;
background: whitesmoke;
}
ul {
background: gray;
}
ul li {
list-style: decimal-leading-zero;
/*list-style: 无序表序号的样式;*/
/*list-style: none
前面啥也没*/
}
a {
text-decoration: none;
/*text-decoration: none;去下划线*/
text-indent: 40em;
text-shadow: white 1px 1px;
}
a:hover {
color: orange;
font: oblique 500 20px 楷体;
text-decoration: underline;
}
3.7背景图片和渐变
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>背景和渐变</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
</body>
</html>div{
width:19200px;
height:10800px;
border: 1px solid coral;
background-image: url("../../image/sad.jpg");
}4.1盒子模型
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>盒子模型</title>
<style>
/*h1,u1,li,a,body{*/
/* margin:8px;*/
/* padding:0;*/
/*}*/
h2{
margin: 0;
}
#box{
width:300px;
border:1px solid red;
}
form{
background:skyblue;
}
div div:nth-of-type(1) input{
border: 3px solid black;
}
div div:nth-of-type(2) input{
border: 3px dashed black;
}
</style>
</head>
<body>
<div id="box">
<h2>会员登录</h2>
<form action="#">
<div>
<span>用户名:</span>
<input type="text" placeholder="请输入账号" value="username">
</div>
<div>
<span>密码: </span>
<input type="password" placeholder="请输入密码" value="pwd">
</div>
<div>
<p>
<input type="submit" value="登录">
</p>
</div>
</form>
</div>
</body>
</html>4.解决父级边框塌陷问题
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="style.css">
</head>
<div id="father">
<div class="layer01"><img src="../image/1.png" alt=""></div>
<div class="layer02"><img src="../image/2.png" alt=""></div>
<div class="layer03"><img src="../image/3.png" alt=""></div>
<div class="layer04"><img src="../image/4.png" alt=""></div>
<div class="layer05">
浮动的箱子可以向左浮动，也可以向右移动，直到他的外边缘碰到
</div>
<!-- <div id="clear"></div>-->
</div>
<body>
</body>
</html>css
div{
margin:10px;
padding:5px;
}
#father {
border: 1px black solid;
/*方法3overflow: hidden;*/
}
/*#father:after{*/
/* content:'';*/
/* display:block;*/
/* clear:both;*/
/*}*/
.layer01 {
border:1px red dashed;
display: inline-block;
float :right;
clear: both;
}
.layer02 {
border:1px blue dashed;
display: inline-block;
float :right;
clear: both;
}
.layer03 {
border:1px yellow dashed;
display: inline-block;
float :right;
}
.layer04 {
border:1px deepskyblue dashed;
display: inline-block;
float :right;
}
.layer05 {
border:1px blue dashed;
display: inline-block;
float :right;
}
/*#clear{*/
/* margin:0;*/
/* padding: 0;*/
/* clear:both;*/
/*}*/
/*发现问题 父级边框塌陷（父级的框应该把子类全部包住但并没有实现）*/
/*方法1：增加父级元素高度：将其高度设置很大无限大
缺点 不利于调整*/
/*方法2：在代码最后创造一个新的空div标签，并置为两侧无法浮动
此时代表上面已无浮动元素，故起到了防止塌陷的作用
缺点：需要在html页面结构代码重新创建一个新的div标签
*/
/*方法3：在父级使用overflow 将超出的页面隐藏起来，
此时起到了浮动元素也不可能超出父类的范围
也起到防止塌陷的作用*/
/*
方法4：给父级添加一个伪类after:此操作会自动根据页面结束后设置
一个非常小的块元素文本，也起到了用一小块的空间解决了浮动元素的问题从而使父类将整体框选
该方法不需要在结构中手动添加div标签，自动完成了解决塌陷问题
重难点
*/<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>练习作业</title>
<style>
div{
width:1600px;
height:1600px;
margin: 10px;
padding:5px;
}
#father{
display: inline-block;
border: 1px black solid;
}
.c1{
width: 400px;
height:400px;
line-height: 400px;
display: inline-block;
border: 1px black solid;
text-decoration: none;
background: pink;
text-align: center;
}
.c1:hover{
background: skyblue;
}
.c2:hover{
background: skyblue;
}
.c3:hover{
background: skyblue;
}
.c4:hover{
background: skyblue;
}
.c5:hover{
background: skyblue;
}
.c2{
width: 400px;
height:400px;
line-height: 400px;
display: inline-block;
border: 1px black solid;
text-decoration: none;
background: pink;
text-align: center;
position: relative;
left:790px;
}
.c3{ width: 400px;
height:400px;
line-height: 400px;
display: inline-block;
border: 1px black solid;
text-decoration: none;
background: pink;
text-align: center;
position: relative;
top:400px;
left:-200px;
}
.c4{ width: 400px;
height:400px;
line-height: 400px;
display: inline-block;
border: 1px black solid;
text-decoration: none;
background: pink;
text-align: center;
position: relative;
top:500px;
left:50px;
}
.c5{ width: 400px;
height:400px;
line-height: 400px;
display: inline-block;
border: 1px black solid;
text-decoration: none;
background: pink;
text-align: center;
position: relative;
top:500px;
left:800px;;
}
</style>
</head>
<div id="father">
<a href="https://www.baidu.com" class="c1" >链接1</a>
<a href="https://www.jd.com" class="c2" >链接2</a>
<a href="https://www.taobao.com" class="c3" >链接3</a>
<a href="https://www.bilibili.com" class="c4" >链接4</a>
<a href="https://www.tencent.com" class="c5" >链接5</a>
</div>
<body>
</body>
</html>一个作业：
趁年轻 多去争取 多去试错
人生的追求不多，就是把这个世界的版图都踏足一遍而已
670
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
