首页 前端知识 web前端——css(一篇教会网页制作)

web前端——css(一篇教会网页制作)

2024-10-28 20:10:21 前端知识 前端哥 563 751 我要收藏

目录

一、基本语法

1.行内样式表

2.内嵌样式表

3.外部样式表

二、选择器

1.标签选择器

2.类选择器

3.id 选择器

4.通配选择器

三、常见修饰

1.文本

2.背景

3.列表

4.伪类

5.透明度

6.块级、行级、行级块标签

7.div 和 span

四、盒子模型(重点)

1.内容区

2.内边距

3.边框

4.外边距


CSS是Cascading Style Sheets(级联样式表)。

CSS是一种样式表语言,用于为HTML文档控制外观,定义布局。例如,
CSS涉及字体、颜色、边距、高度、宽度、背景图像、高级定位等方面 。

可将页面的内容与表现形式分离,页面内容存放在HTML文档中,而用于定义表现形式的CSS在一个.css文件中或HTML文档的某一部分。

一、基本语法

1.行内样式表

        行内样式表,又有人称内联样式、行间样式、内嵌样式。是通过标签的style属性来设置元素

样式,其基本语法格式如下:

<标签名 style="属性1:属性值1; 属性2:属性值2; 属性3:属性值3;"> 内容 </标签名>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!-- 分别对段落内容的字体颜色、大小、字体类型进行修饰 -->
		<p style="color: red;font-size: 30px;font-family: 楷体;">我是一个段落</p>
	</body>
</html>

        效果如下:

2.内嵌样式表

        内嵌式是将CSS代码集中写在HTML文档的head头部标签中,并且用style标签定义

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>/* 通过引用<P>标签{}的形式,来进行具体修饰操作*/
			p{
				color: red;
				font-size: 30px;
				font-family: 楷体;
			}
		</style>
	</head>
	<body>
		<p>我是一个段落</p>
	</body>
</html>

        其效果同上,这里需要注意:<head>中的<P>标签修饰对<body>内所有<P>标签内容都有效

3.外部样式表

        外部样式表是将所有的样式放在一个或多个以.CSS为扩展名的外部样式表文件中,通过link标签将外部样式表文件链接到HTML文档中

(其中,href中填写引入的样式文件)

<head>

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

        <style type=" text /css">

        </style>

</head>

二、选择器

        要使用CSS对HTML页面中的标签实现一对一,一对多的控制,这就需要用到CSS选择器。

1.标签选择器

        语法:标签名{}        通过标签选择器可以选择页面中的所有指定标签

<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			p{
				color: red;
			}
		</style>
	</head>

2.类选择器

        语法:.class属性值{}        通过标签的class属性值选中一组标签

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>/*这时,只会对p1对应的<P>标签内容进行修饰*/
			.p1{
				color: red;
			}
		</style>
	</head>
	<body>
		<p class="p1">我是一个段落</p>
		<p class="p2">我也是一个段落</p>
	</body>
</html>

 

3.id 选择器

        语法:#id属性值 {}        通过标签的id属性值选中唯一的一个标签

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>/*这时,只会对p2对应的<P>标签进行修饰*/
			#p2{
				color: aqua;
			}
		</style>
	</head>
	<body>
		<p class="p1">我是一个段落</p>
		<p id="p2">我也是一个段落</p>
	</body>
</html>

 

4.通配选择器

        语法:*{}                可以用来选中页面中的所有的标签

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			*{
				color: red;
			}
		</style>
	</head>
	<body>
		<p class="p1">我是一个段落</p>
		<p class="p2">我也是一个段落</p>
	</body>
</html>

三、常见修饰

        接下来介绍的是一些网页设计中非常基础的修饰语法,这里就不过多做代码演示,感兴趣可以自行操作。(以下操作都是在<style>标签里面进行)

1.文本

color :字体颜色 font-size :字体大小 font-family :字体 text-align :文本对齐 text-decoration:line-through :定义穿过文本下的一条线 text-decoration:underline :定义文本下的一条线 text-decoration:none :定义标准的文本 font-style: italic; 斜体文本 font-weight: 字体粗细 line-height: 设置行高 letter-spacing 可以指定字符间距 text-indent 用来设置首行缩进

2.背景

background-color 背景颜色 background-image 背景图片 background-repeat 背景重复 background-size 背景尺寸 background- position 背景位置

3.列表

CSS 列表属性可以放置、改变列表项标志,或者将图像作为列表项标志 。 list-style-image 将图象设置为列表项标志。 list-style-position 设置列表中列表项标志的位置。 list-style-type 设置列表项标志的类型。 list-style 简写属性。

4.伪类

        CSS伪类专门用来表示标签的一种的特殊的状态,当我们需要为处在这些特殊状态的标签设置样式时,就可以使用伪类 。

语法样式:

        :hover伪类表示鼠标移入的状态         :active表示的是被点击的状态         :focus向拥有键盘输入焦点的标签添加样式。

        这里我们做一个简单的演示:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.p1:hover{
				color: red;
			}
		</style>
	</head>
	<body>
		<p class="p1">我是一个段落</p>
	</body>
</html>

当鼠标没接触到<P>标签时:                     鼠标移入时:

5.透明度

        opacity 属性设置标签的不透明级别 值为1。

         规定不透明度:从 0.0 (完全透明)到 1.0(完全不透明)。

        语法:opacity:;        冒号后面填写0-1之间的数字即可

6.块级、行级、行级块标签

● 什么是块级标签?

        块级标签:无论内容多少 都会独自占据一行的。

        例如<p>、<h1>、<ul>、<ol>、<hr/>等。

● 什么是行级标签?

        行级标签:只占自身大小的标签,不会占一行。

        例如<font>、<b>、<i>、<a>等。

● 什么是行级块标签?

        例如 <input/> <img>等

那么我们能否对不同级别标签进行转换呢?答案是肯定的!

通过display样式可以修改标签的类型。
可选值:
        block :设置标签为块标签
        inline :设置标签为行级标签
        inline-block :设置标签为行级块标签
        none :隐藏标签(标签将在页面中完全消失)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.p1{
				display: inline;
			}
		</style>
	</head>
	<body>
		<p class="p1">我是一个段落</p>
	</body>
</html>

没进行display修改前:(可以清晰的观察到,独占一行)

进行修饰后:(只占自身大小)

7.div 和 span

div 标签:         div是块级标签,可以放置任何标签。         div没有任何附加功能,给了什么属性就能变成什么样。         div主要的作用是被用来布局网页。 span 标签:         span是行级标签         span 没有任何附加功能,给了什么属性就能变成什么样。         span标签被用来选中文档中的文字。

四、盒子模型(重点)

        CSS处理网页时,它认为每个标签都包含在一 个不可见的盒子里。

        如果把所有的标签都想象成盒子,那么我们对网页的布局就相 当于是摆放盒子。

        我们只需要将相应的盒子摆放到网页中相应的 位置即可完成网页的布局。

其基本样式如图:

1.内容区

内容区指的是盒子中放置内容的区域,也就是标签中的文本内容,子标 签都是存在于内容区中的。 通过 width height 两个属性可以设置内容区的大小而不是整个盒子的大 小。 如果没有为标签设置内边距和边框,则内容区大小 默认和盒子大小是一 致的。 width height 属性适用于块标签。

        这一是个普通的盒子内容区大小:

 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.main_box{
				width: 200px;
				height: 200px;
			}
		</style>
	</head>
	<body>
		<div class="main_box">
			我是一个盒子<br />
			你们好
		</div>
	</body>
</html>

        我们可以看到,通过对盒子width 和 height 属性的修改,改变了盒子内容区大小(蓝色区域),而非整个盒子大小:

2.内边距

        通过padding属性进行操作,设置标签的内边距

内边距指的就是标签内容区与边框以内的空间。 内边距会影响整个盒子的大小。 padding-left:10px;        有 10个像素的左边距 padding-right:10px;        有10个像素的右边距 padding:10px 20px 30px 40px     上、右、下、左四个方向分别有10、20、30、40个像素的边距
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.main_box{
				width: 200px;
				height: 200px;
				padding-left: 10px;
			}
		</style>
	</head>
	<body>
		<div class="main_box">
			我是一个盒子<br />
			你们好
		</div>
	</body>
</html>

3.边框

        可以在标签周围创建边框,边框是标签可见框的最外部。

        格式:border:1px red solid;(分别指边框的宽度、颜色、样式)

        也可以使用 border-top/left/right/bottom 分别指定上左右下四个方向的边框。

(1)边框样式

dotted (点线) dashed (虚线) solid (实线) double (双线)groove (槽线)

(2)边框圆角

border-radius:5px 设置四个角为圆角边框(px大小可自拟)

border-top-left-radius设置左上为圆角边框

4.外边距

        外边距是标签边框与周围标签相距的空间。 使用margin属性可以设置外边距。用法和padding

类似,同样也提供了四个方向的 。

margin-top/right/bottom/left (上、右、下、左) margin的值可以为负值。 margin的值还可以auto(自动),设置外边距为最大值,当将左右外边距设置为auto时,浏览器会将左右外边距设置为相等. 垂直设置为auto时值为0,所以水平居中也可以简写为margin:0 auto。
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.main_box{
				width: 200px;
				height: 200px;
				margin: 0px auto;/*水平居中操作*/
			}
		</style>
	</head>
	<body>
		<div class="main_box">
			我是一个盒子<br />
			你们好
		</div>
	</body>
</html>

        如图,盒子被居中放置: 

注:浏览器为了在页面中没有样式时,也可以有一个比较好的显示效果,所以为很多的标签都设

置了一些默认的margin和padding,而它的这些默认样式,正常情况下我们是不需要使用的。

所以我们往往在编写样式之前需要将浏览器中的默认的margin和padding统统的去掉。如下操作:

*{         margin: 0;         padding: 0; }

        以上就是web前端有关css样式表语言的内容了,通过这篇文章,相信一些前端小白就已经可以自行编写一些小网页了!当然,最后的盒子模型部分还牵扯到了一些有关文档流,以及解决多个盒子排列时引发的一些异常情况要用到的定位方法,由于篇幅原因,这里不过多赘述。详情请移步至我的下一篇博客,会对此部分内容进行详细说明!

转载请注明出处或者链接地址:https://www.qianduange.cn//article/19377.html
标签
评论
发布的文章
大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!