Css 基础
文章目录
一、Css是什么
层叠样式表：同一个元素上可以应用多种样式。这些样式之间会产生叠加，从而实现页面变得更好看效果。
CSS 就是 “东方四大邪术” 之化妆术 .
东方四大邪术 :中国的ps，日本的化妆，泰国人妖，韩国整容
二、基本语法规则
选择器{
N条声明
}
1、style标签本身放在页面的哪里都可以，一般放在head标签中
2、选择器是针对那个标签元素设置样式—（找谁）
3、{ }里面的值进行躯体设定。
2.1 css的注释
/*这是注释*/
快捷键：ctrl+/
2.2 格式规范
1、css不区分大小写，一般都是小写
2、如果属性由多个单词构成，使用 - 来作为分割—— font-size（脊柱命名法）
3、冒号后面带空格
4、选择器和‘{’ 之间带空格
三、选择器的种类
1、基础选择器：单个选择器构成
标签选择器，类选择器，id选择器，通配符选择器
2、符合选择器：把多种基础选择器综合运用起来
后带选择器，子选择器，并集选择器，伪类选择器
四、基础选择器
4.1 标签选择器
能够吧一类标签全都给选出来
<style>
/*选出所有p标签，进行设置*/
p {
color: blue;
font-size: 30px;
}
</style>
<p>这是一段文字</p>
<p>这是一段文字</p>
<span>这是另一段文字</span> <br>
<span>这是另一段文字</span>
优点：能快速为同一类型的标签都选择出来
缺点：不能差异化选择
4.2类选择器 （常用选择器）
可以选中一类元素，也可以进行差异设置
<style>
/*选出所有p标签，进行设置*/
p {
color: blue;
font-size: 30px;
}
/* css 中的类需要前面价格 . 后面是类名，这样就创造了一个类 */
.green {
color: green;
}
</style>
<p>这是一段文字</p>
<!-- 在标签中通过class属性引入类名 -->
<p class="green">这是一段文字</p>
<span>这是另一段文字</span> <br>
<span>这是另一段文字</span>
1、优点：
- 差异化表示不同标签
- 一个类名可以被多个标签引入
- 一个标签也可以引入多个类名（同时也引用了多种样式）
<style>
.red {
background-color: red;
}
.box {
/*设置范围，高度和宽度*/
width: 200px;
height: 150px;
}
.blue {
background-color: blue;
}
</style>
<!-- 一个类名可以被多个标签引入-->
<!-- 一个标签也可以引入多个类名（同时也引用了多种样式） -->
<div class="box red"></div>
<div class="box blue"></div>
<div class="box red"></div>
2、类名的命名模式：
- 不能带中文，纯数字，标签名
- 类名长可以用脊柱命名法
4.3 id 选择器
和html中的id舒心相关联，由于html中的id是唯一的，通过id选择器那么也就只能选中一个元素。
/* # 号开头表示是id选择器*/
# id的值 {
CSS的属性和值
}
<style>
#one {
color: red;
}
.green {
color: green;
}
div {
color: blue;
}
</style>
<!-- 多种选择器进行设置一个元素，最后id选择器优先级最高 -->
<div id="one" class="green">这是一段文字</div>
问题：如果多种选择器对同一个元素进行样式设置会发生什么？？
答：这种属于优先级，经过操作，id的优先级最高，其次是类型选择器，最后是标签选择器。
4.4 通配符选择器
使用 * 的定义，选取所有的标签
* {
/*css 的属性和值*/
}
* 的效果就是报页面上的所有标签元素都选中，不需要页面结构调用，通配符选择器，最常用的用法，就是用来清楚浏览器的默认样式。。
五、复合选择器
5.1 后代选择器
又叫包含选择器. 选择某个父元素中的某个子元素，也能选择孙子，还可以选择id选择器/类选择器。
元素1 元素2 {样式声明}
- 元素 1 和 元素 2 要使用空格分割
- 元素 1 是父级, 元素 2 是子级, 只选元素 2 , 不影响元素 1
示例：
<style>
ol li {
color:red;
}
</style>
<ul>
<li>这是一段文字</li>
<li>这是一段文字</li>
<li>这是一段文字</li>
</ul>
<ol>
<li>这一是一段文字</li>
<li>这一是一段文字</li>
<li>这一是一段文字</li>
</ol>
-
元素2位孙子，还可以选择id选择器/类选择器。
<ul> <li>这是一段文字</li> <li>这是一段文字</li> <li>这是一段文字</li> </ul> <ol class="one"> <li>这一是一段文字</li> <li>这一是一段文字</li> <li> <a href="#">这一是一段文字</a> </li> </ol>
5.2 子选择器
只能选择子标签
元素1>元素2 { 样式声明 }
- 只能选择儿子，不能选择孙子
- 使用大于分割
示例：
<style>
.one > a {
color:red;
}
</style>
<ul>
<li>这是一段文字</li>
<li>这是一段文字</li>
<li>这是一段文字</li>
</ul>
<ol class="one">
<li>这一是一段文字</li>
<li>这一是一段文字</li>
<li>
<a href="#">这一是一段文字</a>
</li>
</ol>
这里并不会生效，class类的子标签是 li 直接跳过儿子是不行的！！
5.3 并集选择器
用于选择多组标签. (集体声明)
元素1, 元素2 { 样式声明 }
-
并集选择器建议竖着写. 每个选择器占一行. (最后一个选择器不能加逗号)
-
中间是通过逗号隔开
-
任何基础选择器都可以使用并集选择器
-
表示同时选中元素 1 和 元素 2
<h2>橙子</h2> <div>苹果</div> <ul> <li>香蕉</li> </ul>
5.4 伪类选择器
通常使用链接，或者按钮
a:link 未访问过的链接
a:visited 访问之后的情况
a:hover 鼠标悬停
a:active 鼠标按下未放
<style>
ab:link {
color: black;
}
ab:visited {
color:green;
}
ab:hover {
color:aquamarine;
}
ab:active {
color:blue;
}
</style>
<ab href="#">这是一个链接</a>
六、字体属性
-
font-family (字体类型)
<div class="one">微软雅黑</div>
1、设置的字体必须是电脑上面有的
-
font-size （字体大小）
<div class="one">字体粗细设置</div>
注意：字体数字没有单位，设置的值是固定选项 100-900 而且是整数，不能设置为750.
-
font-style （字体的倾斜）
<div class="one">字体倾斜设置</div>
七、文本属性
- 设置文本颜色
color属性来设置颜色；
color属性的值，可以使用一些表示颜色的单词来说进行设置，
世界上的颜色一共有多少种？？？用这些单词能否把所有的颜色都罗列出来？
答：颜色在世界上有无数种
那么计算机是怎么表示颜色的尼？
答：计算机是通过RGB的方式来表示颜色的；
三原色，R红，G绿，B蓝（色光三原色）
色深是表示一个颜色，使用几个bit位表示？？
答：典型的实现是使用8个bit为表示
综上所述：RGB三个颜色就是3个字节。
在css中设置颜色，就是通过RGB的方式来设置的，每个分量按照一个字节（8位色深）来设置。
表示方式有3种：
color: red;
color: #ff0000;
color: rgb(255, 0, 0);
1 、直接写单词
2 、采用十六进制方式
3 、RGB方式
-
文本对齐
text-align: [值];
1、left，左对齐
2、center：居中对齐
3、right：右对齐<div class="one">下划线</div> <div class="two">上划线</div> <div class="three">删除线</div> <a href="#" class="four">只是一个链接</a>
- 文本缩进
控制段落的首行缩进
text-indent:[值]；
1、使用px作为单位不合适；
2、先使用em为单位，1 个 em 就是当前元素的文字大小。
3、缩进可以是负数，表示向左缩进（就会导致文字不见）
<style>
.one {
text-indent: 2em;
}
.two {
text-indent: -2em;
}
</style>
<div class="one">文本缩进</div>
<div class="two">反向缩进</div>
- 行高
上下文本行之间的基线距离
行高=文字自身高度 + 行间距
line-height: [值];
<style>
p {
line-height: 50px;
}
</style>
<p>
..................
</p>
八、背景属性
-
背景颜色
background-color: [指定颜色]
<div class="one">红色背景</div> <div class="two">蓝色背景</div>
-
背景图片
background-image: url(图片路径);
<div class="one">帅哥</div>
但是这里面的背景图是会一直平铺将整个页面铺满，不想铺满就设计到下面的背景平铺
-
背景平铺
background-repeat: [平铺方式]
1、on-repeat: 不平铺
2、repeat-x：水平平铺
3、repeat-y：垂直平铺 -
背景位置
background-position: x y;
1、可以写数字，单位px
2、可以写单词（常用）：background-position:center bottom
计算机的位置坐标是左手系的方式，原点在左上角
-
背景尺寸
background-size:
1、可以写数字，单位px
2、可以写单词（常用）：background-size: contain
background-size:cover/这两者都是图片覆盖全部区域/
九、圆角矩形
基本用法：
border-radius: length;
1、length值值得是矩形内切圆半径，数值越小，就越不圆，数值打，就越圆
<style>
div {
width: 200px;
height: 100px;
background-color: red;
border-radius: 50px;
}
</style>
<div></div>
一般来讲四个脚的幅度可以单独设置的，叫做复合写法。
-
生成圆形
想生成圆形，就是把矩形设置成正方形，就是width和height分别设置为200px就是正方形，最后border-radius设置成50%或者100px就行了
div { width: 200px; height: 200px; background-color: red; border-radius: 100px; } </style> <div></div> -
生成圆角矩形
让 border-radius 的值为矩形高度的一半即可
div {
width: 300px;
height: 200px;
background-color: red;
border-radius: 100px;
}
</style>
<div></div>
十、元素的显示模式
块级元素：独占一行
行内元素：不独占一行
这两个都属于元素的显示模式
可以使用display属性来设置元素的显示模式
- display:block 块级元素
- display:inline 行内元素
- disply:none 隐藏元素
div属于块级元素，块级元素默认宽度和父元素一样宽
<style>
.parent {
height: 500px;
width: 500px;
background-color: goldenrod;
}
.child {
height: 200px;
background-color: blue;
}
</style>
<div class="parent">父元素
<div class="child">child1</div>
<div class="child">child2</div>
</div>
div 是块级元素（display:block）：
1、块级元素默认独占一行；
2、块级元素宽度默认和父元素一样宽！！！
- 行内元素
使用display:inline 就能把元素设置成行内元素
1、不独占一行
2、设置的宽度和个高度都失效了，行内元素的尺寸就是包裹里面的文字内容。
-
隐藏元素
dispaly:none
这个是将元素隐藏起来，但是元素在html中的代码还是存在，只是在页面不显示了，
十一、盒模型
每一个 HTML 元素就相当于是一个矩形的 "盒子
这个盒子由这几个部分构成
- 边框
border 属性来进行设置 （他是一个复合属性）
<style>
div {
height: 200px;
width: 200px;
background-color: goldenrod;
border: 10px solid red
}
</style>
<div>text</div>
- 边框会撑大盒子
我们所设置的width和height是不包含边框的部分。有了边框那么整个元素就会被撑大，这种设定是不方便的，进行页面布局的时候是非常复杂的，更希望的是，设置的尺寸能够包含边框。
box-sizeing:border-box;
1、这个属性就是解决上面的问题，是边框不再撑大盒子。
2、默认值是content-box，这个时候就是尺寸不包含边框。
3、一般这个属性设置在*{}通配符中，选取所有标签。
* {
box-sizing: border-box;
}
- 内边框
padding 设置内容和边框之间的距离.
基础写法：
1、padding-top
2、padding-bottom
3、padding-left
4、padding-right
复合写法：
padding: 5px 10px 20px 30px; 表示 上5px, 右10px, 下20px, 左30px (顺时针)
注意：内边框也是会撑大盒子的，设置了box-sizing:border-box就不会撑大盒子了
- 外边距
与内边框的格式写法都是一样的，外边距是控制盒子和盒子之间的距离
基础写法：
1、margin-top
2、margin-bottom
3、margin-left
4、margin-right
复合写法：
margin: 10px 20px 30px 40px;
-
块级元素水平居中
margin: 0 auto
-
去除浏览器默认样式
浏览器会给元素加上默认样式，就比如内外边框，为了保证浏览器上的样式都是统一的的样式显示，往往我们会去除浏览器默认样式.
使用通配符选择器即可完成这件事情- {
marign: 0;
padding: 0;
}
- {
十二、弹性布局
- dispaly:flex;
给父元素设置这个属性，此时父元素里面的元素都要遵守 弹性布局的规则，
行内元素的时候是忽略掉高度和宽度的，是以文字包裹的范围。
1、用dispaly：flex这个属性，里面的子元素就不在按照块级/行内元素的规则排列了。
2、在用flex中的子元素去掉高度，此时这个元素默认和复原素一样高。
没有添加flex属性：
添加了flex属性
添加了flex属性但是没设高度：
代码：
<div>
<span>1</span>
<span>2</span>
<span>3</span>
</div>
<style>
div {
width: 800px;
height: 150px;
background-color: blue;
display: flex;
}
div>span {
background-color: gold;
width: 100px;
/* height: 100px; */
}
</style>
- justify-content (主轴方向）
在flex布局中，justifu-content属性来设置水平方向的排列方式（父元素中设置）。
justify-content: center; /*水平居中*/
justify-content: end; /*父元素的最右边*/
justify-content: space-around; /*水平隔开*/
justify-content: space-between;/*先两边元素贴近边缘, 再平分剩余空间*/
<div>
<span>1</span>
<span>2</span>
<span>3</span>
</div>
<style>
div {
width: 800px;
height: 150px;
background-color: blue;
display: flex;
justify-content: space-around;
/*justify-content: space-between;*/
/* justify-content: center; */
/* justify-content: end; */
}
div>span {
background-color: gold;
width: 100px;
/* height: 100px; */
}
</style>
- alingn-items（侧轴方向）
设置侧轴上的元素排列方式
他的基本用法也是和上面的justify-content差不多。
演示下重置居中：
<div>
<span>1</span>
<span>2</span>
<span>3</span>
</div>
<style>
div {
width: 800px;
height: 150px;
background-color: blue;
display: flex;
justify-content: space-between;
align-items: center;/*是元素水平居中*/
}
div>span {
background-color: gold;
width: 100px;
height: 50px;
}
</style>
剩下的方法也是类似的做法，不载赘述
文章到这里基本上就结束了，css比较杂多，记忆的部分也多，这篇文章基本上吧css的基础都写的差不多了，适合刚开始css小白看的基础，想深入还有很多要学，也只能自己找文章看了，推荐一个css权威文档css参考手册这个文档对你了解css会有恒大的帮助。铁汁们，觉得笔者写的不错的可以点个赞哟???，收藏关注呗，你们支持就是我写博客最大的动力！！！！
622
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
