<html>
<head>
<meta charset="UTF-8">
<title>01css的基本使用</title>
<!--css一般写在head中-->
<!--在style中写css代码-->
<style type="text/css">
/*这是css的注释*/
/*css可以根据选择器筛选到对应的元素,然后给这些元素设置对应的属性*/
/*css基本使用格式:选择器{属性n:属性值;属性p:属性值}可以存放多个属性
* */
div{
width: 200px;
height: 200px;
background: red;
}
</style>
</head>
<body>
<div>day02</div>
</body>
</html>
/*02css使用的位置*/
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>02css的使用位置</title>
<!--外部样式表-->
<link rel="stylesheet" type="text/css" href="css/divC.css"/>
<!--优先级:遵循就近原则(内部样式表和外部样式表谁在后边谁用谁)
如果需要使得一个属性的优先级最高,可以在该属性的值后边加!import
-->
<!--内部样式表-->
<style type="text/css">
div{
width: 100px;
height: 100px;
background: blue !important;
}
</style>
</head>
<body">
<!--内联样式表-->
<!--优先级最高-->
<div style="width: 500px;height: 500px;background: red;">创奇那i牛股俄国</div>
<div>床前明月光</div>
</body>
</html>
<!--03css常用的选择器-->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>03css常用选择器</title>
<style type="text/css">
/*元素选择器
格式: 元素名{属性名:属性值;属性名n:属性值}
作用: 将元素名对应的元素都设置对应的属性
* */
/*p{color:red}*/
/*id选择器
使用:需要给需要设置的该元素设置一个id属性
格式: #id名{属性名:属性值;属性名n:属性值} 需要一一对应
作用: 将id名对应的元素设置对应的属性
id 通常作为唯一的标识,但是,其他的元素也是用的id属性也会生效,极少数的浏览器不支持
* */
#one{color:blue}
/*类选择器 class选择器
使用:需要给需要设置的该元素设置一个class属性
格式: .class属性{属性名:属性值;属性名n:属性值} 需要一一对应
作用: 将class名对应的元素都设置上对应的属性
*
* */
.import{color:darkgoldenrod}
</style>
</head>
<body>
<p class="import">山西疾控:你长大成热嗯了</p>
<p>飒飒大大:个税上调了</p>
<p id="one">飒飒大大:还没有女朋友</p>
<p class="import">ssdd:房价涨了</p>
</body>
</html>
<!--04同时使用多个选择器-->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>04同时使用多个选择器</title>
<style type="text/css">
/*div{width:200px;}
#one{height: 200px;}
.two{background: red;}*/
/*#one{width:200px;height: 200px;}
#three{background: red;}*/
.one{width:200px;height: 200px;}
.three{background: red;}
</style>
</head>
<body
<!--如果一个元素使用多个选择器,选择器中有相同的属性值
优先级顺序:id>class>元素
id属性不能同时指定多个属性,class可以指定多个属性-->
<!--<div id="one" class="two">进三胖胖来中国啦</div>-->
<!--<div id="one three">阿斯顿你</div>-->
<div class="one three">只考了888分</div>
</body>
</html>
<!--05伪类选择器-->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>05伪类选择器</title>
<style type="text/css">
/*没有被访问的状态*/
a:link{color:black}
/*已经被访问的状态*/
a:visited{color:red}
/*鼠标移上去的颜色*/
a:hover{color:#DAA520}
/*鼠标点下时的颜色*/
a:active{color: #00aa55;}
</style>
</head>
<body>
<a href="https://www.baidu.com" target="_blank">百度</a>
</body>
</html>
<!--06群组选择器-->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>06群组选择器</title>
<style type="text/css">
h1,p,div{color: green;}
/*h1,p,div,#one,.two{color: red;}*/
/*群组选择器:
格式:选择器1,选择器n{属性n:属性值}
作用:可以将多种选择器都设置相同的属性
* */
</style>
</head>
<body>
<h1>西施豆腐</h1>
<p id="one">沉鱼落雁</p>
<div class="two">闭月羞花</div>
</body>
</html>
<!--07包含选择器-->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>07包含选择器</title>
<style type="text/css">
div{color:chartreuse}
div div{color:green}
div div div{color: darkmagenta;}
/*
包含选择器:
格式: 父级选择器1 子级选择器n{属性名:属性值}
父级与子级之间用空格隔开,可以有多层包含关系
作用:将父级下的子级下的所有元素设置成对应的属性
* */
</style>
</head>
<body>
<div>
这是第一层
<div>
这是第二层
<div>
这是第三层
</div>
</div>
</div>
</body>
</html>
<!--08通配符选择器-->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>08通配符选择器</title>
<style type="text/css">
*{color:red}
/*
* 通配符选择器: *代表所有的选择器
* */
</style>
</head>
<body>
<h1>西施豆腐</h1>
<p id="one">沉鱼落雁</p>
<div class="two">闭月羞花</div>
</body>
</html>
扫一扫
117
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
