|
CSS学习
1、我的第一个CSS程序
style.css：
h1{
color: red;
}
index.html：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--规范，<style>可以编写css的代码，每一个声明最好使用分；结尾！
语法：
选择器{
声明1；
声明2；
声明3；
}
-->
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<h1>我是标题</h1>
</body>
</html>
2、导入方式
index1：
<head>
<meta charset="UTF-8">
<title></title>
<!--内部样式-->
<style>
h1{
color: green;
}
</style>
<!--外部样式-->
<link rel="stylesheet" href="css/style.css">
<!--外部样式两种写法
1、链接式：
<link rel="stylesheet" href="css/style.css">
2、导入式：css2.0@-->
<style>
h1{
color: green;
}
</style>
</head>
<body>
<!--优先级：行内样式>内部样式>外部样式
就近原则，谁离“h1”这个元素最近就用它！
-->
<!--行内样式：在标签元素中，编写一个style属性，编写样式即可-->
<h1style color="read">我是标题</h1style>
</body>
</html>
index2：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--外部样式：导入式-->
<style>
@import url(css/style.css);
</style>
</head>
<body>
<h1>狂神说java</h1>
</body>
</html>
3、基本选择器
1.标签选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*标签选择器，会选择页面上所有的这个标签的元素*/
h1{
color: #a13d30;
background: #32b578;
border-radius: 24px;
}
p{
font-size: 80px;
}
/*标签选择器的弊端：若只想要第一个h1变色，第二个不变，没有办法分开*/
</style>
</head>
<body>
<h1>学java</h1>
<h1>学java</h1>
<p>听老师说</p>
</body>
</html>
2.类选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*类选择器的格式， .class的名称{}
好处，可以多个标签gui归类，是同一个class，可以复用，可跨标签使用。
*/
.qinjiang{
color: #1442db;
}
.kuangshen{
color: #af69c9;
}
</style>
</head>
<body>
<h1 class="qinjiang">标签1</h1>
<h1 class="kuangshen">标签2</h1>
<h1 class="qinjiang">标签3</h1>
<p class="qinjiang">p标签</p>
</body>
</html>
3.id选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*id选择器 ：id必须保证全局唯一！
#id名称{}
优先级：
不遵循就近原则，固定的
id选择器 > class选择器 > 标签选择器
*/
#qinjiang{
color: #ff008a;
}
.styl1{
color: #02ff00;
}
h1{
color: #2d1dc1;
}
</style>
</head>
<body>
<h1 class="styl1" id="qinjiang">标题1</h1>
<h1 class="styl1">标题2</h1>
<h1 class="styl1">标题3</h1>
<h1>标题4</h1>
<h1>标题5</h1>
</body>
</html>
4、层次选择器
index：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*p{*/
/* background: green;*/
/*}*/
/*后代选择器*/
/* body （空）p{*/
/* background: red;*/
/* }*/
/*子选择器*/
/* body>p{*/
/* background: #3cbda6;*/
/* }*/
/*相邻兄弟选择器:只有一个，相邻（向下）*/
/* .active + p{*/
/* background:#a13d30;*/
/* }*/
/*通用兄弟选择器：当前选中元素的向下的所有兄弟元素*/
/* .active~p{*/
/* background: #02ff00;*/
/* }*/
</style>
</head>
<body>
<p>p0</p>
<p class="active">p1</p>
<p>p2</p>
<p>p3</p>
<ul>
<li>
<p>p4</p>
</li>
<li>
<p>p5</p>
</li>
<li>
<p>p6</p>
</li>
</ul>
<p class="active">p7</p>
<p>p8</p>
</ul></body>
</html>
5、结构伪类选择器
index：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--避免使用，class，id选择器-->
<style>
/*ul的第一个子元素*/
ul li:first-child{
background: #02ff00;
}
/*ul的最后一个子元素*/
ul li:last-child{
background: #ff008a;
}
/*选中p1：定位到父元素，选择当前的第一个元素*/
/*选择当前p元素的父级元素，选中父级元素的第一个,并且是当前元素才生效!,顺序*/
p:nth-child(1) {
background: #2700ff;
}
/*选中父元素，下的p元素的第二个，类型*/
p:nth-of-type(2){
background: yellow;
}
/*a:hover{*/[鼠标指上去才有颜色，产生动画效果]
/* background: #a13d30;*/
/*}*/
/* 伪类有个动作*/
</style>
</head>
<body>
<!--<a href="">312331</a>-->
<!--<h1>h1</h1>-->
<p>p1</p>
<p>p2</p>
<p>p3</p>
<ul>
<li id="qinjiang">li1</li>
<li>li2</li>
<li>li3</li>
</ul>
</body>
</html>
6、属性选择器
<!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: #2700ff;
text-align: center;
color: gainsboro;
text-decoration: none;
margin-right: 5px;
font:boLd 20px/50px Arial
}
/* 属性名. 属性名等于属性值（正则）
=绝对等于
*=包含这个元素
^=以这个开头
$=以这个结尾
*/
/*存在id属性的元素把它选中 a[]{}*/
/* a[id]{*/
/* background: yellow;*/
/* }*/
/*id=first的元素*/
/*a[id=first]{*/
/* background: #02ff00;*/
/*}*/
/*class中，有links的元素*/
/* a[class*="links"]{*/
/* background: yellow;*/
/* }*/
/*选中href中以http开头的元素*/
/*a[href^=http]{*/
/* background: yellow;*/
/*}*/
/*选中href中以pdf结尾的元素*/
/*a[href$=pdf]{*/
/* background: yellow;*/
/*}*/
</style>
</head>
<body>
<p class="demo">
<a href="https//www.baidu.com"class="links item first"id="first">1</a>
<a href="https//www.blog.kuangstudy.com"class=links item active"target="_blank"title="test">2</a>
<a href="images/123.html"class="links item">3</a>
<a href="images/123.png"class="links item">4</a>
<a href="images/123.jpg"class="links item">5</a>
<a href="abc"class="links item">6</a>
<a href="/a.pdf"class="links item">7</a>
<a href="/abc.pdf"class="links item">8</a>
<a href="abc.doc"class="links item">9</a>
<a href="abcd.doc"class="links item last">10</a>
</p>
</body>
</html>
来源：https://www.cnblogs.com/LiLi8866/p/16101435.html |
发表于 2022-4-5 08:51:00