🍯前端~CSS
简介：为页面中的元素添加样式
目录
1、基础选择器
2、组合选择器
3、属性选择器
4、伪类选择器
5、背景样式(各种样式）
使用方式：》》》
- 行内样式：样式定义在行内部标签上
- 内部样式：css样式定义在html内部
- 外部样式：css代码定义在html外部css文件内
注意点：
- 样式优先级：谁离元素近优先显示谁
- 外部样式引入：<link rel=“stylesheet” href=“文件名.css”/>
选择器分：》》》
- 基础选择器（重点）
- 属性选择器
- 组合选择器
- 群组选择器
- 伪列选择器
- 伪元素选择器
1、基础选择器
- id选择器
- 元素选择器
- 通用选择器
- 类选择器
优先级》》id--->类---->元素---->通用*
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>css02</title>
<style>
/* 通用样式 */
*{
font-weight: bold;
font-size: 30px !important;
}
/* 元素选择器（群组选择器）*/
p,span,div {
background-color: rgb(30, 88, 90);
}
/* 类选择器 */
.ps{
border: 5px solid blueviolet;
}
/* id选择器 */
#a,#b,#c{
font-style: italic ;
}
/* id-->类-->元素--->通用 */
</style>
</head>
<body>
<p class="ps" id="a">
彩虹海
</p>
<hr>
<span class="ps" id="b">
宇宙深处
</span>
<hr>
<div class="ps" id="c">
黄金三角
</div>
</body>
</html>
2、组合选择器
- 样式继承：字体，背景色，字号
- 不会被继承的：边框内外边距
后代选择器(以空格 分隔)、子元素选择器(以大于 > 号分隔）、相邻兄弟选择器（以加号 + 分隔）、普通兄弟选择器（以波浪号 ～ 分隔）
①、后代选择器(以空格 分隔)
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../../js/demo01.js"></script>
<style>
.u1 li{
border: 5px solid yellow;
}
</style>
</head>
<body>
<ul class="u1">
<li >水果
<ul>
<li>苹果</li>
<li>香蕉</li>
<li>橘子</li>
</ul>
</li>
</ul>
<ul>
<li>蔬菜
<ul>
<li>苹果</li>
<li>香蕉</li>
<li>橘子</li>
</ul>
</li>
</ul>
</body>
</html>
②、子元素选择器(以大于 > 号分隔）
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../../js/demo01.js"></script>
<style>
.u1>li{
border: 5px solid yellow;
}
</style>
</head>
<body>
<ul class="u1">
<li >水果
<ul>
<li>苹果</li>
<li>香蕉</li>
<li>橘子</li>
</ul>
</li>
</ul>
<ul>
<li>蔬菜
<ul>
<li>苹果</li>
<li>香蕉</li>
<li>橘子</li>
</ul>
</li>
</ul>
</body>
</html>
③、相邻兄弟选择器（以加号 + 分隔）
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../../js/demo01.js"></script>
<style>
.u1+ul{
border: 5px solid yellow;
}
</style>
</head>
<body>
<ul class="u1">
<li >水果
<ul>
<li>苹果</li>
<li>香蕉</li>
<li>橘子</li>
</ul>
</li>
</ul>
<ul>
<li>蔬菜
<ul>
<li>苹果</li>
<li>香蕉</li>
<li>橘子</li>
</ul>
</li>
</ul>
</body>
</html>
④、普通兄弟选择器（以波浪号 ～ 分隔）
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../../js/demo01.js"></script>
<style>
.u1~p{
border: 5px solid yellow;
}
</style>
</head>
<body>
<ul class="u1">
<li >水果
<ul>
<li>苹果</li>
<li>香蕉</li>
<li>橘子</li>
</ul>
</li>
</ul>
<div>div标签</div>
<p>p1标签</p>
<p>p2标签</p>
</body>
</html>
3、属性选择器
- 【】是有此属性的
- 选择器【属性名】
- 【属性名=“值”】
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../../js/demo01.js"></script>
<style>
[class=div1]{
background: hotpink;
}
[id]{
background: khaki;
}
</style>
</head>
<body>
<ul class="u1">
<li >水果
<ul>
<li id="apple">苹果</li>
<li>香蕉</li>
<li>橘子</li>
</ul>
</li>
</ul>
<div class="div1">div标签</div>
<p>p1标签</p>
<p>p2标签</p>
</body>
</html>
4、伪类选择器
- 选择器：hover,当鼠标悬停在元素上时候显示的样式
- 常用属性：
- first-child:父类的第一个元素、
- nth-child(n)：选择父类第n个元素、
- nth-child(odd)/(even):odd是奇数行，even是偶数行
a:link {color:#FF0000;} /* 未访问的链接 */
a:visited {color:#00FF00;} /* 已访问的链接 */
a:hover {color:#FF00FF;} /* 鼠标划过链接 */
a:active {color:#0000FF;} /* 已选中的链接 */
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../../js/demo01.js"></script>
<style>
p{
font-size: 50px;
font-family: "华文行楷";
border: black 5px solid;
}
p:hover{
border: 5px solid black;
background: red;
}
</style>
</head>
<body>
<p>你好世界</p>
</body>
</html>
5、背景样式(各种样式）
- 颜色、图片（是否平铺，大小，位置）
- 设置平铺属性：background-repeat
- no-repeat:不平铺
- repeat-x:x轴不平铺
- repeat-y：y轴不平铺
- background-size：一个值默认是宽度，两个则是宽高
- background-postion: 如果只给一个值，另一个默认剧中设置
复合属性：background:颜色，图片，平铺，位置，顺序，个数任意改变
- 颜色三种设置方式：
- ①rgb()：三原色
- ②十六进制，#六个数字
- ③英语单词：red,blue……
- 常用属性：opeity():某个元素的透明度（0~1)
- rgba():背景颜色透明度（0~1,0：完全透明）
字体设置方式：>>>
- 加粗font-wight
- normal:普通
- lighter:细体
- bold:加粗
- 斜体font-style:normal/italic
- 字体font-family:“华文行楷”
- 文本修饰： text-decoration
- none:去除下划线
- underline：下划线
- overline：上划线
- line-through：中划线
- 首行缩进：text-indent:(像素|2em：2个字体大小）
对齐方式》》》
- text-align:元素内部内容在元素宽度中水平对齐
- line-height:垂直对齐
- text-shadow:阴影，文本阴影
- box-shadow:边框阴影
Display属性：》》》
- none 元素消失
- inline:代表行内元素
- block:块元素
- inline-block:行内块，就是两则通有特点
定位：文档流》》》》
- 默认排序：从上到下，从左到右
postion:五种属性- static：默认位置静态定位的元素不会受到 top, bottom, left, right影响
- relative：相对定位元素的定位是相对其正常位置。
- fixed：元素的位置相对于浏览器窗口是固定位置。即使窗口是滚动的它也不会移动
- absolute：绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于<html>
- sticky：sticky 英文字面意思是粘，粘贴，所以可以把它称之为粘性定位。position: sticky; 基于用户的滚动位置来定位。
练习：》》》
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My空间</title>
<script src="../../js/demo.js"></script>
<link rel="stylesheet" href="../../css/demo.css">
<script>
window.onload=function(){
console.log("惊喜")
console.log(document.getElementById("ul1"))
};
var a=10;
console.log(a);
function n1(){
var num=100;
console.log(num);
}
n1();
var obj={
name:"小王",
age:17,
address:"kkkkk"
}
console.log(obj)
</script>
<style>
*{
/* margin: 0px; */
padding: 0px;
}
ul{
list-style: none;
}
li{
display:inline-block;
height: 50px;
width: 25%;
text-align: center;
line-height:50px;
background:black;
font-size: 30px;
color: cornflowerblue;
font-family: "华文行楷";
}
li:hover{
text-decoration: none;
color: hotpink;
border-bottom: 5px solid lightcoral;
}
</style>
</head>
<body>
<ul id="ul1">
<li onclick="alert(Helloworld)">我的世界</li><li>我的音乐</li><li>我的钱包</li><li>我的相册</li>
</ul>
<div id="div">
</div>
</body>
</html>
134
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
