【你也能从零基础学会网站开发】Web建站之HTML+CSS入门篇 CSS层叠样式表语法基础

news2024/11/18 1:30:54

🚀 个人主页 极客小俊
✍🏻 作者简介：web开发者、设计师、技术分享
🐋 希望大家多多支持, 我们一起学习和进步！
🏅 欢迎评论 ❤️点赞💬评论 📂收藏 📂加关注

什么是CSS?

CSS 英文全称（Cascading Style Sheet）
CSS中文译为层叠样式表, 是用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。
也就是告诉浏览器，这段样式将应用到哪个对象…

CSS的基本语法结构

选择器{ 属性1:值1; 属性2:值2…… ;}

例如

body {   font-size:12px;  text-align:center;}

解释说明：
属性和属性值之间用冒号:隔开，定义多个属性时，
属性之间用分号;隔开!

CSS选择器

对于刚刚开始学习CSS的新手朋友，我个人觉得选择器就学习3种类型的就足够了，其他的后面可以慢慢深入了解
这里我主要介绍: 标签选择器、class选择器、ID选择器

标签选择器

指以网页中已有的标签名作为名称的选择器，几乎所有的html标签均可用作该类选择器
例如：body{ } p{ } h1{ } 等等…

标签选择器结构图

class类别选择器

用户自定义名称的一种选择器,俗称为class选择器
我们可以在HTML标签中用class=""为相应标签指派样式。
你可理解为一类, 它的特点：在文档中允许被重复使用

class选择器结构图

ID 选择器

属用户自定义名称选择器，基于DOM文档对象模型原理出现的选择器，
可以在XHTML标签中用id=""为相应标签指派样式, 可理解为一个标识
注意：ID选择器在网页中，每个id名称只能使用一次!

ID选择器结构图

这个时候可能有人就会问一个问题:

哪个时候用ID选择器和class选择器呢？

我的回答就是在布局过程当中, 大一点的框架结构体系型用我们就使用ID选择器, 而内容结构型用class选择器, 听不懂也没关系，到时候我们学完CSS的一些基础知识以后，可以来做一个静态页面，在实战布局的过程中去体会其中的奥秘!

CSS命名规则

选择器的命名也很重要，这关系到后期维护，和代码的可读性
在写项目的时候，命名一定要有意义名字可以包含字母、数字、下划线、减号符，不能以数字开关。

多个词组的时候，用下划线或者减号符进行连接，或者写成驼峰式结构!
例如：中间的左边，我们可以定义为center-left/center_left /centerLeft

CSS选择器的其他声明

在刚刚上面我们提及到的选择器都是单独使用，其实选择器还可以组合声明去使用!

嵌套声明:从属关系

例如

<style type=“text/css” >
	P  h1{color:blue;font-size:14px;}
</style>

混合声明:并列及从属关系

例如

<style type=“text/css” >
	P H1,#header ul{color:blue;font-size:12px;}
</style>

CSS如何应用到网页中

CSS编码可以多种方式灵活地应用到我们所设计XHTML页面之中，选择方式可根据我们对设计的不同表现手段来制定，一般按CSS代码位置分为以下方式:

外部样式表

导入

@import url("/css/global.css")

行内样式

也叫内嵌样式表 是直接将CSS写入标签内

例如

<pre style="color:#F00;">重庆</pre>

内部样式表

在标签以外,网页以内,通常写在head里面,title的下面

例如

<style type="text/css">
	pre h1{
		color:#F00;
	}
</style>

导入式样式表

也就是从外部链入css样式到html中, 这种方式我们使用的频率是最多的一种!

例如

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

举个栗子

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>测试页</title>
 <!--此为链接（外部）样式表-->
<link href=“css/style1.css” rel=“stylesheet” type=“text/css”  />

<!--内部样式表-->
<style type="text/css">
body,td,th {font-size: 12px;}
p{font-size: 24px;color:#FFFF00;}
</style>

</head>
<body>
<div id="container">
<div id="header"> <p>头部</p> </div>
<div id="content">
<!--此为行内样式表-->
<p style=“color:#FF0000;font-size:36px”>主体</p>          
</div>
<div id="footer"> <p>尾部</p> </div>
</div>
</body>
</html>