点击刷新
选择器
作用：选择页面上的某一个或某一类元素
1.1基本选择器
1）. 标签选择器
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*标签选择器会选择到页面上所有的这个标签，所以只选择了h1而没有p标签*/
h1{
color: blue;
background: aqua;
border-radius: 24px;
}
p{
font-size: 80px;
}
</style>
</head>
<body>
<h1>学java</h1>
<h1>习</h1>
<p>前端</p>
2）.类选择器
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/* 类选择器的样式 .class的名称{}
好处可以多个标签归类，是同一个class，可以复用*/
.dkh{
color: antiquewhite;
}
.asd{
color: aqua;
}
.qwe
{
color: aquamarine;
}
</style>
</head>
<body>
<h1 class="dkh">标题1</h1>
<h1 class="asd">标题2</h1>
<h1 class="qwe">标题3</h1>
<p class="qwe">标题4</p>
</body>
3）.id选择器
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*
id选择器 id必须保证全局唯一，精准定位
#id名称*
优先级：不遵循就近原则 id选择器>class选择器>标签选择器
*/
#dkh{
color: aqua;
}
.style1{
color: bisque;
}
</style>
</head>
<body>
<h1 id="dkh" class="style1">标题1</h1>
<h1 class="style1">标题2</h1>
<h1 class="style1">标题3</h1>
</body>
1.2层次选择器
1）后代选择器 ：在某个元素的后面，例如祖爷爷的后面包括（爷爷 爸爸 你） 祖爷爷 爷爷 爸爸 你
/* 后代选择器
body p{
background: aquamarine;
}*/
2）子代选择器：只有一代
/*子代选择器 只有一代
body>p{
background: aquamarine;
}*/
3）相邻兄弟选择器
/*相邻兄弟选择器 同辈 不过是下面的一个,所以只有p2有颜色，p3则没有
.active+p{
background: bisque;
}*/
<body>
<p class="active">p1</p>
<p>p2</p>
<p>p3</p>
4）通用兄弟选择器
/*通用兄弟选择器，当前选中元素级别向下的所有元素
.active~p{
background: red;
}*/
1.3结构伪类选择器
/*ul的第一个子元素*/ ul li:first-child{
background: #00c4ff;
}
/*ul的第、最后一个子元素*/
ul li:last-child{
background: #6c98ff;
}/*选中p1:定位到父元素，选择当前的第一个元素*/
p:nth-child(1){
background: #ff517a;/*选择父级元素中第一个元素*/
}
p:nth-of-type(2){
background: blue;/*选择父级元素类型为p的第二个*/
}
1.4属性选择器（常用）
id+class结合
/*属性名，属性名=属性值（正则）
=绝对等于
*=包含这个元素
^=以什么开头
$=以什么结尾
*/
/*选中存在ID属性的元素 格式：a[]{}*/
/*a[id]{*/
/* background: blue;*/
/*}*/
/*选中id=first的元素*/
/*a[id=first]{*/
/* background: aquamarine;*/
/*}*/
/*class中有links的元素*/
/* 选中href中以http开头的元素*/
/* a[href^=http]{*/
/* background: brown;*/
/* }*/
/* 选中href中以doc开头的元素*/
a[href$=doc]{
background: blueviolet;
}
2美化网页元素
2.1span标签：作用是使用span标签把重要的字圈起来
2.2字体样式
<style>
body{
font-family: 楷体;
color: blueviolet;
}
h1{
font-size: 50px;
}
.p1{
font-weight: bold;
}
#style1{
font: oblique（字体风格斜体） lighter（粗细） 12px（大小） "楷体";
color: #dd7fff;
}
</style>
2.3文本样式
颜色
文本对齐的方式
首行缩进
行高
装饰
2.4超链接伪类及阴影
a{
text-decoration: none;
color: blueviolet;
}
/* 鼠标悬停的颜色*/
a:hover{
color: brown;
}
#text{
text-shadow: red 10px 10px 20px;
}
</style>
</head>
<body>
<a href="#">
<img src="images/d.jpg" alt="">
</a>
<p>
<a href="#">起风了</a>
</p>
<p id="text">
$9
</p> 2.5列表
<style>
.nav{
width: 300px;
background: gray;
}
.tittle{
background: red;
font: bolder 15px;
color:black;
text-indent: 1em;
line-height: 30px;
}
/*list-style
none 无
square 正方形
circle 空心圆
decimal 数字*/
ul li{
list-style-type: none;
height: 30px;
text-indent: 1em;
}
a{
text-decoration: none;
color: #000000;
font: bold 20px 仿宋;
}
a:hover{
color: coral;
text-decoration: underline;
}
</style>
</head>
<body>
<!--<div> 可定义文档中的分区或节（division/section）。
<div> 标签可以把文档分割为独立的、不同的部分。它可以用作严格的组织工具，并且不使用任何格式与其关联。
如果用 id 或 class 来标记 <div>，那么该标签的作用会变得更加有效。
用法
<div> 是一个块级元素。这意味着它的内容自动地开始一个新行。实际上，换行是 <div> 固有的唯一格式表现。可以通过 <div> 的 class 或 id 应用额外的样式。
不必为每一个 <div> 都加上类或 id，虽然这样做也有一定的好处。
可以对同一个 <div> 元素应用 class 或 id 属性，但是更常见的情况是只应用其中一种。这两者的主要差异是，class 用于元素组（类似的元素，或者可以理解为某一类元素），而 id 用于标识单独的唯一的元素。-->
<div class="nav">
<h2 class="tittle">全部商品分类</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> <a href="#">个护化妆</a>
</li>
</ul>
</div>
2.6盒子
盒子的计算公式为：margin+boder+padding+内容宽度
© 著作权归作者所有
举报
相关热门文章
发表评论
0/200
