一.CSS选择器
1.CSS语法
h1(选择器找标签) {color:red;font_size:14px;}
2.CSS style的导入方式
(1)直接将样式写在标签内部的style属性
<div style="color: yellow">我是div标签</div>
(2)在head标签中写style标签
<head>
<style>
p{
color: red;
}
</style>
</head>
<body>
<p>我是p标签</p>
<script></script>
</body>
(3)将样式写在单独的CSS文件中,通过link标签的href属性导入(主要项目中多用)
html文件:
<head>
<link rel="stylesheet" href="css href属性.css">
</head>
<body>
<span>我是span标签</span>
</body>
css文件:
span{
color: aqua;
}
3.CSS选择器
(1)基本选择器
①元素选择器: p
例如:是将所有的p标签全部改成一个颜色
<head>
<style>
p{
color: lawngreen;
}
</style>
</head>
<body>
<p>我是p标签1</p>
<p>我是p标签2</p>
<p>我是P标签3</p>
<p>我是P标签4</p>
<p>我是p标签5</p>
</body>
②ID选择器: #i1
例如:是将所有的id值为i1的标签全部变成一个颜色
<head>
<style>
#i1{
color: red;
}
</style>
</head>
<body>
<div id="i1">我是div标签1</div>
<div id="i1">我是div标签2</div>
<div id="i1">我是div标签3</div>
<div>我是div标签4</div>
<div>我是div标签5</div>
</body>
③类选择器: ".c1" class类中用空格隔开/查看整个文档中的cls的值是不是那个值,如果是就改变颜色
例如:是将所有的class为c1的颜色全部变成一个颜色
<head>
<style>
.c1{
color: red;
}
</style>
</head>
<body>
<p class="c1">我是p标签1</p>
<p>我是p标签2</p>
<div class="c1">我是div标签1</div>
<div>我是div标签2</div>
</body>
(2)组合选择器
①后代选择器
例如:div里面所有的span标签的颜色变成一个颜色
<head>
<style>
div span {
color:red;
}
</style>
</head>
<body>
<div>
<div>
<span>我是span标签1</span>
<p>
<span>我是span标签2</span>
</p>
</div>
</div>
</body>
②儿子选择器
例如:选择所有父级是div元素的span元素(标签)
<head>
<style>
div>span
{
color: lawngreen;
}
</style>
</head>
<body>
<div>
<div>
<span>我是span标签1</span>
<p>我是p标签</p>
</div>
<span>我是span标签2</span>
</div>
</body>
③毗邻选择器
例如:选择所有紧接着div元素之后的p元素,并改变样式
<head>
<style>
div+p{
color: yellow;
}
</style>
</head>
<body>
<div>
<div>我是div标签1</div>
<p>我是p标签1</p>
</div>
<p>我是p标签2</p>
</body>
④弟弟选择器
例如:是将p标签下面的所有兄弟span标签找到并改变样式
<head>
<style>
p~span{
color: aqua;
}
</style>
</head>
<body>
<p>这是p标签1</p>
<span>这是span标签1</span>
<span>这是span标签2</span>
<div>这是div标签</div>
<span>这是span标签3</span>
</body>
(3)属性选择器
例如1:光找有s14这个属性的元素,并为其改变颜色
<head>
<style>
[s14]{
color: yellow;
}
</style>
</head>
<body>
<div s14="123">这是div标签1</div>
<div>这是div标签2</div>
<p s14="456">这是p标签</p>
</body>
例如2:找div元素下有s14属性的,并改变样式
<head>
<style>
div[s14]{
color: yellow;
}
</style>
</head>
<body>
<div s14="123">这是div标签1</div>
<div>这是div标签2</div>
<p s14="456">这是p标签</p>
</body>
(4)分组选择器
例如:找到父级是div元素的p标签和所有紧接着div标签的p标签的元素,并改变样式
<head>
<style>
div+p,div>p{
color: red;
}
</style>
</head>
<body>
<div>我是div标签</div>
<p>我是p标签1</p>
<div>
<p>我是p标签2</p>
</div>
</body>
(5)嵌套选择器
例如:找d1后代中有类是c1样式的span的标签,并改变样式
<head>
<style>
#d1 span.c1{
color: red;
}
</style>
</head>
<body>
<div id="d1">
<div id="d2">
<span>这是span1</span>
<p>
<span class = "c1">这是span2</span>
</p>
</div>
</div>
</body>
(6)伪类选择器
①未访问的链接(设置没有访问过网址的颜色)
<head>
<style>
a:link{
color:red;
}
</style>
</head>
<body>
<a href="https://www.baidu.com">百度</a>
<a href="https://www.luffycity.com">路飞学城</a>
<a href="https://www.taobao.com">淘宝</a>
</body>
②已访问的链接(设置已经访问过网址的颜色)
<head>
<style>
a:visited{
color: yellow;
}
</style>
</head>
<body>
<a href="https://www.baidu.com">百度</a>
<a href="https://www.luffycity.com">路飞学城</a>
<a href="https://www.taobao.com">淘宝</a>
</body>
③鼠标移动到链接上的颜色 (常用)
<head>
<style>
a:hover{
color: red;
}
</style>
</head>
<body>
<a href="https://www.baidu.com">百度</a>
<a href="https://www.luffycity.com">路飞学城</a>
<a href="https://www.taobao.com">淘宝</a>
</body>
④选定的链接(鼠标点住网址的那一时刻的时间的颜色)
<head>
<style>
a:active{
color: blue;
}
</style>
</head>
<body>
<a href="https://www.baidu.com">百度</a>
<a href="https://www.luffycity.com">路飞学城</a>
<a href="https://www.taobao.com">淘宝</a>
</body>
⑤input输入框获取焦点的样式
<head>
<style>
input:focus{
outline: none;
background-color: yellow;
}
</style>
</head>
<body>
<label for="i1">用户名:</label>
<input id="i1" type="text">
</body>
(7)伪元素选择器 (before和after多用于清除浮动)
①first-letter 常用的给首字母设置特殊样式
<head>
<style>
p:first-letter{
font-size: 48px; (字体大小)
color:red (字体颜色)
}
</style>
</head>
<body>
<p>我是一个p标签</p>
</body>
②before 在标签之前插入内容
<head>
<style>
p:before{
content:"*"; (添加的内容)
color: darkred; (添加内容的字体颜色)
}
</style>
</head>
<body>
<p>我是一个p标签</p>
</body>
③after 在标签之后插入内容
<head>
<style>
p:after{
content:"*"; (添加的内容)
color: red; (添加内容的字体颜色)
}
</style>
</head>
<body>
<p>我是一个p标签</p>
</body>
4.CSS选择器的优先级
(1)选择器相同 (最下面的会生效,中间存在覆盖的问题)
<head>
<style>
p{
color: red;
}
p{
color: blue;
}
</style>
</head>
<body>
<p>我是p标签1</p>
<p>我是p标签2</p> ====>展现出来的是蓝色
</body>
(2)选择器不同 (不同的选择器优先级不一样)
例子一:打印出来的结果是黄色的(因为内联样式大于id选择大于类选择器大于元素选择器)
html文件:
<head>
<link rel="stylesheet" href="css.css">
<style>
#d1{
color: red;
}
</style>
</head>
<body>
<div class="c1" id="d1" style="color: yellow">这是div标签1</div>
</body>
css文件:
.c1{
color: blue;
}
例子二:嵌套 (打印出来的结果:这是div标签是黄色,div里面的p标签是红色)
<head>
<link rel="stylesheet" href="css.css">
<style>
div{
color: red;
}
</style>
</head>
<body>
<div class="c1" id="d1" style="color: yellow">这是div标签1</div>
<div>
<p>div里面的p</p>
</div>
</body>
强制生效: (在特殊情况之下才使用,但是尽量不要使用)
p{
color:blueviolet !important;
}
5.css的属性相关
(1)宽和高
不是任何标签都可以设置宽和高,只有块级标签才可以设置,内联标签的宽度是由内容决定的
width属性可以为元素设置宽度
height属性可以为元素设置高度
例如:
<head>
<style>
div{
200px; (宽度)
height: 200px; (高度)
background-color: red; (背景颜色)
}
</style>
</head>
<body>
<div>我是div标签1</div>
<div>我是div标签2</div>
</body>
(2)字体属性
①文字字体(放指定用的字体) 可以放入多个字体,如果第一个浏览器不支持,就会尝试第二个
<head>
<style>
body{
font-family: "Microsoft YaHei", "微软雅黑", sans-serif
}
</style>
</head>
<body>
<p>这是p标签1</p>
<p>这是p标签2</p>
<p>这是p标签3</p>
<p>这是p标签4</p>
<p>这是p标签5</p>
</body>
②字体大小
例子:
<head>
<style>
body{
font-size: 34px; (如果设置成inherit表示继承父元素的字体大小值)
}
</style>
</head>
<body>
<p>这是p标签</p>
</body>
③字体的粗细
④文本颜色
(3)文字属性
①文字对齐
②文字装饰
③首行缩进
