CSS前端基础
CSS前端基础
1.CSS的快速入门
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 可以编写CSS的代码
语法：
选择器：{
声明1：
声明2：
声明3：
}
-->
<style>
h1{
color:red;
}
</style>
</head>
<body>
<h1>主标题</h1>
</body>
</html>css样式和html文件分开写：
在这里插入图片描述
2、选择器
2.4、属性选择器
=：表示绝对等于 *=：表示包含 ^=：表示以某某开头 $=：表示以某某结尾
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>属性选择器</title>
<style>
.demo a{
float: left;
display: block;
height: 50px;
width: 50px;
border-radius: 10px;
background: blue;
text-align: center;
color: gainsboro;
text-decoration: none;
margin-right: 5px;
font: bold 20px/50px Arial;
}
/*存在id属性的元素 a[]{}*/
a[id]{
background:yellow;
}
a[title = test2]{
background:green;
}
/*class中含有links的元素*/
a[class*=links]{
background:black;
}
/*选中href中以http开头的元素*/
a[href^=http]{
background:black;
}
<!-- 以png结尾-->
a[href$=png]{
background:red;
}
</style>
</head>
<body>
<p class="demo">
<a href="http://www.baidu.com" class="links item" id="first">1</a>
<a href="http://blog.kuangstudy.com" class="links item active" target="_blank" title="test2">2</a>
<a href="images/123.html" class="links item3">3</a>
<a href="images/123.png" class="links item4">4</a>
<a href="abc" class="links item6">5</a>
</p>
</body>
</html>3、美化网页元素
3.1、字体样式
span标签：重点要突出的字使用span标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>字体样式</title>
<style>
/* font-family:字体家族
color：字体颜色
font-size：字体大小
font-weight：字体粗细
*/
body{
font-family: 隶书;
color: aquamarine;
}
h1{
font-size: large;
}
.links{
font-weight: bolder;
}
</style>
</head>
<body>
<h1>剧情简介</h1>
<h2>编辑</h2>
<p class="links">“很久很久以前流传着一个古老传说，这世上存在着七颗名为龙珠的圆球散落各处，只要集齐七颗龙珠并念出咒文，便可召唤出神龙，无论任何愿望都可替许愿人达成”。</p>
<p>住在深山中的孙悟空本领高强，一次偶然的机会他随天才科学家·布尔玛一起走出大山，开始致力于寻找分散在世界各地的七颗龙珠。在这期间，还结识了好色的龟仙人与乌龙、一看到女人就面红耳赤的雅木茶以及自大的和尚小林等伙伴，不但经历了各种各样的冒险和奇遇，也惹出一连串爆笑的故事。当然，也有许多邪恶的家伙们为了满足私欲而寻找龙珠，为此与悟空等人展开了一连番的激斗。为了实现愿望、突破自我、变得更强，围绕着悟空及他的伙伴们，在大世界的浪漫冒险就这样开始了 ！ [5]</p>
</body>
</html>3.2 文本样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>文本样式</title>
<style>
/*
color: rgba(0,255,255,0.78); 颜色加透明度
text-align: center; 位置
text-indent: 2em; 首行缩进
background: cyan; 背景颜色
height: 300px; 高度
line-height: 300px; 行高 单行文字 上下居中
*/
h1{
color: rgba(0,255,255,0.78);
text-align: center;
}
.p1{
text-indent: 2em;
}
.p2{
text-indent: 2em;
}
.p3{
background: cyan;
height: 300px;
line-height: 300px;
}
/*下划线*/
.l1{
text-decoration: underline;
}
/*上划线*/
.l2{
text-decoration: overline;
}
/*中划线*/
.l3{
text-decoration: line-through;
}
/*水平对齐，参照物*/
img,span{
vertical-align: middle;
}
</style>
</head>
<body>
<p>
<img src="images/1.png" alt="" height="100" width="200">
<span>我的桌面</span>
</p>
<p class="l1">111</p>
<p class="l2">222</p>
<p class="l3">333</p>
<h1>剧情简介</h1>
<h2>编辑</h2>
<p class="p1">“很久很久以前流传着一个古老传说，这世上存在着七颗名为龙珠的圆球散落各处，只要集齐七颗龙珠并念出咒文，便可召唤出神龙，无论任何愿望都可替许愿人达成”。</p>
<p class="p2">住在深山中的孙悟空本领高强，一次偶然的机会他随天才科学家·布尔玛一起走出大山，开始致力于寻找分散在世界各地的七颗龙珠。</p>
<p class="p3">在这期间，还结识了好色的龟仙人与乌龙、一看到女人就面红耳赤的雅木茶以及自大的和尚小林等伙伴，不但经历了各种各样的冒险和奇遇，也惹出一连串爆笑的故事。当然，也有许多邪恶的家伙们为了满足私欲而寻找龙珠，为此与悟空等人展开了一连番的激斗。为了实现愿望、突破自我、变得更强，围绕着悟空及他的伙伴们，在大世界的浪漫冒险就这样开始了 ！</p>
</body>
</html>3.3、超链接伪类
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>超链接伪类</title>
<style>
/*默认的颜色*/
a{
text-decoration: none;
color: black;
}
/*鼠标悬浮的颜色*/
a:hover{
color: green;
}
.Person{
}
</style>
</head>
<body>
<a href="http://www.yuedu88.com/sahaladegushi/">
<img src="images/1.png" alt="" width="306" height="432">
</a>
<p class="Person">
<a href="https://baike.baidu.com/item/%E4%B8%89%E6%AF%9B/1364178?fr=aladdin">作者：三毛</a>
</p>
<p class="Price">
<a href="#">￥99元</a>
</p>
</body>
</html>3.4、列表
#nav{
width: 300px;
background: gray;
}
.title{
font-family: 隶书;
font-size: 35px;
font-weight: bold;
text-indent: 1em;
line-height: 35px;
background: red;
}
ul li{
height: 30px;
list-style: none;
text-indent: 2em;
background: gray;
}
a{
font-size: 15px;
text-decoration: none;
color: black;
}
a:hover{
color: chocolate;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link href="css/style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="nav">
<h2 class="title">全部商品分类</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>
</li>
<li>
<a href="#">家居</a>
<a href="#">家装</a>
<a href="#">厨具</a>
</li>
<li>
<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>
</li>
<li>
<a href="#">彩票</a>
<a href="#">旅行</a>
<a href="#">充值</a>
<a href="#">票务</a>
</li>
</ul>
</div>
</body>
</html>3.5、背景
<style>
/*div相当于一个容器*/
div{
width: 1000px;
height: 700px;
border: 1px solid red;
background-image: url("images/1.png");
/*默认是全部平铺的*/
}
.div1{
background-repeat: no-repeat;
}
.div2{
background-repeat: repeat-x;
}
.div3{
background-repeat: repeat-y;
}
</style>本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2021-04-28 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读