CSS基础

2022/8/6

前端

CSS简介

大名：Cascading(层叠) Style(样式) Sheets(列表)

作用：结构与样式分离的方式,便于后期维护与改版；可以用多套样式,使网页有任意样式切换的效果；使页面载入得更快、降低服务器的成本

CSS语法	CSS语法。注解、与行标签对比、选择器分类、样式表引用方式、为什么样式表成为“层叠”
基础样式	字体样式、文本样式、背景样式、链接样式
列表样式	有序列表、无序列表、列表项设置为图片
伪类	各种伪类的作用、用法、使用场合

<head>
<style type = "text/css">
    p{
        background-color: red;
        font-size: 40px;
    }
</style>
</head>

<body>
    <p>潘春尧大帅逼<p>
</body>

选择器

作用：用来选择(找到)需要添加样式的位置

常用选择器：标签选择器、(归)类选择器(class选择器)

<head>
<style type = "text/css"> 或者 直接<style></style>
     p{
        background-color: red;
        font-size: 40px;
    }
    .p1{
    font-family: 隶书;
    }
</head>

<body>
    <p>我是标签选择器</p>
    <p class="p1">我是类选择器</p>
</body>

背景样式

属性	属性值	作用
background-color	颜色值	颜色作为背景颜色
background-image	图片位置	图片作为背景图片
background-repeat	repeat、repeat-x、repeat-y、no-repeat	背景图片的重复方向
background-attachment	scroll、fixed(跟着走)	背景是否随滚动条滚动
background-position	见详细表格	背景图像的起始位置
background	综合：背景样式的值是重合属性值组合

外部样式

外部样式表就是新建一个文档，里面全写css，然后再通过link插入到html代码中

作用：使网页的表示层与结构层彻底分离

实例：将背景设置，修改为外部样式表

link：用于定义文档与外部资源的关系
rel：(relationship) 样式的类型
type：所加载的文件类型
href：联系的文件

<link rel = "stylesheet" type="text/css" href="index.css">

小贴士：除了link进行外部样式表的链接，还有其他的方法

文本样式

对齐方式、文本修饰、文本转换、文本缩进…

作用：美化、修饰页面的文字部分相关内容

示例：.lineHeight{ line-height: 60px }

垂直居中：行高和高度一样
height: 45px;
line-height: 45px

小贴士：更重要的是要了解样式实现的效果

属性	属性值	作用
color	表示颜色的内容	设置文本颜色
direction	\|tr、rt\|	文本的方向 / 书写方向
letter-spacing	npx (n可以是负数)	字符间距
line-height	npx	行高
text-align	left、right、center、justify(两端对齐)	文本对齐方式

逆序数字(2em 两个字符距离)
<p class="p1">1 2 3 4 5 6</p>
-------------------------
.p1{
    direction: rtl;
    }

属性	属性值	作用
text-decoration	none、underline、overline、line-through	文本的修饰：下划线等
text-shadow	h-shadow、v-shadow、blur、color	文本设置阴影
text-transform	none、capitalize、uppercase、lowercase	改变字母大小写
text-indent	npx、nem	首行缩进

字体样式

font—系列：font-style、font-family

作用：定义文本的字体系列、大小、加粗、风格(斜体) 和变形(小型大写字母)

.lineHeight{
    line-height: 30px;
    font-size: 12px;
    font-style: italic;
}

属性	属性值	作用
font-family	隶书、仿宋、楷体等字体	设置字体
font-style	normal、italic、oblique	规定斜体文本
font-weight	normal、bold、100-900	文本的粗细
font-size	npx	字体大小

列表样式

属性	属性值	作用
list-style-type	none、disc、circle、square、decimal…	设置列表项目的外观
list-style-position	inside、outside	列表符号的位置
list-style-image	url、none	把图像设置为列表项目的标记
list-style	同前面三个	简写属性，涵盖以上三个列表样式属性

伪类(状态伪类 + 结构性伪类)[选择整体]

通常情况，超级链接上设置的样式，称为伪类

作用：设置超级链接的4种状态

a:link{
    font-weight: bold;
    text-decoration: none;
    color: red;
}

小贴士：1、伪类是用在超链接上的效果比较多，但超链接不是伪类。 2、伪类是选择器

伪类选择器的几种状态(冒号以后的是伪类)

a代表选中了所有的超级链接 : link代表了未被访问的情况下

属性	作用
a : link	未访问的链接
a : visited	已访问的链接
a : hover	鼠标移动到链接上(浮动、悬停)
a : active	向被激活的元素添加样式
：focus	选择拥有键盘输入焦点的元素

<a href="#">伪类</a>
----------------------------------
a:link{ //未访问的链接
    color:red; 超级链接字段区默认红色
}
a:visited{
    color: orange;
}
a:hover{
    color: yellow;
    font-size: 30px;
}
a:active{
    color: blue;
}
-----------------------------------
注意：实验顺序不能乱！！！

结构性伪类

属性	作用
:first-child	选择元素的第一个子元素
:last-child	选择某个元素的最后一个子元素
:nth-child()	选择某个元素的一个或多个特定的子元素
:nth-last-child()	选择某个元素的一个或多个特定的子元素，从这个元素的最后一个子元素开始算
:first-of-type	选择一个上级元素下的第一个同类子元素

td:nth-child(2){
    background-color: red;
//将表格内的第二列变成红色
}

伪元素选择器[选择部分]

属性	作用
::selection	选择指定元素中被用户选中的内容
::before	可以在内容之前插入新内容
::after	可以在内容之后插入新内容
::first-line	选择指定选择器的首行
::first-letter	选择文本的第一个字符

<p class="p1">1 2 3 4 5 6</p>
<p class="p1">woainibuweirenhaideyongqi</p>
----------------------------
p::before{
    content: "$shuangyu$";
}
p::after{
    content: "%PPP%";
    color: greenyellow;
}
*::selection{ //所有！拖动的鼠标划痕
    background-color: red;
}

伪类/伪元素选择器小结

不论做什么样式设计，除了语法，也要了解效果
伪类和伪元素的概念要分清

CSS其他选择器

选择器	作用
id，*	选择指定元素中被用户选中的内容
逗号选择器	联合选择器
空格选择器	子孙(后代)选择器
>选择器	子选择器(不是子孙后代)
+选择器	相邻兄弟选择器
[]	属性选择器

class允许重复，id不允许重复

*id，**

[id选择器一定要以#开头]

<p class = "p1" id = "name1"> PCY </p>   【红色】
<p class = "p1" id = "name2"> PCY </p>     【蓝色】
---------------------------------------
#name1{
    color: red;
}
#name2{
    color: blue;
}
*{ //对所有的标签进行变化
    font-size: 60px;
}

逗号选择器

[逗号两边只要是选择器就可]

<p class = "p1" id = "name1"> PCY </p>   【红字黄底】
<p class = "p1" id = "name2"> PCY </p>     【红字黄底】
--------------------------------------
#name1,#name2{
    color: red;
    background-color: yellow;
}

空格选择器

<div id="div1">
<p>潘春尧大帅比</p>    
</div>
--------------------------------------
#div1 p{ //在div1里的p
    color: red;
}
#div1 > p{ //直接属于div1的p
    color: red;
}

+ 选择器

<div id="div1">
<p>潘春尧大帅比</p>    
</div>
<p>我作用于"+选择器"</p>
--------------------------------------
#div1+p{ //在div在同一级的p标签
    color: red;
}

属性选择器

<p class="p1" id="name1">潘春尧</p>
--------------------------------------
p[class="p1"]{
    color: red;
}

选择器特权

	选择器
1	!important
2	行内样式
3	ID选择器
4	类选择器
5	标签
6	通配符
7	浏览器默认属性

.div{!important} > #div{} > .div{类选择器} > div{标签选择器} (结果显示黄色)

链接css样式      <link rel="stylesheet" type="text/css" href="a.css" />
div{
    width: 200px;
    height: 200px;
    background-color: red;
}
.div1{
    background-color: yellow;
}
.div1{
    background-color: orange!important;
}
#div2{
    background-color: blue;
}

<div class="d1" id="d2">
        <div class="div1" id="div2"></div>
</div>
-------------------------------------------
.d1 .div1{
    background-color: yellow;
}

CSS浮动

课程目的：学习边框、轮廓灯快级元素设置，盒子模型，标准流、文档流、脱标流等技术术语、浮动的设置、浮动的特点、利用浮动技术进行特效制作

DIV设置大小、位置、背景

div{
    background-color: yellow;
    width: 100px;
    height: 100px;
    position: absolute; [↓ 定义参照物 ↓] (绝对定位：页面左上角0.0)
    top: 200px;
    left: 200px;
}

Div溢出处理效果

超齿div宽度高度的文字或图片进行隐藏处理
- overflow: hidden
超出div宽度高度的文字或图片增加滚动条
- overflow: scroll

属性	作用
visible	默认值。内容不会被修剪，会呈现在元素框之外
hidden	超出的部分被隐藏
scroll	不论是否需要，都显示滚动条
auto	按需显示滚动条以便查看其余的内容

CSS轮廓：outline

作用：绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用

示例：outline：dashed； /虚线轮廓/

小贴士：dotted(点状轮廓) solid(实线) double(双线)等

CSS边框：

border-left、border-right、border-top、border-bottom

border-radius: 20px / 30px 处理对象的角度(水平 / 垂直)

作用：设置div边框的边线宽度、颜色、虚线、实线等样式css属性

示例：border-bottom：solid; /设置下边框为实线/

小贴士：none(无边框) double(双线边框)

只有下边框的文本框
示例：    姓名：___________
========== 综合 ==========
<div id="div2">
<label>姓名：</label><input type="text" />
</div>
-------------------------
#div2{
    top: 150px;
    left: 350px;
    position: absolute;
/*     border-bottom: solid; */
}

input{
    border: none;
    outline: none;
    border-bottom: solid;
}

盒子模型：

width、height、border、margin、padding

作用：在进行页面布局时，盒子模型非常重要

示例：

margin：10px 10px 10px 10px；(**对象与对象**之间的边距) [上右下左(顺时针)]
padding：10px 10px 10px 10px；(文字和边框的距离)

box-sizing padding的距离是由哪里产生的？

content-box：在宽度和高度之外绘制元素的内边距和边框
border-box：已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度

居中：1、文字居中 2、对象居中

文字居中：让自己容器中元素居中，常作用于文本或图片等内联元素
对象居中：让容器中自己居中，长作用于块元素，且需要配合宽度使用

    box-sizing: border-box;
    text-align: center;
    line-height: 200px;
    margin: 0px auto;(auto上方必须要有width 不然无法相对自动居中 )

浮动

行级元素：行内元素和其他行内元素都会在一条水平线上排列，都是在同一行的

a标签、label、img、span等

块级元素：div、h标签、li、table等

定位机制：

(标准)文档流、脱标流(float、position：absolute)

文档流特点：空白折叠现象、高矮不齐，底边对齐、自动换行、一行写满，换行写

属性	作用
left	元素向左浮动
right	元素向右浮动
none	默认值、元素不浮动

脱标流[float、position：absolute]设置后就脱离了文档流，位置已经起飞，后面的内容会顶上去显示(如果位置未改变，会有覆盖的效果)

<body>
    <div id="div1">1</div>
    <div id="div2">2</div>
    <div id="div3">3</div>
</body>
------------------------------
div{
    width: 200px;
    height: 200px;
    font-size: 50px;
}

#div1{
    background-color: blue;
    float: right;
}
#div2{
    background-color: red;
    width: 300px;
    float: left;
}
#div3{
    background-color: greenyellow;
    width: 200px;
    float: left;
}

float初衷？包裹？崩溃

如果两个div嵌套，子div没有设定宽度的时候，此时的宽度为父div的宽度[跨级元素特性]

#div{
    background-color: yellow;
    height: 450px;
}
#div2{
    background-color: red;
    height: 230px
}
此时为黄色的盒子高度为450px

崩溃破坏：float

<body>
    <div id="div1">1
        <div id="div2"></div>
        <div id="div3"></div>
    </div>
</body>
------------------------------
#div1{
    border: 1px solid black;
    background-color: red;
}
#div2{
    background-color: yellow;
    height: 230px;
    width: 450px;
}
#div3{
    background-color: blue;
    height: 160px;
    width: 550px;
    float: left;
    [脱离了父一级的文档流 已经脱离了div1的管辖]
    [因此红色盒子不再继续包裹着蓝色盒子]
}

包裹性

当产生了浮动，div内的宽度自动适应于里面的内容

<body>
    <div id="div1">
      <img src="..."/>
    </div>
</body>
-----------------------
#div1{
    background-color: red;
    float:left;
}
img{
    vertical-align: bottom;
}

浮动清除

为了父元素不会出现“高度崩塌”；如果强制规定外层容器的尺寸，就显得不灵活，高度不能自动适应；从某个元素开始，不再需要浮动的效果。

clear: both/left/right; //清除该元素之前的浮动  
#div2{
    background-color: yellow;
    float: left;
    width: 200px;
    height: 200px;
}
#div3{
    background-color: blue;
    float: right;
    width: 220px;
    height: 220px;
}
#div4{
    background-color: black;
    width: 240px;
    height: 240px;
    clear: right;
}
div4的黑色盒子清除了蓝色盒子右侧的浮动
所以使蓝色盒子进入文档流，之后盒子就与蓝色盒子底线对齐
=============================================
也可以专门加一个div清除的id 
<div id="div1">
        <div id="div2"></div>
        <div id="div3"></div>
        <div id="clearDiv"></div>
        <div id="div4"></div>
    </div>
---------------------------------------------
#clearDiv{
    clear: both;
}
=============================================
★★  清除浮动的主流  ★★
#clearDiv::after{ //在clearDiv结束的后面加上内容
    content: ""; //要有对象 可以为空(不显示内容)
    visibility: hidden; //以防显示(用来隐藏)
    height: 0px;
    //display none的用法：
    //设置了display: none属性值，则就变成了如下图所示的效果：需要隐藏的区域就被隐藏了
    display: block; //将36、37行转换为块级元素
    clear: both;
}
#clearDiv{ //使页面重新加载、重新计算渲染
    zoom：1; //解决IE浏览器下的各种bug
}

相对定位

定位(position)

相对和绝对取决于是否破坏文档流

relative 相对(相对自己以前的位置进行的偏移)

(配合其他的子元素当成父元素来操作)(破坏文档流)(以自己所在的位置进行参照)

相对定位的偏移参考元素是元素本身，不会使元素脱离文档流。元素的初始位置占据的空间会被保留

主要代码—> position：relative

示例：

<div class="main">
    <div class="div1"></div>
        在我们这样的国家，社会主义建设具有...
</div>
--------------------------------------------
.main{
    width: 600px;
    height: 600px;
    background-color: aqua;
}
.div1{
    width: 100px;
    height: 100px;
    background-color: red;
    position: relative;
    top: 20px;
    left: 30px;
}

absolute 绝对(不破坏文档流)

绝对定位相对于已定位的最近的祖先元素，如果没有已定位的最近的祖先元素，那么它的位置就相当于最初的包含块(比如：body)

主要代码—> position：absolute

示例：

总结：

相对定位通常为父一级定位

绝对定位通常为子一级定位

☆ 草原三剑客 ☆
position：absolute / relative
top/bottom: 20px;
left/right: 20px;

☆ 组合版本 ☆
position: relative;
float: right;

z-index：决定谁在前面，谁在后面（数值越大越在前面）(一般用十位数、整倍数)

static 无定位
fixed 固定

固定定位：相对于浏览器窗口进行定位(位置随着移动保持不变)

主要代码—> position：fiexd

.div1{
    width: 5%; //相对于body宽度的5%
    height: 100px;
    position: fixed;
}

LOADING...