黑马笔记目录
CSS引入：
-
CSS 是一种描述 HTML 文档样式的语言。
-
CSS 描述应该如何显示 HTML 元素。
1.CSS 简介
什么是 CSS？
- CSS 指的是层叠样式表* (Cascading Style Sheets)
- CSS 描述了如何在屏幕、纸张或其他媒体上显示 HTML 元素
- CSS 节省了大量工作。它可以同时控制多张网页的布局
- 外部样式表存储在 .css 文件中
*：也称级联样式表
2.CSS语法
CSS 规则集（rule-set）由选择器和声明块组成：
- 选择器指向您需要设置样式的 HTML 元素。
- 声明块包含一条或多条用分号分隔的声明。
- 每条声明都包含一个 CSS 属性名称和一个值，以冒号分隔。
- 多条 CSS 声明用分号分隔，声明块用花括号括起来。
3.CSS选择器
css选择器的作用：
CSS 选择器用于“查找”（或选取）要设置样式的 HTML 元素。
我们可以将 CSS 选择器分为五类：
- 简单选择器（根据名称、id、类来选取元素）
- 组合器选择器（根据它们之间的特定关系来选取元素）
- 伪类选择器（根据特定状态选取元素）
- 伪元素选择器（选取元素的一部分并设置其样式）
- 属性选择器（根据属性或属性值来选取元素）
【1】id选择器
- id 选择器使用 HTML 元素的 id 属性来选择特定元素。
- 元素的 id 在页面中是唯一的，因此 id 选择器用于选择一个唯一的元素！
- 要选择具有特定 id 的元素，请写一个井号（＃），后跟该元素的 id。
- 注意：id 名称不能以数字开头。
例：
<!DOCTYPE html>
<html>
<head>
<style>
#para1 {
text-align: center;
color: red;
}
</style>
</head>
<body>
<p id="para1">Hello World!</p>
<p>本段不受样式的影响。</p>
</body>
</html>
【2】类选择器
- 类选择器选择有特定 class 属性的 HTML 元素。
- 如需选择拥有特定 class 的元素，请写一个句点（.）字符，后面跟类名。
- 类选择器可以多个标签使用同一个类名，且同一个标签可以有多个不同的类名，用任意分隔符分开即可。
- 注意：类名不能以数字开头！
<!DOCTYPE html>
<html>
<head>
<style>
<!--多选-->
.center{
text-align: center;
color: red;
}
<!--指明p标签-->
p.center{
}
<!--p标签的另一个类名-->
.a{
}
</style>
</head>
<body>
<h1 class="center">这个标题不受影响</h1>
<p class="center a">这个段落将是红色并居中对齐的。</p>
</body>
</html>
【3】*通用选择器（通配符）
可以选择所有的标签
【4】分组选择器
- 最好对选择器进行分组，以最大程度地缩减代码。
- 如需对选择器进行分组，请用逗号来分隔每个选择器。
h1, p.c ,#a,.b{
text-align: center;
color: red;
}
【5】组合器选择器
- 组合器是解释选择器之间关系的某种机制。
- CSS 选择器可以包含多个简单选择器。在简单选择器之间，我们可以包含一个组合器。
- CSS 中有四种不同的组合器：
- 后代选择器 (空格)
后代选择器匹配属于指定元素后代的所有元素。
- 后代选择器 (空格)
<!--下面的例子选择 <div> 元素内的所有 <p> 元素：-->
div p {
background-color: yellow;
}
- 子选择器 (>)
子选择器匹配属于指定元素子元素的所有元素。（必须是直系儿子）
<!--下面的例子选择属于 <div> 元素子元素的所有 <p> 元素：-->
div > p {
background-color: yellow;
}
区别一下上面两种选择器的代码：
先看后代选择器：
<!DOCTYPE html>
<html>
<head>
<style>
div p {
background-color: yellow;
}
</style>
</head>
<body>
<h1>后代选择器</h1>
<p>后代选择器匹配作为指定元素后代的所有元素。</p>
<div>
<p>div 中的段落 1。</p>
<p>div 中的段落 2。</p>
<section><p>div 中的段落 3。</p></section>
</div>
<p>段落 4。不在 div 中。</p>
<p>段落 5。不在 div 中。</p>
</body>
</html>
再看子选择器：
<!DOCTYPE html>
<html>
<head>
<style>
div > p {
background-color: yellow;
}
</style>
</head>
<body>
<h1>子选择器</h1>
<p>子选择器 (>) 选择属于指定元素子元素的所有元素。</p>
<div>
<p>div 中的段落 1。</p>
<p>div 中的段落 2。</p>
<section><p>div 中的段落 3。</p></section> <!-- 非子但属后代 -->
<p>div 中的段落 4。</p>
</div>
<p>段落 5。不在 div 中。</p>
<p>段落 6。不在 div 中。</p>
</body>
</html>
- 相邻兄弟选择器 (+)
- 相邻兄弟选择器匹配所有作为指定元素的相邻同级的元素。
- 兄弟（同级）元素必须具有相同的父元素，“相邻”的意思是“紧随其后”。
<!--下面的例子选择紧随 <div> 元素之后的所有 <p> 元素：-->
div + p {
background-color: yellow;
}
区别展示代码：
<!DOCTYPE html>
<html>
<head>
<style>
div + p {
background-color: yellow;
}
</style>
</head>
<body>
<h1>相邻兄弟选择器</h1>
<p>相邻的同胞选择器（+）选择所有作为指定元素的相邻的同级元素。</p>
<div>
<p>div 中的段落 1。</p>
<p>div 中的段落 2。</p>
</div>
<p>段落 3。不在 div 中。</p>
<p>段落 4。不在 div 中。</p>
</body>
</html>
- 通用兄弟选择器 (~)
- 通用兄弟选择器匹配属于指定元素的同级元素的所有元素。
<!--下面的例子选择属于 <div> 元素的同级元素的所有 <p> 元素：-->
div ~ p {
background-color: yellow;
}
全局代码区别展示：
<!DOCTYPE html>
<html>
<head>
<style>
div ~ p {
background-color: yellow;
}
</style>
</head>
<body>
<h1>通用兄弟选择器</h1>
<p>通用的兄弟选择器（~）选择指定元素的所有同级元素。</p>
<p>段落 1。</p>
<div>
<p>段落 2。</p>
</div>
<p>段落 3。</p>
<code>一些代码。</code>
<p>段落 4。</p>
</body>
</html>
【6】伪类选择器
【7】伪元素选择器
【8】属性选择器
以上是基础的选择器，下面为拓展讲解！！！
【1】CSS 元素选择器
【2】CSS 选择器分组
【3】CSS 类选择器详解
【4】CSS ID 选择器详解
【5】CSS 属性选择器详解
【6】CSS 后代选择器
【7】CSS 子元素选择器
【8】CSS 相邻兄弟选择器
CSS重点分析
CSS之伪类选择器
伪类选择器用于向某些选择器添加特殊的效果，比如给链接添加特殊效果，或选择第1个，第n个元素
伪类选择器书写的最大特点是冒号(:)表示：hover、:frist-child
因为伪类选择器很多，比如有链接伪类，结构伪类，所以这里先给大家讲解常用的链接伪类选择器
a:link /*选择所有未被访问的链接*/
a:visited /*选择所有已被访问的链接*/
a:hover /*选择鼠标指针位于其上的链接*/
a:active /*选择活动链接(鼠标按下未弹起的链接)*/
在实际开发中最常用的就是a:hover,顺序只能为lvha,帮助记忆：love和hate
展示代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
a:link{
color: #333;
text-decoration: none;
}
a:visited{
color: orange;
}
a:hover{//最常用的就是a:hover
color: skyblue;
}
a:active{
color: green;
}
</style>
</head>
<body>
<a href="#">小猪佩奇</a>
<a href="#a">花园宝宝</a>
<a href="#b">喜羊羊与灰太狼</a>
</body>
</html>
实际运用代码：
<style>
a{
color: gray;
}
a:hover{
color: red;
}
</style>
<body>
<a href="#aa">经常的写法</a>
</body>
:focus伪类选择器用于选取获得焦点的表单元素
焦点就是光标，一般情况下<input>类表单元素才能获取，因此这个选择器也主要针对于表单元素来说
黑马笔记
返回目录
这个属性常用于表格，其他情况也可以巧妙利用margin负值来合并
- 行内元素如果有内容是指定了宽高的，因此会撑开，方向是左右下（但是我的padding-top方向的值无效）
- 块级元素如果有内容，是指定了高度是，因此会撑开高度方向（没有指定宽度是不会撑开宽度方向的）
- 行内块元素有内容是指定了宽高的，四个方向的padding值都有效
注意：
行内元素的margin-top，margin-bottom是无效的
有很多资料说其padding-top和padding-bottom是无效的，我验证了一下，其是有效的
看图：
很明显padding-top方向压住覆盖了div盒子，而且padding-bottom方向也是存在的
再看图
很明显padding-bottom方向压住覆盖了div盒子，padding-top显示不了
结论：行内元素的margin-top，margin-bottom是无效的，行内元素的padding-top，padding-bottom会产生压盖效果，并不会把盒子推开，视觉上是有效存在的，但在效果上是无效的。
还有一种解决方案：
外边距合并情况只会发生在块级元素上，我们当然也可以采用转换元素显示模式来解决
（注意转换为行内元素是无效垂直外边距的哦）
把父盒子转换为行内块元素或者把子盒子转换为行内块元素，或者两者都可以转换为行内块元素
当然你转为浮动和绝对地位，固定定位也是可以解决的（这种模式下的盒子也是行内块元素）
注意：我的浏览器不会显示小框框，解决办法：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Title</title>
<style>
/*字体声明*/
@font-face {
font-family: 'icomoon';
src: url('fonts/icomoon.eot?wggr8n');
src: url('fonts/icomoon.eot?wggr8n#iefix') format('embedded-opentype'),
url('fonts/icomoon.ttf?wggr8n') format('truetype'),
url('fonts/icomoon.woff?wggr8n') format('woff'),
url('fonts/icomoon.svg?wggr8n#icomoon') format('svg');
font-weight: normal;
font-style: normal;
font-display: block;
}
span{
font-family: 'icomoon';
color: olive;
}
</style>
</head>
<body>
<span></span>
</body>
</html>
效果：
width: 0;
height: 0;
/*下面两行代码是为了考虑兼容性问题而写的*/
line-height: 0;
font-size: 0;
border: 50px solid transparent;
border-left-color: pink;
达到下面效果采用定位就OK了（子绝父相）
此问题出现在行内元素中，还会产生塌陷问题哦
div{
width: 200px;
height: 200px;
margin: 100px 150px 1px;
background-color: pink;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
div{
width: 200px;
height: 40px;
margin: 100px 150px 1px;
background-color: pink;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp:2;
-webkit-box-orient: vertical;
}
-webkit-line-clamp已经检测不到提示属性了，不知道是不是有更好是方法替代
div{
width: 0;
height: 0;
border-color: transparent red transparent transparent;
border-style: solid;
border-width: 22px 8px 0 0;
}
下面是京东的初始化代码，最后三个可以去掉
<style>
/*CSS初始化*/
/*把所有的内外边距清零，并且保证盒子大小不会被撑开*/
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
em, i {
font-style: normal
}
/*去掉无序列表前的黑圈*/
li {
list-style: none
}
/*使图片与文字居中对齐*/
img {
/*下面一句代码主要是为了兼容性*/
border: 0;
vertical-align: middle;
}
/*在按钮上的鼠标样式默认为小手*/
button {
cursor: pointer
}
/*链接去掉下划线并设置字体颜色*/
a {
color: #666;
text-decoration: none
}
/*当鼠标经过链接的时候，字体颜色发生改变*/
a:hover {
color: #c81623
}
/*设置默认字体*/
button, input {
font-family: Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif
}
body {
/*CSS3 抗锯齿性，让文字显示更加清晰*/
-webkit-font-smoothing: antialiased;
background-color: #fff;
font: 12px/1.5 Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif;
color: #666
}
.hide, .none {
display: none;
}
.clearfix:after {
visibility: hidden;
clear: both;
display: block;
content: ".";
height: 0;
}
.clearfix {
*zoom: 1;
}
</style>
CSS提高
扫一扫
345
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
