前端学习——Css-基础

最新推荐文章于 2024-05-06 10:59:29 发布

至尊皇堡

最新推荐文章于 2024-05-06 10:59:29 发布

阅读量554

点赞数

分类专栏：前端文章标签：前端 css javascript

本文链接：https://blog.csdn.net/Bala_lala/article/details/122329322

版权

前端专栏收录该内容

4 篇文章 0 订阅

订阅专栏

前端学习——Css-基础

使用渡一的前端入门课程进行学习，下面将学习笔记记录于此。希望自己的前端学习之路一帆风顺。
开发平台：sublime。
学习视频：渡一前端入门课。
参照内容：菜鸟教程。

文章目录

前端学习——Css-基础
一、浏览器
- 1.1 主流浏览器及其内核
二、Css选择器
三、Css属性

一、浏览器

1.1 主流浏览器及其内核

1.1.1 主流浏览器

目前世界上最为主流浏览器有五大款，分别是IE、Firefox、Google Chrome、Safari、Opera。评价一个浏览器是否主流要从他的市场份额及内核出发。

1.1.2 内核（shell）概念

浏览器内核是浏览器的核心，也称 “渲染引擎” ，用来解释网页语法并渲染到网页上。浏览器内核决定了浏览器该如何显示网页内容以及页面的格式信息。不同的浏览器内核对网页的语法解释也不同，因此网页开发者需要在不同内核的浏览器中测试网页的渲染效果。

1.1.3 浏览器所使用内核

四大内核：
Trident内核，也称IE内核。Webkit内核。Gecko内核。Presto内核。
各浏览器所用内核：
　　1、IE浏览器内核：Trident内核，也是俗称的IE内核；
　　2、Chrome浏览器内核：统称为Chromium内核或Chrome内核，以前是Webkit内核，现在是Blink内核；
　　3、Firefox浏览器内核：Gecko内核，俗称Firefox内核；
　　4、Safari浏览器内核：Webkit内核；
　　5、Opera浏览器内核：最初是自己的Presto内核，后来是Webkit，现在是Blink内核

二、Css选择器

2.1 css简介

CSS-cascading style sheet -层叠样式表。 在三件套中，css主要负责样式的功能，在html的基础上进行样式的修改，使界面更美观。
CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明。选择器通常是您需要改变样式的 **HTML 元素。**每条声明由一个属性和一个值组成。属性（property）是您希望设置的样式属性（style attribute）。每个属性有一个值。属性和值被冒号分开。

2.2 css如何引入

2.2.1 行间样式（内联样式）

直接在行内使用style。

<div style ="width:100px;height:100px;background-color:red;"></div>

2.2.2 页面级css

在head中使用 <style> </style>来实现。

<html>
	<head>
		<meta charset="utf-8">
				<style>
					div{
						width:100px;height:100px;background-color:red;
					}
				</style>
	</head>
	<body>
		<div></div>
	</body>
</html>

2.2.3 外部css文件

通过在外部写css文件的方式，实现css的功能。是现在常用的方法，通常html、js、css会分在不同的文件中。
在head中使用link来链接css文件。
html：

<html>
	<head>
		<meta charset="utf-8">
		<link rel="stylesheet" href="css引入.css">

	</head>
	<body>
		<div></div>
	</body>
</html>

css：

div{
	width:100px;height:100px;background-color:red;
	}

2.2.4 多重样式及优先级

在多重样式作用时，如果某些属性在不同的样式表中被同样的选择器定义，那么属性值将从更具体的样式表中被继承过来。
样式表允许以多种方式规定样式信息。样式可以规定在单个的 HTML 元素中，在 HTML 页的头元素中，或在一个外部的 CSS 文件中。甚至可以在同一个 HTML 文档内部引用多个外部样式表。
一般情况下，优先级如下：
（内联样式）Inline style > （内部样式）Internal style sheet >（外部样式）External style sheet > 浏览器默认样式
注意：如果外部样式放在内部样式的后面，则外部样式将覆盖内部样式。

2.3 css选择器

2.3.1 id选择器

id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。HTML元素以id属性来设置id选择器,CSS 中 id 选择器以 “#” 来定义。

<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<style>
#para1
{
	text-align:center;
	color:red;
} 
</style>
</head>

<body>
<p id="para1">Hello World!</p>
<p>这个段落不受该样式的影响。</p>
</body>
</html>

运行结果：在这里插入图片描述

2.3.2 class选择器

class 选择器用于描述一组元素的样式，class 选择器有别于id选择器，class可以在多个元素中使用，而id选择器必须是一对一的。
class 选择器在HTML中以class属性表示, 在 CSS 中，类选择器以一个点"."号显示：
尝试以下代码：

<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<style>
.center
{
	text-align:center;
}
</style>
</head>

<body>
<h1 class="center">标题居中</h1>
<p class="center">段落居中。</p> 
</body>
</html>

效果为：
在这里插入图片描述

2.3.3 标签选择器

直接对标签进行样式改变。但会针对所有的标签。

2.3.4 通配符选择器

使用 * 表示对所有的、任意的标签进行修改。

2.3.5 选择器权重比较

在这里插入图片描述
解释：

内联样式表的权值最高 1000；
ID 选择器的权值为 100
Class 类、属性类、伪类选择器的权值为 10
HTML 标签、伪元素选择器的权值为 1
通配符的权重为0
这里的1000不是一千，而是256进制的数字。
CSS 优先级法则：
A 选择器都有一个权值，权值越大越优先；
B 当权值相等时，后出现的样式表设置要优于先出现的样式表设置；
C 创作者的规则高于浏览者：即网页编写者设置的CSS 样式的优先权高于浏览器所设置的样式；
D 继承的CSS 样式不如后来指定的CSS 样式；
E 在同一组属性设置中标有“!important”规则的优先级最大

2.3.6 !important

!important 规则例外
当 !important 规则被应用在一个样式声明中时,该样式声明会覆盖CSS中任何其他的声明, 无论它处在声明列表中的哪里. 尽管如此, !important规则还是与优先级毫无关系.使用 !important 不是一个好习惯，因为它改变了你样式表本来的级联规则，从而使其难以调试。
这是一张非常有意思的权重比较图片。
在这里插入图片描述

2.3.7 父子/派生选择器

可以通过父标签+空格+子标签的形式定位到某一个标签处。不一定必须为标签，类名也可以。也不一定必须为父子，爷子也可以。
尝试下列代码：

<html>
	<head>
		<meta charset="utf-8">
		<style type="text/css">
			div strong em{
				background-color: #FF0000;
			}
		</style>

	</head>
	<body>
		<div>
			<strong>
				<em>234</em>
			</strong>
		</div>
		<em>123</em>
	</body>
</html>

2.3.8 直接子元素选择器

可以通过父标签+>+子标签的形式定位到某一个标签处。

2.3.9 并列选择器

可以通过 第一个标签+.+第二个标签的形式定位到某一个标签处。

2.3.10 分组选择器

可以通过 第一个标签，第二个标签，第三个标签 的形式将多个标签共用一组属性。

三、Css属性

3.1 css字体属性

css的字体属性有下：
在这里插入图片描述

3.1.1 css字体大小

使用<font-size>属性设置文本的大小。

能否管理文字的大小，在网页设计中是非常重要的。但是，你不能通过调整字体大小使段落看上去像标题，或者使标题看上去像段落。

3.1.2 css字体加粗

使用<font-weight>属性设置文本的加粗。
尝试下列代码：

<html>
	<head>
		<meta charset="utf-8"> 
		<title>菜鸟教程(runoob.com)</title>
		<style>
			p.normal {font-weight:normal;}
			p.light {font-weight:lighter;}
			p.thick {font-weight:bold;}
			p.thicker {font-weight:900;}
		</style>
	</head>

	<body>
		<p class="normal">This is a paragraph.</p>
		<p class="light">This is a paragraph.</p>
		<p class="thick">This is a paragraph.</p>
		<p class="thicker">This is a paragraph.</p>
	</body>

</html>

3.1.3 css字体样式

使用 <font-style>来设置字体的样式，主要使用斜体。
尝试以下代码：

<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title>
<style>
p.normal {font-style:normal;}
p.italic {font-style:italic;}
p.oblique {font-style:oblique;}
</style>
</head>

<body>
<p class="normal">这是一个段落,正常。</p>
<p class="italic">这是一个段落,斜体。</p>
<p class="oblique">这是一个段落,斜体。</p>
</body>

</html>

3.1.4 css字体

使用 <font-family>来设置字体，主要使用arial（乔布斯开发的）。

3.2 css文本属性

css的文本属性主要有：
在这里插入图片描述

3.2.1 文本颜色

使用 <color>来设置文本颜色，主要形式有1.英文单词，2.颜色代码，3.颜色函数。
计算机使用red、green、blue的比例来展示颜色。在切图时可以使用取色器来取颜色。
尝试下列代码：

<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<style>
body {color:red;}
h1 {color:#00ff00;}
p.ex {color:rgb(0,0,255);}
</style>
</head>

<body>
<h1>这是标题 1</h1>
<p>这是一个普通的段落。请注意,本文是红色的。页面中定义默认的文本颜色选择器。</p>
<p class="ex">这是一个类为"ex"的段落。这个文本是蓝色的。</p>
</body>
</html>

3.2.2 文本对齐

文本排列属性是用来设置文本的水平对齐方式。
文本可居中或对齐到左或右,两端对齐.
当text-align设置为"justify"，每一行被展开为宽度相等，左，右外边距是对齐（如杂志和报纸）。

h1 {text-align:center;}
p.date {text-align:right;}
p.main {text-align:justify;}

3.2.3 文本行高

类似word中的行间距，在前端中文本也被放在行高中。
使用<line-height>来调整行高。

3.2.4 单行文本垂直水平居中

在前端中，经常会做文本垂直和水平都居中的效果。使用<text-align:justify>可以做出水平居中的效果。而垂直居中，需要使line-height等于height。
尝试下列代码：

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			
			div{
				border:1px solid black;
				text-align:center;
				height:200px;
				line-height: 200px;
			}
		</style>
		
	</head>
	<body>
		<div>
			新浪网新闻。
		</div>
	</body>
</html>

3.2.5 文本缩进及常用单位

使用<text-indent>来实现文本缩进，单位为em。一个em就是一个字符。
下面对css单位进行总结：
单位主要分为绝对单位和相对单位。
绝对单位指绝对的，不随计算机、操作系统改变的。

像素(px)： px单位的名称为像素，它是一个固定大小的单元，像素的计算是针对（电脑/手机）屏幕的，一个像素（1px）就是（电脑/手机）屏幕上的一个点，即屏幕分辨率的最小分割。由于它是固定大小的单位，单独用它来设计的网页，如果适应大屏幕（电脑），在小屏幕（手机）上就会很不友好，做不到自适应的效果。
em：em=1*font-size。 em单位用的也比较多，特别是国外；em单位的名称为相对长度单位，它是用来设置文本的字体尺寸的，相对于父级元素对象内文本的字体尺寸；如果没有人为设置当前对象内文本的字体尺寸，那么它相对的是浏览器默认的字体尺寸（16px）。
rem: rem是css3新增的一个相对长度单位，它的出现是为了解决em的缺点，em可以说是相对于父级元素的字体大小，当父级元素字体大小改变时，又得重新计算。rem出现就可以解决这样的问题，rem只相对于根节点，即HTML元素。所以只要在html标签上设置字体大小，文档中的字体大小都会以此为参照标准，一般用于自适应布局。
%（百分比）: %也很常见，它和em差不多一样，都是相对于父级元素。但%可以在很多属性中使用，比如：width、height、font-size等。而em是用来设置字体大小（font-size）的单位，width、height等属性是没有em单位的。

3.2.6 文本装饰

使用 <text-decoration>来设置文本装饰。常用的有：none(无装饰)、underline(下划线)等。

3.3 css边框

CSS边框属性允许你指定一个元素边框的样式和颜色。

3.3.1 css边框样式

使用 <border-style>来设置边框样式。
主要有：
在这里插入图片描述
尝试下列代码：

<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<style>
p.none {border-style:none;}
p.dotted {border-style:dotted;}
p.dashed {border-style:dashed;}
p.solid {border-style:solid;}
p.double {border-style:double;}
p.groove {border-style:groove;}
p.ridge {border-style:ridge;}
p.inset {border-style:inset;}
p.outset {border-style:outset;}
p.hidden {border-style:hidden;}
</style>
</head>

<body>
<p class="none">无边框。</p>
<p class="dotted">虚线边框。</p>
<p class="dashed">虚线边框。</p>
<p class="solid">实线边框。</p>
<p class="double">双边框。</p>
<p class="groove"> 凹槽边框。</p>
<p class="ridge">垄状边框。</p>
<p class="inset">嵌入边框。</p>
<p class="outset">外凸边框。</p>
<p class="hidden">隐藏边框。</p>
</body>

</html>

3.3.2 css边框颜色与宽度

使用 <border-color>来设置边框颜色，使用 <border-width>来设置宽度。

为边框指定宽度有两种方法：可以指定长度值，比如 2px 或 0.1em(单位为 px, pt, cm, em 等)，或者使用 3 个关键字之一，它们分别是 thick 、medium（默认值）和 thin。
而border-color单独使用是不起作用的，必须得先使用border-style来设置边框样式。

3.3.3 css单独设置边框某边

可以对border的单独某边进行设计：

p
{
    border-top-style:dotted;
    border-right-style:solid;
    border-bottom-style:dotted;
    border-left-style:solid;
}

也可以直接写属性值，border将按照以下顺序对属性赋值。
在这里插入图片描述

3.4 css修饰超链接

3.4.1 hover

指当鼠标移动到超链接上时，会发生什么效果。hover是一种伪类选择器，有对应的权重。
尝试下列代码：

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			a{
				text-decoration: none;
			}
			a:hover{
				text-decoration: underline;
				background-color: #f40;
				color: #FFFFFF;
				font-size: 16px;
				font-weight: bold;
				font-family: arial;
				border-radius: 10px;
			}
		</style>
	</head>
	<body>
		<a href="www.taobao.com">wwww.taobao.com</a>
	</body>
</html>