【Frontend blog-Ryan】02. CSS基础部分A

最新推荐文章于 2024-10-01 23:20:42 发布

RyanWu0430

最新推荐文章于 2024-10-01 23:20:42 发布

阅读量78

点赞数

文章标签： css

本文链接：https://blog.csdn.net/szwh1998/article/details/119740257

版权

CSS的三种样式

1. 内部样式：在head元素中创建一个style标签，在style标签里面可以直接书写CSS代码，适合做demo或者练习的时候使用。

2. 外部样式：a. 在head元素中，创建link标签，链接到外部样式表

b. 在style标签里，@import url来导入样式表

适合长页面开发和整站开发

<!-- 方式一：用link链接 -->
<link rel="stylesheet" type="text/css" href="demo.css"/>
<!-- 方式二：用import导入 -->
<style>
	@import url("demo.css");
</style>

Link和import的区别：

link是html标签，import是css内部提供的方式
加载顺序上，页面被加载的时候，link引入的css会同时加载，但是import引入的文件，会等页面加载完毕之后再加载，当网速比较慢的时候，import容易出现闪烁的效果，影响用户体验。
兼容性上的区别：import是css2.1提出的，所以老的浏览器不支持，只有IE5已上才能识别，而link标签无此问题
使用dom：当使用Javascript控制dom去改变样式的时候，只能用link标签，因为import不是dom可以控制的。

3. 行内样式，嵌入式样式，内联样式：在标签内书写style样式。不推荐。会造成比较乱的页面结构。

同一个标签的三种样式表的解析：

行内样式优先级最高
外部和内部样式，采用就近原则，哪个样式离标签近就是哪个

CSS选择器

基本选择器：

标签选择器（元素选择器）

直接以标签名开头，例如修改所有p（段落）的样式的格式为

p{
    font-size: 30px;
    color: orange;
}

class选择器（类选择器）

以.classname开头，选择所有带有该class标签的元素

.text1{
    font-size: 10px;
    color: white;
}

ID选择器

以#IDname开头，选择一个带有该ID标签的元素

#Navi{
    background: red;
}

通配符

以*开头，选择所有元素，通常用来去除初始的margin和padding

*{
    margin: 0;
    padding: 0;
}

群组选择器

当几个元素样式一样时，可以共同调用一个声明，元素之间用逗号分隔，常用于优化，减少代码量

p, .text1, #Navi {
    font-size: 12pt;
    font-color: pink;
}

属性选择器

用[attribute]把属性括起来，选择所有带有该属性的元素, 如图为选择所有带有title属性的元素

[title]{
    color: lime;
}

层级选择器：

其他选择器包括层级选择器，伪类选择器和伪元素选择器等等。层级选择器包括子代选择器，后代选择器，相邻兄弟选择器和通用选择器。

子代选择器
后代选择器
相邻兄弟选择器
通用选择器

.wrap > p{
    color: pink;
}
/*子代选择器，只能选择父元素的后一代*/
.wrap p{
    font-size: 20px;
    color: yellow;
}
/*后代选择器，能选择父元素的任意后代*/
.wrap + p{
    color: pink;
}
/*相邻兄弟选择器，能选择同级的下一个元素*/
.wrap ~ p{
    color: darkcyan;
}
/*通用选择器，能选择同级的在之后的所有元素*/

伪类选择器：

常见的伪类选择器

a:link 超链接未点击的样式

a:visited 超链接点击之后的样式

a:hover 鼠标悬停在元素上显示的样式

a:active 鼠标点击元素时显示的样式

CSS选择器权重

权重大的元素样式将会覆盖掉权重低的样式，计算方法具体如下图所示，摘自HTML中文网。

内联样式：1000
id选择器：100
class选择器（类选择器），伪类选择器，属性选择器：10
元素选择器：1

CSS浮动

页面布局使用的div盒子经常都是竖着排列，需要横向排列的时候，会用到浮动float
浮动有三个属性：float:none 默认不浮动；float:left 向左浮动；float:right 向右浮动
当一个元素不在文档流中占据空间，而是漂浮在文档流的上方的时候，这个现象叫做脱离文档流。
浮动会脱离网页文档，与其他不浮动的元素发生重叠；但是不会与文字发生重叠，文字会环绕浮动元素显示
给所有的容器添加float：left之后，所有浮动元素从左往右排列

CSS盒子模型

所有的HTML元素可以看作是一个盒子，它包括：边距，边框，填充，和实际内容。

margin的使用：

.box{				
    margin: 20px;
    /*表示四个方向都是20像素*/
    margin: 20px 60px;
    /*20表示上下间距，60表示左右间距*/
    margin: 20px 60px 100px;
    /*20表示上间距，60表示左右间距，100表示下间距*/
    margin: 20px 60px 100px 200px;
    /*上20 右60 下100 左200*/
}

特殊用法：