web前端技术之CSS语言基础与页面布局（上）

最新推荐文章于 2022-07-21 05:00:00 发布

ice三分颜色

最新推荐文章于 2022-07-21 05:00:00 发布

阅读量546

点赞数 5

分类专栏： web前端技术文章标签： html5 html css 前端

本文链接：https://blog.csdn.net/qq_46007633/article/details/123747150

版权

web前端技术专栏收录该内容

11 篇文章 4 订阅

订阅专栏

4.1概述与使用场景

CSS概述

CSS实现了内容与样式的彻底分离，一个CSS样式文件可在多个页面中使用，当用户修改CSS样式文件时，所有引用该样式文件的页面外观都随之发生改变。

发展史

CSS样式表发展经历了四个版本
1996年12月，第一个CSS规范成为W3C的推荐标准，主要包括基本的样式功能、有限
的字体支持和有限的定位支持
1998年5月，CSS 2 作为W3C推荐标准发布，其中包含了声音、分页媒介(打印)以及更好的字体支持和定位支持
2010年12月，CSS 3版本全新推出，通过模块化结构可以及时调整模块的内容，方便版本的更新与发布
2012年9月开始设计CSS Level4版本；到目前为止，极少数功能被浏览器厂商所支持。

CSS基本语法结构

样式是CSS的基本单元，每个样式包含两部分内容：

选择器：用于指明网页中哪些元素应用此样式规则。浏览器解析该元素时，根据选择器指定的样式来渲染元素效果；

声明：每个声明由属性和属性值两部分，并以;结束。

CSS基本格式：div{color:blue;font-size:12px;}

选择器{属性：属性值；属性：属性值}

声明声明

一个选择器可包含一个或多个声明

遵循规则：第一项必须是选择器或者是选择器表达式。选择器之后紧跟一对大括号。每个声明是由属性和属性值组成，且在大括号内。最后一个生命后面的英文分号可以省略。属性值之间使用空格隔开。

4.2CSS的使用

CSS的三种样式：内嵌样式、内部样式和外部样式。

内嵌样式（行内样式）

<body>
<p style="color: brown;font-size:34px;background:yellow">内嵌样式-style属性</p>
<h4 style="border:dotted thin blue;text-align: center;">内嵌样式的使用</h4>
<span style="color: red;font-weight: bold;">内嵌样式</span>是混合在HTML标记里使用的，用这种方法，可以很简单的对某个元素单独定义样式
</body>

内部样式表：

将CSS样式从HTML标签中分离出来，使得HTML代码更整洁，而且CSS样式可以被多次使用。

内部样式表写在<style>标签中的样式说明，仅对当前页面有效。

在页面加载过程中，先加载样式后加载页面元素，浏览器根据元素的顺序加载，渲染并在页面中显示出来。

CSS中注释应采用：/*注释内容*/。

<head>
    <meta charset="UTF-8">
    <title>内部样式表</title>
    <style type="text/css">
        body{background-color: #FFFF00;}
        p{color: blue;}
    </style>
</head>
<body>
背景是黄色
<p>这里是蓝色</p>
</body>

外部样式表：

将CSS独立文件存放，在页面中引用该样式文件，有利于维护更新。

外部样式表分为两种：链接外部样式表和导入外部样式表。

链接外部样式表

<head>
    <meta charset="UTF-8">
    <title>外部样式表</title>
    <link type="text/css" rel="stylesheet" href="demo02.css"/>

</head>
<body>
<h1>链接外部样式表的使用</h1>
<hr/>
</body>

Demo02.css

@charset "utf-8";
h1{
    color:#FFFF00;
    border: dashed 1px #FF00FF;
}
hr{
    border: none;
    background-color: black;
    width:95%;
    height: 1px;
    text-align: center;
}
span{
    font-weight: bold;
}

注：1.关键字@charset用于指定样式表使用的字符集，只能用于外部样式表文件中，并位于样式表的最前边，且只允许出现一次。

2.设置hr的color属性，要用border: none;设置无边框，为避免不显示，用height: 1px;设置高度，最后再设置想要的颜色。background-color: black;

3.在页面的<head>标签中使用<link>标签关联style.css样式文件，然后在<body>中通过标签选择器引用央视终于定义的样式。

导入外部样式表

模板：

@ inport 样式文件的引用地址;

@import url{“样式文件的引用地址”};

注：@import关键字用于导入外部样式，在<style>标签中需位于内部样式之前，url后的地址要有引号，不然会有浏览器不支持。。

<style>
@import url("demo04.css");
@import url("../css/yinruwaibu.css");
</style>

两种外部样式表的区别：

隶属关系不同：<link>标签属于HTML标签，而@import是CSS提供的载入方式
. 加载时间及顺序不同：使用<link>链接的CSS样式文件时，浏览器先将外部的CSS文件加载到网页当中，
然后再进行编译显示；而@import导入CSS文件时，浏览器先将HTML结构呈现出来，再把外部的CSS文件加载到网页中，当网速较慢时会先显示没有CSS时的效果，加载完毕后再渲染页面
兼容性不同：由于@import是CSS 2.1提出的，只有在IE5以上的版本才能识别，而<link>标签无此问
DOM模型控制样式：使用JavaScript控制DOM改变样式时，只能使用<link>标签，而@import不受DOM模型控制
综上所述，不管从显示效果还是网站性能上看，link链接方式更具有优势，应优先考虑。

样式表的优先级：

多重样式，是指外部样式，内部样式和内嵌样式同时应用于页面中某元素。优先级采用就近原则。一般情况下，优先级由高到低的顺序是“内嵌->内部->外部->浏览器默认“

示例：依次删除内嵌->内部->外部可看到不同的颜色

Youxianji.css

h3{
color:#FF00FF;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>优先级</title>
    <link rel="stylesheet" type="text/css" href="youxianji.css"/>
    <style type="text/css">
        h3{color: green;}
        </style>
</head>
<body>
<h3 style=color:red>这是什么颜色</h3>
</body>
</html>

4.3、CSS选择器

选择器：指明哪些元素应用此样式规则，浏览器解析该元素，根据选定的样式来渲染元素的显示效果

CSS选择器分为基本选择器、组合选择器、属性选择器

基本选择器：

通用选择器：类似通配符，用于匹配文档中所有元素类型。是页面中所有元素都是用该规则。*{ font-size:12px;color:red;}

标签选择器：之任意的HTML标签名作为一个CSS选择器，用于将HTML某标签来统一的设置样式。P{font-family:楷体;}

类选择器:是指同一样式的元素定义为一类。CSS中：.classname{ property1:value…}

HTML中：<div class=”classname”>……</div>

ID选择器：与类选择器相似，区别在于使用#进行定义。元素的ID要求是唯一的，通过ID来识别页面中的元素。通过ID选择器可对元素单独设置样式。#idValue{property1:value;…}

一个文档中由于ID属性的唯一，选择器具有一定的局限性，尽量少用。

例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>选择器</title>
    <link type="text/css" rel="stylesheet" href="demo05.css"/>
</head>
<body>
通用选择器
<p>标签选择器</p>
<p class="lei">这是个类选择器</p>
<p id="myld">基本选择器中的ID选择器</p>
</body>
</html>

Demo05.css

#myld{
    color: red;
    text-decoration: line-through;
}
.lei{
    color: #00ccaa;
    size: A4;
}
p{
    color: #FFFF00;
    text-align: right;
}
*{
    font-size: 12px;
    color: #FF00FF;
}

注：优先级从高到低：ID选择器->类选择器->标签选择器->通用选择器

组合选择器

多元素选择器：当多个元素拥有相同特征，可通过多元素选择器的方式来统一定义样式，多元素选择器允许一次定义多个选择器样式，选择器之间用“，“隔开。p,div{font-size:14px;color:blue;}

后代选择器:用于选取某个元素的所有后代元素；后代元素之间用空格隔开。

例：将<div>标签中的<p>标签北京颜色设置为#CCC,而不在<div>标签中的<p>标签保持原有形式。div p {background-color:#CCC;}

子元素选择器：用于选取某个元素的直接子元素（间接子元素不适用）；子元素选择器元素之间使用大于号>隔开。CSS样式提供了一种继承机制，可大量简化CSS代码。缩短开发时间。子元素可以继承父元素的某些样式。当子元素与父元素定义的样式重复时，则会覆盖父元素中的样式。Div>p{font-weight:bold;border:solid 2px #066;}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        p,div{
            font-size: 14px;color:blue;
        }
        div p{
            background-color: #CCC; }
            div>p{
                font-weight: bold;
                border: solid 2px #066;
            }
    </style>
</head>
<body>
<p>
   多元素选择器
</p>
<div>子代<p>选择器 </p></div>
<div><span><p>后代选择器又称包含选择器</p></span></div>
</body>
</html>

如下图：

相邻兄弟选择器:用于选择紧接在某元素之后的兄弟元素，相邻兄弟选择器元素之间使用+隔开。H3+p{font-weight:bold}

普通兄弟选择器:是指拥有相同父元素的元素，元素与元素之间不必直接紧随。选择器之间使用~隔开。H3~p{background:#}

注意！一定要带<!DOCTYPE…>声明部分。因为子选择器和兄弟选择器在高版本的过渡版本中支持不够好。

属性选择器

根据元素属性来选取元素。分为存在选择器、相等选择器、包含选择器、连字符选择器、前缀选择器。

<style type="text/css">
    p[id]{font-size: 14px;}
    p[name="teaName"]{font-weight: bold;}
    p[name~="stu"]{color: red;}
    p[long|="zh"]{background-color: #999}
    p[title^="zh"]{font-size: 12px}
   p[title*="ch"]{background-color: #999}
    p[title$="th"]{color: #603}
</style>