CSS基础
css基础
1.什么是css
- css是web标准中的表现标准，专门负责网页中内容的布局和样式
目前使用的是css3
2.css的语法（怎么写）
a.基本结构
选择器{属性名1：属性值1；属性名2：属性值2；.......}
b.说明
选择器{} - 通过选择器决定样式是针对哪个标签写的（内联样式表中没有这个结构）
属性 - 属性名不是随便写的，必须是css通过并且支持的200+个属性中的一个；
属性名和属性值用冒号隔开，多个属性之间用分号隔开，（如果没有分号，会导致后面的所有属性无效）
3.css代码写在哪
内联样式表
将样式表作为html标签中的style属性的值
只能针对一个标签有效
内部样式表
将样式表作为head标签的style标签的内容
可以针对当前html中所有的标签
外部样式表
将样式表写在一个css文件中，再通过link导入
可以针对所有的html文件中的标签
优先级：内联样式优先级最高，内部和外部谁写在后面谁的优先级高
4.常用属性补充
color - 字体颜色
font-size - 字体大小
background - 背景颜色
width - 宽度
heigth - 高度
css中的颜色值：a.颜色的英语单词
b.rgb的16进制值；例如：#ff0000
c.rgb（）；rgba（）直接使用rgb值 rgb（r，g,b）;rgba（r，g,b,a）a是透明度：0~1,0是完全透明，1是不透明
css中的数字：如果这个数字表示大小，必须加单位 px（像素）或者em（空格）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>css基础</title>
<!--内部样式
style标签中的内容，必须只能是css代码
-->
<style type="text/css">
/*内部样式可以同时写多个样式表*/
div{
color: blue;
font-size: x-large;
}
a{
color: black;
font-size: xx-large;
background-color: deepskyblue;
}
</style>
<!--外部样式
a.link标签 - 导入外部文件
rel属性 - 确定导入的文件功能 stylesheet - 设置样式表 ； icon - 设置网页图标
type属性 - 确定文件类型 ；文件类型/文件后缀；text/css - 文本/文件后缀是css；
image/ico - 图片/文件后缀是ico
href属性 - 需要导入的文件路径
-->
<link rel="stylesheet" type="text/css" href="css/style.css"/>
<link rel="icon" type="image/ico" href="img/jingdong.ico"/>
<script>
function msa()
{
alert("你好吗");
}
</script>
<script src="js/js.js"></script>
</head>
<body>
<!--style标签也可以放在body中-->
<!--内联样式
body中每个有显示效果的标签都有style属性，用来设置当前标签的样式
style属性值的引导中，写的是css代码
-->
<p style="color: rgba(100,100,100,0.8);font-size: larger;background-color: cyan;">都看见爱上看</p>
<div>
<p>发生的空间发挥</p>
<font>发生的空间发挥</font>
</div>
<a href="https://www.baidu.com/" target="_blank">百度一下</a>
<h1>我是h1</h1>
<input type="button" name="" id="" value="点我啊" onclick="msa()"/>
<script>
document.write("<h1>This is a heading</h1>");
</script>
<button type="button" onclick="alert('哈哈哈哈')">点我啊</button>
<script type="text/javascript">
function myfunc()
{
alert("嘿嘿")
}
</script>
<button type="button" onclick="myfunc()">点我啊</button>
<p id="demo">啥快递就暗示</p>
</body>
</html>
显示效果image.png
选择器
-
style标签可以写在html的任何位置
css通过的选择器的写法大概有十几种，常见的：
1.标签（元素）选择器：直接将标签名作为选择器，选中当前html中所有指定的内容
例如：a{}选中当前html中所有a标签
2.id选择器：将标签的id属性前面加#作为选择器，选择所有id指定值的标签
例如：#text{} - 选择当前所有id=”text“的标签
3.class选择器（类型选择器）：将标签的class属性值前面加.作为选择器，选中所有class指定值的标签
例如：.text{} - 选中当前html中所有class=“text”的所有标签
4.群组选择器： 将多个选择器用逗号隔开，作为一个选择器，同时选中每个单独的选择器选中的所有的标签
例如：p，#text，a，.text{} - 选中所有的p标签，a标签，和class=“text”以及id=”text“的标签
5.后代选择器：将多个选择器用空格隔开，作为一个选择器；从前往后一层一层的找，找到最后一个选择器对应的标签
例如：div .text #text {} - 选中div标签中class=“text”标签中id=“text”的标签
6.通配符：将*作为选择器，选中当前页面中所有的标签
例如： *{} - 选中所有的标签
<style type="text/css">
/*id选择器*/
#text{
color: red;
}
/*标签选中器*/
div{
color: blue;
}
/*class选择器*/
.text{
width: 300px;
height: 200px;
background-color: gray;
}
/*后代选择器*/
div div div {
color: green;
}
/*通配符*/
*{
/*underline - 下划线*/
/*overline - 上划线*/
/* line-through - 删除线*/
/*none - 去掉下划线*/
text-decoration: underline;text-decoration: overline;text-decoration: line-through;
}
</style>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="" class="">
div1
<div id="text">
div2
</div>
<div class="text">
<div id="aa" class="aa">
heheheh
</div>
</div>
</div>
</div>
</body>
</html>
显示结果image.png
伪类选择器
- 伪类选择器
伪类选择器是用来选中标签的不同状态（为了标签的不同状态选中不同样式）
1.基本格式
普通选择器：伪类选择器
2.伪类选择器
1） link - 标签的初始状态（一般作用于a标签，表示a标签中的链接没有成功访问过对应的状态）
标签：link{} - 标签是通过各种选择器来选择的标签
例如： a：link{}
-
visited - 超链接被访问后的状态(一般作用于a标签)
-
hover - 鼠标悬停在标签上的时候对应的状态
-
active - 激活状态，鼠标按下还没有弹起的状态
-
爱恨原则：当同一个标签需要同时给多个状态添加样式的时候，要遵守爱恨原则
LoVeHAte 先link 再visited 再 hover 后active
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
a{
text-decoration: none;
}
a:link{
color: red;
}
a:visited{
color: grey;
}
a:hover{
text-decoration: underline;
}
p:hover{
color: green;
font-size: 100px;
}
p:active{
color: blue;
}
</style>
</head>
<body>
<a href="https://www.4399.com/" target="_blank">超链接</a>
<p>哈哈哈哈哈哈</p>
</body>
</html>
显示结果image.png
