使用HTML语言和CSS开发商业站点_初识CSS

最新推荐文章于 2023-11-19 10:20:25 发布

_Quicksand

最新推荐文章于 2023-11-19 10:20:25 发布

阅读量896

点赞数

文章标签：编程语言北大青鸟accp CSS HTML 开发商业站点

本文链接：https://blog.youkuaiyun.com/hacker_A/article/details/77825925

版权

本文介绍了CSS3的基础概念、语法及如何在HTML中引入样式。包括行内样式、内部样式表和外部样式表的使用方法及其优缺点。此外，还详细讲解了CSS3的选择器，如基本选择器和高级选择器的特性与应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

第4章初识CSS
一.CSS概述
   1.什么事CSS
       CSS全称为层叠样式表（Cascading Style Sheet），通常又称为风格样式表（Style Sheet），它是用来进行网页风格设计的。
   2.CSS在网页中的应用
       通过设立样式表，可以统一地控制HTML中各标签的显示属性。设置文本居中显示，文本与图片的对齐方式，超链接的不同效果，更有效地控制网页外观。
   3.CSS的发展史
       2010年W3C推出了CSS3版本，是目前最新的版本，它向着模块化的趋势发展，又加了很多使用的新技术，需要高级浏览器的支持。
   4.CSS的优势
       （1）内容与表现分离，便于后期CSS样式的维护
       （2）表现的统一
       （3）丰富的样式，使得页面布局更加灵活。
       （4）减少网页的代码量，提高网页的浏览速度，节省网络带宽。
       （5）运用独立于页面的CSS，还有利于网页被搜索引擎收录。
二.CSS3的基本语法
   1.CSS3的基本语法结构
       （1）CSS规则由两部分构成，即选择器和声明。
       （2）声明必须放在大括号（{}）中，并且声明可以是一条或多条。
       （3）每条声明由一个属性和值组成，属性和值用冒号分开，每条语句以英文分号结尾。
   基于W3C标准规范考虑，建议最后一条声明的结束“；”都要写上。
   2.认识<style>标签
       <style>标签的语法：
       <head lang="en">
           <meta charset="UTF-8">
           <title>style标签</title>
           <style>
               h1{
                   font-size:12px;
                   color:#F00;
               }
           </style>
       </head>
三.在HTML中引入CSS样式
       （1）行内样式
       行内样式就是在HTML标签中直接使用style属性设置CSS样式
       语法：<h1 style="color"red;">style属性的应用</h1>
           <p style="font-size:14px;color;green;">直接在HTML标签中设置的样式</p>
       缺点：不能使内容与表现相分离，本质上没有体现出CSS的优势，因此不推荐使用。
       （2）内部样式表
       优缺点：方便在页面中修改样式，但不利于在多页面间共享复用代码，以及页面的维护，对内容与样式的分离也不够彻底。
       （3）外部样式表
       1）链接外部样式表
       就是在HTML5页面中使用<link/>标签链接外部样式表
       语法：
           <head>
               ...
               <link href="style.css" rel="stylesheet" type="text/css"/>
               ...
           </head>
       rel="stylesheet"是指在页面中使用这个外部样式表；type="text/css"是指文件的类型是样式表文本；href="style.css"是文件所在的位置
       示例1：把页面中的CSS代码单独保存在CSS文件夹下的common.css样式表文件中，在CSS文件中不需要<style>标签。
       示例2.在HTML文件中使用<link/>标签引用common.css样式表文件。
       2）导入外部样式表
       语法：<head>
           ......
           <style>
           
           </style>
            </head>
       3)链接式与导入式的区别：
       <1>.<link/>标签属于XHTML范畴，而@import是CSS2.1中特有的。
       <2>.使用<link/>链接的CSS是客户浏览网页时先将外部CSS文件加载到网页中，再进行编译显示，所以这种情况下显示出来的网页与用户预期
       的效果一样，即使网速再慢也是一样的效果。
       <3>.使用@import   导入的CSS文件，客户端在浏览网页时先将HTML结构呈现出来，再把外部CSS文件加载到网页中，当然最终的效果与使用<link/>
       链接文件效果一样，只是当网速较慢时会先显示没有CSS统一布局的HTML网页，这样就会给用户很不好的感觉。这也是目前大多数网站采用链接外
       部样式表的主要原因。
       4）.样式优先级
       行内样式>内部样式>外部样式表
       遵循“就近原则”。如果一个选择器中样式声明层叠，那么后写的会覆盖先写的样式，即后写的样式优先于先写的样式。
四.CSS3的选择器
   1.CSS3的基本选择器
       （1）.标签选择器
       每种HTML标签的名称都可以作为相应的标签选择器的名称。
       （2）.类选择器
       类选择器在同一个页面中可以频繁的使用（以.来调用）
       （3）.ID选择器
       同一个id属性在同一个页面中只能使用一次（以#来调用）
       （4）.三种基本选择器的优先级
       ID选择器>class类选择器>标签选择器
   2.CSS3的高级选择器
   使用元素的class属性的缺点：
       第一：class属性本身没有语义，它纯粹是用来为CSS样式服务的。
       第二：使用class属性，并没有把样式与元素绑定起来，针对同一个class属性，标题，段落，按钮等都可以使用，这样是非常混乱的，修改起来很麻烦。
       （1）.层次选择器
       是通过HTML文档的对象模型（Document Object Model，DOM）元素间的层次来选择元素的。
       E F 后代选择器
       E>F子选择器
       E+F相邻选择器
       E~F通用兄弟选择器
       （2）.结构伪类选择器
       所有的结构伪类都是基于HTML文档树的，也称为文档对象模型（DOM），文档树（Document Tree）是HTML页面的层级结构。
       E:first-child作为父元素的第一个子元素的元素E
       E:last-child作为父元素的最后一个子元素的元素E
       E F:nth-child(n)选择父级元素E的第n个子元素F，（n可以是1，2，3），关键字为even，odd
       E:first-of-type选择父元素内具有制定类型的第一个E元素
       E:last-of-type选择父元素内具有指定类型的最后一个E元素
       E F：nth-of-type(n)选择父元素内具有制定类型的第n个F元素
       （3）.属性选择器
       E[attr]选择匹配具有属性attr的E元素
       E[attr=val]选择匹配具有属性attr的E元素，并且属性值为val（其中val区分大小写）
       E[attr^=val]选择匹配元素E，且E元素定义了属性attr，其属性值是以val开头的任意字符串
       E[attr$=val]选择匹配元素E，且E元素定义了属性attr，其属性值是以val结尾的任意字符串
       E[attr*=val]选择匹配元素E，且E元素定义了属性attr，其属性值包含了“val”,换句话说，字符串val与属性值中的
       任意位置相匹配。