【前端学习--基础篇】CSS入门详细指南

最新推荐文章于 2024-05-05 15:36:35 发布

海绵泡泡

最新推荐文章于 2024-05-05 15:36:35 发布

阅读量747

点赞数

分类专栏：前端学习--基础篇文章标签： css

本文链接：https://blog.csdn.net/qq_41402809/article/details/115730425

版权

前端学习--基础篇专栏收录该内容

2 篇文章 0 订阅

订阅专栏

入门级css指南，你一定用得到

2.2.2 line-height（font属性）

2.2.3 font-family字体

2.2.4 font-weight 加粗（！）

2.2.5 text-decoration属性

1、CSS简介

cascading style sheet ，层叠式样式表

所有的css样式，一般都要写在style标签中。

style标签写在<head>里面。

<style type="text/css">
h1{
color:red;
}

</style>

h1是选择器

type是类型；

text/css表示纯文本的css。

css对换行不敏感、缩进不敏感

2 属性

● 文字颜色

color:red;

● 背景颜色

background-color:blue;

● 字号

font-size:40px;

px是英语pixel像素的意思。

● 边框

border:1px solid green; 后面三个属性一定要记着

border就是边框的意思，它的值很有意思，是三个部分，用空格隔开。

这三个部分，可以顺序交换。

1px 就是粗细，可以任意调整；

solid就是实线，如果是虚线写dashed；

green就是颜色，可以任意设置。

2.1颜色表示

2.1.1单词表示法

写单词名字即可

2.1.2 rgb()表示法

光学显示器的三原色是红、绿、蓝，依靠他们三个的不同亮度，就能组成不一样的颜色。每种颜色的亮度数值是0~255，一共256个数字。

红色：

background-color: rgb(255,0,0);

绿色：

background-color: rgb(0,255,0);

蓝色：

background-color: rgb(0,0,255);

黑色：

background-color: rgb(0,0,0);

光学显示器什么都关掉了，就是黑色。

白色：

background-color: rgb(255,255,255);

特别的，当三个数字都一样的时候，就是灰色：

background-color: rgb(111,111,111);

2.1.3 十六进制表示法

将RGB表示法的三个数字用十六进制表示

所有形如

#aabbcc;

都可以简化为：

#abc;

比如：

#000000

等价于

#000

表示红色：

red

rgb(255,0,0)

#ff0000

#f00

2.2文字相关属性

2.2.1 font-size

像素为单位

2.2.2 line-height（font属性）

行高

文字所在这一行的高度，称为行高。文字在行里垂直居中。

line-height可以以px为单位，也可以用百分比为单位。

如果用百分比为单位，那么就是当前字号的百分比。也就是说：

font-size:14px;

line-height:150%;

等价于

font-size:14px;

line-height:21px;

由于字号和行高非常重要，所以可以和写在一起称为font属性

font:14px/28px "宋体";

等价于：

font-size:14px;

line-height:28px;

font-family:"宋体";

2.2.3 font-family字体

所以网页中，为了让所有的用户都有一致的体验，只能用宋体、微软雅黑。黑体、楷体有的也用，但是不常见。

有的服务器上面，为了追求css的加载速度，把字体名变为英语。 css中

font-family:”Microsoft Yahei”,”SimSun”;

等价于

font-family: "微软雅黑","宋体";

2.2.4 font-weight 加粗（！）

面试爱考：

bold就是粗体

font-weight:bold;

等价于

font-weight: 700;

不加粗，要写normal这个词

font-weight:normal;

等价于

font-weight:400;

总结：

font-weight:bold; 加粗

font-style:italic; 倾斜

text-decoration:underline; 下划线

2.2.5 text-decoration属性

2.2.6 ibu

font-style:italic; 倾斜

font-weight:bold; 加粗

text-decoration:underline; 下划线

3、选择器

3.1基本选择器

3.1.1基本选择器

body就是页面，如果要设置整个页面的背景颜色，要设置body

标签选择器有点不好用，要选择就都选择了。所以主要的用途就是设置一些标签的默认情况

3.1.2 id选择器

就是对某一个（注意就一个）元素，进行特别的样式设定的时候用。就是给元素一个特别的名字，然后通过这个名字来选择它。

给元素加上id属性，然后在选择器用#开头进行选择。

选择的时候写#：

<style type="text/css">
#pp{
color:red;
}
</style>

首先，任何元素都可以设置id属性，合法的id属性是英语字母开头（大小写敏感，也就是说aa和AA是两个不同的合法id）、可以有数字、下划线、短横。

同一个页面中，id绝对不能相同。哪怕是不同的元素，id也不能相同，我们必须保证，id在页面上是唯一的。

3.1.3类选择器

就是给某一类元素，设置相同的类名，然后通过这个类名来选择。

class叫做类名。

<p class="warning">我是段落</p>
<p class="warning">我是段落</p>

选择的时候,用点：

<style type="text/css">
.warning{
color:red;
}
</style>

同一个标签，可以携带多个类名，用空格隔开。

<p class="warning xian">我是一个段落</p>

这个p标签同时携带了两个类，所以.warning选择器和.xian选择器能同时选择上他们。

3.1.4 原子类（广泛使用，优化代码）

用原子类是最方便的，所谓的原子类，就是一些简单的属性做成一个类，然后元素自行选择：

<style type="text/css">
.hong{
color:red;
}
.da{
font-size: 50px;
}
.xian{
text-decoration: underline;
}
</style>

各取所需：

<p class="hong da">我是段落</p>
<p class="hong xian">我是段落</p>
<p class="da xian">我是段落</p>

3.1.3.2 多用class,少用id

3.2高级选择器

3.2.1后代选择器（空格）

后代选择器用空格表示：

<div class="zhengzhi">
<p>我是一些政治新闻</p>
<p>我是一些政治新闻</p>
<p>我是一些政治新闻</p>
<p>我是一些政治新闻</p>
</div>

选择这些p，可以用后代选择器：

<style type="text/css">
.zhengzhi p{
color:blue;
}
</style>

选择的是后代的元素，不一定是儿子，如果是孙子、曾孙子、重孙子……都行

3.2.2交集选择器连写无空格

一般来说，语法是：

标签名.类名
Eg div.box
div#box

3.2.3并集选择器（逗号，）

<style type="text/css">
p,div{
color:red;
}
</style>

等价于：

p.haha{
color:red;
}
div.xixi{
color:red;
}

3.2.4通配符*

选择所有元素，用*

<style type="text/css">
       * {
           color:red;
       }
    </style>

4、继承性和层叠性

4.1继承性

css规定，有一些属性，给某一个元素设置了，它的后代元素都同样拥有它的这个属性了

哪些属性能够继承呢？

color

text-系列：比如text-decoration:underline;

font-系列：比如font-size:30px;

line-系列

特别的，要知道不能继承的属性：background-color、所有盒模型的属性（width、height、border、padding、margin）都是不继承的！

“层叠式”样式表，cascading的第二层含义，就是继承性。

第一层是多个选择器控制一个文本样式

4.2层叠性

选择器的一个基本权重： id的权重 > 类选择器 > 标签选择器

一个选择器的权重计算：id的数量，class的数量，标签的数量

如果是继承而来的，权重是

我们把HTML标签分为两大类：

● 块级元素（block level）：div、h系列、p、ul、li、dl、dt、dd

● 行内级元素（inline level）：span、a、b、u、i、em、strong

块级元素：

① 能够设置宽度、高度；

② 不能并排；

③ 不设置宽度，那么宽度将默认变为父亲的width

行内级元素：

①不能设置宽度、高度；

②可以并排；

给任何一个元素，设置

display:block;

它将转为块级元素，拥有块级元素的所有性质；

相仿的，给任何一个元素，设置

display:inline;

它将转为行内元素，拥有行内元素的所有性质；

有什么用？

把一个块 → 行内丝毫无用，工作10年都遇不见。

但是行内 → 块 非常有用！

5、浮动

5.1 简介

一共三个方法：

浮动：

float:left;

绝对定位：

position:absolute;

固定定位：

position:fixed;

div在标准流中是一个经典的块级元素，不设置宽度在标准流中是自动撑满父亲的width。但是浮动了，就不自动撑满了，而是自动收缩了，收缩为内部文字的大小了

竖直方向上的margin塌陷现象消失

5.2 、字围

5.3清除浮动

父亲不能被浮动的儿子撑出高

overflow:hidden;有神奇的别的用处，就是能够让父亲认识自己脱标的儿子，能够让父亲被自己脱标的儿子撑出高度。

<div class="box"> →不能被撑出高了，解决办法： overflow:hidden;
<p class="no1"></p> → 脱标了
<p class="no2"></p> → 脱标了
</div>

6 绝对定位

position: absolute;

绝对定位的元素，脱离标准文档流。用top、bottom、left、right来进行定位。参考的是页面的左上角。

6.1 如何确定参考点

如果用top值定位，那么参考点就是页面的左上角或者右上角，而不是浏览器

如果用bottom进行定位，就是浏览器首屏的左下角在页面中的位置。

6.2 祖先盒子当参考点

子绝父相：

<div> → 相对定位
<p></p> → 绝对定位
</div>

此时这个p就是以div的边框内侧为参考点进行定位。

一个盒子可以以某一个祖先盒子作为定位参考点，离自己最近的、已经定位了的祖先盒子。

要记住，祖先盒子不一定只有相对定位才能成为参考点，而是什么定位都行。比如，相对定位、绝对定位、固定定位。

除了“子绝父相”之外，“子绝父绝”也是一个典型的定位模型；“子绝父固”也是一个典型的定位模型。

祖先中离自己最近的、已经定位的元素：

<div class="box1"> → 没有定位
<div class="box2"> → 相对定位
<div class="box3"> → 绝对定位
<div class="box4"> → 没有定位
<p></p>
</div>
</div>
</div>
</div>

所以p以.box3为参考点；.box3以box2为参考点。

绝对定位的元素，无视参考盒子的padding

6.3 绝对定位元素的居中

绝对定位盒子已经不属于标准文档流了，所以不能使用margin:0 auto；来居中了。那么绝对定位的盒子如何居中？

position: absolute;
left:50%;
top: 0;

left:50%;指的是元素的左边线是50%的位置。这点和background-position不一样。

所以要往回拉一半的自己宽度。

<style type="text/css">
div{
width: 600px;
height: 200px;
background-color: yellowgreen;
position: absolute;
left:50%;
top: 0;
margin-left: -300px;
}
</style>

绝对定位在老家不留坑，绝对定位的元素就是飘起来了，真实位置也是飘起来了。

所以在页面中特别常用。

7 固定定位

position:fixed;

固定定位脱标，参考点是浏览器的角。

随着窗口的卷动，固定定位的元素不会在视口中消失。

固定定位的参考点一定是浏览器，我们无法让一个盒子当做fixed定位的参考点。

至此我们已经全部学习了脱标的3种方法：

浮动、绝对定位、固定定位

这三种脱标的方法，只能有一种作用在同一个元素身上。不存在一个元素同时浮动、同时绝对定位的情况。

我们给一个父亲overflow:hidden; 这个时候父亲就能认识浮动儿子的高度了，就能被儿子撑高了。

但是，绝对定位、固定定位的儿子，父亲永远不可能被他们撑高！

7.1 z-index属性

负责设置压盖顺序，谁压盖谁的问题。

先说的默认的压盖顺序：

1）定位了的能够压住没有定位的；

2）如果都定位了，那么HTML顺序后面的能够压住前面的；

<div class="box1">1</div> → 没有定位
<div class="box2">2</div> → 绝对定位
<div class="box3">3</div> → 相对定位

3压住2和1； 2压住1

z-index没有单位，数字大的能够压住数字小的。

z-index: 5;

从父现象：父亲怂了，儿子再牛逼也没用。

<div class="linzhiying"> → z-index:9;
<p class="kimi"></p> → z-index:100000;
</div>
<div class="wangjianlin"> → z-index:10;
<p class="wangsicong"></p> → z-index:无论是多少肯定能压住kimi因为父亲z-index大
</div>

8 兼容问题

最好的判断一个浏览器能力的测试，就是HTML5的支持测试。

www.html5test.com

满分555分，是所有HTML5、CSS3的新特性，支持就得1分，不支持不得分。

8.1 hack

Hack就是针对不同的浏览器去写不同的HTML、CSS样式，从而让各浏览器能达到一致的渲染效果。

Hack分为两大类：HTML hack、CSS hack。

8.1.1 html hack

下面这段html代码只能在IE6、7中运行，IE8不运行。

<!--[if lte IE 8]>
自定HTML内容
<![endif]-->

lte：less than or equal

上面的这个壳子很神奇，IE6、7、8会渲染里面的内容；而IE9、IE10、Chrome等等浏览器都会认为这些代码是注释。

所以，我们可以用这个方法，单独的为IE浏览器写特殊的HTML标签。

感谢微软，浏览器比较烂，但是给我们留了Hack的后门，自知之明。

如果版本小于等于IE8，那么识别，否则当做注释了：

<!--[if lte IE 8]>
<![endif]-->

如果版本小于IE8，那么识别，否则当做注释了：

<!--[if lt IE 8]>

<![endif]-->

如果版本大于IE8，那么识别，否则当做注释了：

<!--[if gt IE 8]>

<![endif]-->

如果版本大于等于IE8

<!--[if gte IE 8]>

<![endif]-->

如果版本是IE6：

<!--[if IE 6]>
<![endif]-->

8.1.2 css hack

CSS HACK又分为两类：值Hack 和选择器Hack

值hack

IE6专用的“hack符”就是短横、下划线。

div{
width: 200px;
height: 200px;
background: red;
_background: blue;
}

那么高级浏览器不识别_background:blue;这行语句的，视为这是unknown property name;

_background:blue;

等价于：

-background:blue;

如果想同时调教IE6、7：

hack符可以是任意一个： ! $ & * ( ) = % + @ , . / ` [ ] # ~ ? : < > | */

比如：

<style type="text/css">
div{
width: 200px;
height: 200px;
background: red;
!background:green;
}
</style>

高级浏览器、IE8、IE9、IE10渲染为红色，而IE6、7渲染为绿色。

如果想调教IE8和9，hack符写在后面，分号前：

background-color: blue\0/;

那么只有IE8、9会认识这行语句。

如果想调教IE 6、7、8、9、10 ，那么hack符写在后面，分号前：

background:red\9;

选择器hack

用的不多

8.2 文字样式兼容

IE6、7、8中，所有有超级链接的图片，都默认有一个蓝色边框：

解决办法：

a img{
border:none;
}

或者干脆：

img{
border:none;
}

9、透明问题

9.1 盒子透明

opacity: 0.40;

opacity就是透明度的意思，能够背下来这个单词。值是0~1；1就是实心，0就是纯透明。

IE6~8不支持。要写IE自己的属性，自己的滤镜的属性：

filter:alpha(opacity=40);

要注意的是，里面的文字也一起有透明了。解决办法就是不要把有opacity属性的盒子里面写文字。把文字单独放出去，用绝对定位给定位到一起：

<div class="box">
<img src="images/1.jpg" alt="" />
<div class="title"></div> → 半透明黑色
<span>文字文字文字文字</span> → 白色文字，给定位到一起。
</div>

9.2 图片透明

jpg/jpeg：

压缩格式，是颜色失真的，为了保存尺寸小，所以有压缩算法，所以是颜色失真的。网页中的照片、新闻图片、banner、焦点图都要用jpg的格式，因为这样保存的尺寸就小。没有图层。不支持透明和半透明。在导出之前，用导出预览调整一下“质量”。

png

不可压缩，颜色不失真，是fireworks这个软件的默认保存格式，可以有图层。

在传到服务器上面的时候，所有的png图片，一定要记住去掉所有图层！去掉的方法很简单，就是“文件导出”。我们说jpg是压缩的，png是不压缩的。但是，同一个图，jpg不一定比png尺寸小，

我们经过测试，发现这样的图片jpg的尺寸更小

转存失败重新上传取消转存失败重新上传取消转存失败重新上传取消正在上传…重新上传取消正在上传…重新上传取消正在上传…重新上传取消正在上传…重新上传取消正在上传…重新上传取消转存失败重新上传取消转存失败重新上传取消

但是这样的简单的图片png的反而更小：

所以，网页上的杂碎图标，都要存为png，尺寸更小！

png支持透明和半透明。

gif

gif不是压缩不压缩的问题，它就支持固定数量的颜色，可以是256种，可以是128种，可以是64种……2种。

所以是严重颜色失真！根本表示不全自然界的所有颜色！

支持动画！

海绵泡泡

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
【前端学习--基础篇】CSS入门详细指南

目录1、CSS简介2 属性2.1颜色表示2.1.1单词表示法2.1.2 rgb()表示法2.1.3 十六进制表示法2.2文字相关属性2.2.1 font-size2.2.2 line-height（font属性）2.2.3 font-family字体2.2.4 font-weight 加粗（！）2.2.5 text-decoration属性2.2.6 ibu3、选择器3.1基本选择器3.1.1基本选择器3.1.2 id选择器3.1...
复制链接

扫一扫