CSS学习笔记1
1.与html关联方式
- 行内样式
<div style="color=black">
abc
</div>
- 外部样式
<link rel="stylesheet" href="../CSS/demo01.css">
@import url("CSS/demo01.css");/*不推荐使用*/
- 内部样式
<style>
h1{
color:black;
}
</style>
2,基本选择器
作用：选择页面上的某一个或者某一类的元素
- 基本选择器
1.标签选择器
标签选择器会选择到页面上所有的这个标签元素
2.类选择器
格式：.class{}
优点：可以让多个标签归类，是同一个class，可以复用
3.id选择器
格式：#id{}
优先级
定位越精准优先级越高
3.高级选择器
3.1层次选择器
1.后代选择器:在某个元素的后面
body p{} //body后面的所有p标签
2.子选择器 : 只有后面一代
body>p{}
3.相邻兄弟选择器 : 同辈
//先定义其中的一个的类名
.class + p{} //只有一个 class的下一个p
4.通用兄弟选择器
.class~p{} //class自己不指定
3.2结构伪类选择器
伪类：条件
<body>
<p>p1</p>
<p>p2</p>
<p>p3</p>
<ul>
<li>li1</li>
<li>li2</li>
<li>li3</li>
</ul>
</body>
选中ul的第一个li子元素
ul li：first-child{}
选中ul的最后一个li子元素
ul li：last-child{}
选中p1(定位到父元素，选择当前的第一个元素)
p:nth-child(1){}/*选择当前p元素的父级元素，选中父级元素的第一个子元素，并且是当前元素当生效！*/
p:nth-of-type(2){}/* 选中父元素下的p元素的第二个，上一个是按顺序，这个是按类型*/
3.3属性选择器（常用）
id +class（两者结合的选择器）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.demo a {
float: left;
display: block;
height: 50px;
width: 50px;
border-radius: 10px;
background-color: aqua;
text-align: center;
color: gainsboro;
text-decoration: none;
margin-right: 5px;
font: bold 20px/50px Arial;
}
/* 1.选中存在id的元素
a[id]{}
2.选中属性里面id=first的元素
a[id=first]{
background-color: red;
}
3.选中属性里class有links的
a[class*="links"]{
background-color: #ff0e10;
}
4.选中href中以http开头的元素
a[href^=http]{
background-color: red;
}
5.选中href属性中以pdf结尾的
a[href$=pdf]{
background-color: red;
}
*/
</style>
</head>
<body>
<p class="demo">
<a href="https://www.baidu.com" class="links itms first " id="first">1</a>
<a href="" class="links itms active" target="_blank" title="test">2</a>
<a href="imgs/123.html" class="links itms">3</a>
<a href="imgs/123.png" class="links itms">4</a>
<a href="imgs/123.jpg" class="links itms">5</a>
<a href="abc" class="links itms">6</a>
<a href="/a.pdf" class="links itms">7</a>
<a href="/abc.pdf" class="links itms">8</a>
<a href="abc.doc" class="links itms">9</a>
<a href="abcd.doc" class="links itms last">10</a>
</p>
</body>
</html>
总结：
= :绝对等于
*=包含
^=以什么开头
$=以什么结尾
4.美化网页元素
span标签：重点要突出的字
4.1字体样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*
font-family：字体样式
font-size：字体大小
font-weight：字体粗细
color：字体颜色
*/
body{
font-family:楷体;
font-size: 50px;
color: aqua;
}
.p1{
font-weight:bolder;
}
</style>
</head>
<body>
<h2> 相思</h2>
<p class="p1">红豆生南国，春来发几枝。</p>
<p>愿君多采撷，此物最相思。</p>
</body>
</html>
4.2文本样式
1.颜色
- color：blue；
2.文本对齐方式
- 文本居中 text-align：center（left right）；
3.首行缩进
- 首行缩进text-indent：2em；
4.行高
- line-height：300px；
5.装饰
- text-decoration：underline; 下划线
- text-decoration: overline;上划线
- text-decoration: line-through ； 中划线
5.超链接伪类
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*使得文字在范围内居中*/
div{
text-align:center;
width: 250px;
}
/*默认的颜色*/
a{
text-decoration: none;
color: #000000;
}
/*鼠标悬浮的颜色*/
a:hover{
color: aqua;
font-size: 20px; /*鼠标悬浮时字体变大*/
}
/*鼠标点击未释放的颜色*/
a:active{
color: red;
}
/*文字阴影（阴影颜色，水平偏移，垂直偏移，阴影半径）*/
#price{
text-shadow: aqua 10px 10px 2px;
}
</style>
</head>
<body>
<div>
<p>
<img src="../imag/pic.jpg" alt="码出高效">
</p>
<p>
<a href="#">码出高效：Java开发手册</a>
</p>
<p>
<a href="#">作者：孤尽</a>
</p>
<p id="price">
¥99
</p>
</div>
</body>
</html>
6.列表
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="../CSS/demo.css">
</head>
<body>
<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>
</body>
</html>
CSS
/*list-style:*/
/*none:去掉原点*/
/*circle:换成圆圈*/
/*decimal:换成有序列表*/
/*square:换成正方形*/
#nav {
width: 223px;
margin-top: 1px;
background: gainsboro;
}
ul li {
line-height: 30px;
list-style: none;
background-image: url("../imag/show.png") ;
background-repeat: no-repeat;
background-position: 157px ;
}
h2 {
font-weight: bold;
text-indent: 35px;
/*颜色 图片 图片位置 平铺方式*/
background: red url("../imag/down.png") 189px 8px no-repeat;
}
a {
text-decoration: none;
color: black;
}
a:hover {
color: aqua;
}
a:active {
color: red;
}
7.背景图片
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
width: 1000px;
height: 800px;
border: 1px solid red;
background-image: url("../imag/meinv.jpg");
}
.div1{
background-repeat: repeat-x;
}
.div2{
background-repeat: repeat-y;
}
.div3{
background-repeat: no-repeat;
}
</style>
</head>
<body>
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
</body>
</html>
8.渐变
background-color: #4158D0;
background-image: linear-gradient(43deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%);
9.盒子模型
margin：外边距
padding：内边距
border:边框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#box {
width: 300px;
background-color: red;
margin: 0 auto;
}
h2 {
display: block;
font-size: 1.5em;
margin-block-start: 0.83em;
margin-block-end: 0.83em;
margin-inline-start: 0px;
margin-inline-end: 0px;
font-weight: bold;
margin-left: 90px;
margin-top: 0px;
}
form {
background-color: aqua;
}
#name {
margin-left: 28px;
padding: 10px;
}
#psw {
margin-left: 28px;
padding: 10px;
}
#mail {
margin-left: 28px;
padding: 10px;
}
#bt {
margin-left: 74px;
}
</style>
</head>
<body>
<div id="box">
<h2>会员登录</h2>
<form action="#">
<div id="name">
<span>姓名：</span>
<input type="text">
</div>
<div id="psw">
<span>密码：</span>
<input type="password">
</div>
<div id="mail">
<span>邮箱：</span>
<input type="email">
</div>
<div id="bt">
<input type="button" value="登录">
<input style="margin-left: 43px " type="button" value="取消">
</div>
</form>
</div>
</body>
</html>
圆角边框
border-radius：xx；
1445
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
