CSS基础

总结：
CSS的核心就是去网上抄代码，找到好看的就给我抄回来（通过页面检查源码和调试），给👴狠狠的抄！！！

前言：
网络组成三要素
HTML + CSS + JavaScript,其中HTML实现网络的基本功能， CSS进行页面美化，JavaScript实现用户交互及动态功能。
HTML：超文本标识语言
cascading Style Sheet：层叠样式表

1.CSS基本信息

1.1 CSS发展史

CSS1.0：简单的美化，如字体颜色等
CSS2.0：DIV(块) + CSS ，HTML与CSS结构分离的思想，网页变得简单，SEO

1.2CSS的优势

使网页代码实现内容和表现分离，HTML和CSS代码文件相分离，利用链接引入CSS。
2.网页结构表现统一，可以实现复用。
3.样式十分丰富。
4.利用 SEO ,容易被搜索引擎收录！

1.3 CSS导入的三种基本方式

内部样式< style > < /style > ：其直接写在HTML文件内，其通常位于head标签之前。
链接式< link rel="" href="" >：，由链接将CSS代码文件导入HTML文件中，实现二者的分离。骨架和渲染同步完成在显现，为现在的主流方式。
导入式@import url("路径xxx"): ：先导入骨架，再渲染，表现为，先是骨干网页，然后duang~的一下就变好看了。

1.4 CSS的基础语法

元素分为块级元素和行内元素，后者可以被包含在前者中。
块级元素：独占一行的元素（h1~h6 p div ul）；行内元素(span a img strong ...)：不独占一行。
其中块元素的代表为div，行内元素代表为span,二者并无实意，仅做标识。
通常来说，CSS遵循就近原则，即新属性覆盖老属性。

2. CSS选择器（两个重点之一）

选择器的作用为：选择页面上的某一个或者某一类元素。

2.1 基本选择器 ##、

1. 标签选择器：格式：tag(标签名){样式}，会选择所有带此标签的block。
2. 类选择器：格式：.class(类名){样式}，其优势是将多个标签归类于同一个class，可以实现便捷复用
3. id选择器：格式：#id名称{样式}，针对id的唯一标识，具有全局唯一性。
三者的优先级排序为：id选择器 > 类选择器 > 标签选择器

2.2 层次选择器

根据网页组件布局的层次，进行不同数量的选择。其中子选择器和相邻兄弟选择器都是选择一个对象，后代与通用同级选择器都是多选。
注意，其层次是依托标签实现的，类与id的激活也在标签内实现：
如将P1设置为active类<p class="active">P1</p>，将无序列表中的P4项标注id<li id="zfy"> <p>p4</p> </li>
基本选择器与层次选择器是并行的概念，通常搭配使用，前者说明选择目标样式的方式，而后者说明其选择的范围。
如：.class + li{ 需要执行的指令xxx } ".class"类选择器定位到目标元素，"+"说明调用相邻兄弟选择器，li为目标标签，{xxx}内为需执行的指令。
示例：现构建如下层级结构：body > p0~p3 > p4~p6,

<body>
<h1>h1</h1>
<p>P0</p>
<p class="active">P1</p>
<p>P2</p>
<p>P3</p>
<u1> <!-- 无序列表标签<u1> 内涵项标签<li> -->
    <li idea="brother">
        <p>p4</p>
    </li>
    <li>
        <p>p5</p>
    </li>
    <li>
        <p>p6</p>
    </li>
</u1>

后代选择器(符号为' '，此处以标签选择对象。)：选中某个元素之后的全部内容

body p{
     background: red;
}

子选择器(符号为'>'，此处以标签选择目标对象)：选择目标元素的后一代元素。

body>p{
     background: #acbda6;
}

相邻同级选择器（符号为'+'，此处以类class选择目标对象）：选择目标元素（不包括自己）向下相邻同辈（同一层级）元素，其最多选择一个元素。

.active + p{
     background: #a13d30;
}

通用同级选择器(符号为'~'，此处以id选择目标对象)：选择目标对象（不包括自己）向下的所有同级元素。

#brother~li{
     background: #02ff00;
}

2.3 结构伪类选择器

以2.2层次代码为例，说明结构伪类选择器。
①定位父类，选中子类中第一个元素：

ul li:first-child{
            background: red;
        }

其中，ul为父类标签，li为子类元素标签，first-child为定位方法。

②定位父类，选中子类中的最后一个元素：

ul li:last-child{
            background: red;
        }

③向上定位父类，按自然排列顺序定位选择目标子类元素
（其必须与开头申明的标签类型一致，如此处必须是p元素方能选中）：

 p:nth-child(1){
            background: red;
        }

根据p向上定位父类标签为body,再选择子类中自然排序的1号元素（从1开始）。
值得注意的是，body的子类中，1号元素是<h1>h1</h1>而并非p标签，因此该选择失效。
代码修改为：p:nth-child(2){xxx}则可顺利选择到p0元素。

④向上定位父类，按种类顺序排列定位选择子类元素：

        p:nth-of-type(1){
            background: pink;
        }

注意，第一个标签p有双重涵义，其一：据此标签定位其父类body；其二：仅仅在此标签的子类中排序。

最后效果如下：

2.4 属性选择器

a.正则表达式与其通配符
通配符用于判定正则式，其数量众多。在此仅列出常用，详见百度。

=：绝对等于符
*=：包含等于符
^=：开头元素等于
$=：结尾元素等于

b. 属性选择器
基本格式为：标签名[ 筛选属性 ]{ 执行内容 }；其中属性筛选常使用正则表达式。
如：a[href^=http]{xxx}意为在a标签中选中所有链接以http为开头的元素。

3.美化页面元素

3.1字体

字体属性元素如下：
font-family:Time NewRomas,黑体，选择字体，中英文以逗号隔开。
font-size: 字体大小
font-weight: 字体粗细

3.2文本样式

text-align:centre/left/right; ：文本对齐方式，为水平方向的。
vertical-align：middle; 垂直方向的布局方式。
text-indent:2em 段落首行缩进2个字母
line-heigh:100px ：（文本）行高300像素
height:300px 块高300px，即标签高度，仅当块高和行高一致时，文本内容才能垂直居中。
text-decoration:underline（下划线）/line-through（中划线）/overline（中划线）等文本装饰项。

.hover{}：鼠标悬停之后显示的操作，属于伪类。eg:a:hover{color: orange;}即鼠标悬停后块变为橘色。

4. 盒子模型

4.1 盒子模型的组成

盒子模型的即将元素划分为不同的块，以盒子的方式进行管理。
盒子模型的组成，由外到内依次是：marging：外边距,border：边框，padding：内边距，具体内容。

1.margin：外边距，①调整块与其它块之间的间距（四个方向）②可以调整块在页面的整体位置。
eg:margin: 0 auto意为外边距为0，布局居中。

2.border：边框如：border: 10px solid red; 边框宽 10px , 实线，红色。

3.padding：内边距，基本雷同外边距。

4.2 圆角边框和阴影

边框参数均是顺时针排列，从10点方向（左上）开始,依次为：左上，右上，右下，左下。

圆角边框：border-radius:50px 20px 0px 0px;
阴影边框：box-shadow：10px 10px 100px yellow
效果：

5. 浮动

5.1 标准文档流

HTML有其固定的排列格式，这就称为标准文档流。
float浮动会让元素脱离该文档流。

5.2 行内块与浮动

行内块与浮动的共同作用是，让元素排列在同一行。
display=inline-block，将目标元素转换为行内块，即保留块特性，但存在于同一行（其方向不可控）。
float:right/left 浮动的盒子可以向左浮动，也可以向右浮动，直到他的外边缘碰到包含框或者另一个浮动盒子为止。
clear属性：clear="right/left/both/none":见名知意，即某方向不能出现浮动元素。

5.3 父级边框坍塌问题

父级元素边框坍塌是指，子元素的图片并不在父元素的边框内（本应在的）。
父级元素是指，浮动对象共有的标签元素。
代码示意如下：

<div id="father">
    <div class="layer01"><img src="Saber_Alter.jpg" alt=""/> </div>
    <div class="layer02"><img src="Saber_Alter.jpg" alt=""/> </div>
    <div class="layer03"><img src="Saber_Alter.jpg" alt=""/> </div>
    <div class="layer04">
        浮动盒子可以向左右浮动，直到它的外边缘碰到边界或者其他元素为止。
    </div>
    <div class="clear"></div>

</div>

增加父级元素高度
即将边框设置的很高。

#father{
    border: 1px #c81623 solid;
    height: 800px;
}

增加一个空标签（div），清除浮动

<div class="clear"></div> //此行加在原HTML代码下
.clear{
    clear:both;
    margin: 0;
    padding: 0;
}

添加滑条

当文本超出设定的block尺寸，使用属性overflow:hidden/scoller 即隐藏多余部分和增加滚动条。
很丑，尽量避免使用，除非有滚动条的应用条件。

增加伪类（最好的方法）
这是市面上最流行的方法，可以避免空div的产生，且不用改动源码，仅添加新码即可。

#father:after{
    content: ''; //内容为空
    display: block; //转为block块
    clear: both; //清除浮动
}

6.元素定位

6.1 相对定位

即相对于自己原来的位置进行偏移，但仍然在标准文档流中（不同于float的脱离）

position: relative;
top: 10px;
bottom: 20px;
left: 20px;
right: 10px;

position引出相对定位，后面的属性则表明四个方位的偏移参数。
坐标轴和主观认为不一，多实验。(其y轴指向南方，即从元素自身出发，面朝南创立y轴。)(未确认）

6.2 绝对定位

以xxx为基准进行绝对定位。代码为position: absolute

没有父级元素定位的前提下，相对于浏览器定位。其移动可能脱离标准文档流。
假设父级元素存在定位，其相较于父级元素进行偏移，其移动不会脱离父级元素。

6.3 固定定位 fixed

相对于浏览器界面，锚死位置。代码为：position: fixed
随着浏览器界面移动，屏幕中固定定位模块位置不动。

6.4 z-index

使用z-index：xx; 属性指定元素图层，高图层覆盖低图层。
使用opacity：xx; 属性指定图层的透明度。

X.基于vue-element的前端开发

商业级的前端开发基础。

posted @ 2022-02-24 15:58 青梧成林2022 阅读(116) 评论(0) 收藏举报

刷新页面返回顶部

青梧成林2022