前端三件套之CSS（一）

最新推荐文章于 2024-06-12 12:52:53 发布

前端菜鸟阿皮

最新推荐文章于 2024-06-12 12:52:53 发布

阅读量76

点赞数

文章标签： css 前端 html

本文链接：https://blog.csdn.net/m0_56221851/article/details/131280041

版权

学习完HTML，接下来我们来学习CSS，那么什么是CSS呢？

（1）CSS 简介

CSS 概念

CSS （ Cascading Style Sheets ）层叠样式表，又叫级联样式表，简称样式表

CSS 文件后缀名为 .css

CSS 用于 HTML 文档中元素样式的定义

为什么需要 CSS

使用 css 的目的就是让网页具有美观一致的页面

CSS 和 HTML 之间的关系

1 HTML 用于构建网页的结构

2 CSS 用于构建 HTML 元素的样式

3 HTML 是页面的内容组成， CSS 是页面的表现

语法

CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明

选择器通常是您需要改变样式的 HTML 元素每条声明由一个属性和一个值组成

属性（ property ）是您希望设置的样式属性（ style attribute ）。每个属性有一个值。属性和值被冒号分开

<style>
    h1{
        color: blue;
        font-size: 12px;
   }
</style>

（2）CSS 的引入方式

内联样式（行内样式）

要使用内联样式，你需要在相关的标签内使用样式（ style ）属性。Style 属性可以包含任何 CSS 属性

温馨提示

缺乏整体性和规划性，不利于维护，维护成本高

<p style="background: orange; font-size:24px;">CSS<p>

内部样式

当单个文档需要特殊的样式时，就应该使用内部样式表。你可以使用 <style> 标签在文档头部定义内部样式表

温馨提示

单个页面内的 CSS 代码具有统一性和规划性，便于维护，但是在多个页面之间容易混乱

<head>
    <style>
       h1 {
           background: red;
       }
    </style>
</head>

外部样式（推荐）

当样式需要应用于很多页面时，外部样式表将是理想的选择。在使用外部样式表的情况下，你可以通过改变一个文件来改变整个站点的外观。每个页面使用 <link> 标签链接到样式表。 <link> 标签在 (文档的）头部

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

导入式（了解）

此种方式使用率比较低 , 因为会影响加载速度

<style type="text/css">
   @import url("css文件路径");
</style>

@import 和 link 的区别

@import 是 CSS 提供加载样式的一种方式，只能用于加载 CSS 。 link 标签除了可以加载 CSS 外，还可以做很多其它的事情，比如定义 rel 连接属性等

加载顺序的差别。当一个页面被加载的时候， link 引用的 CSS 会同时被加载， @import 引用的

CSS 会等到页面全部被下载完再被加载。所以有时候浏览 @import 加载 CSS 的页面时开始会没有样式（就是闪烁），网速慢的时候会比较明显

兼容性的差别。 @import 在 IE5 以上才能识别，而 link 标签无此问题

使用 dom 控制样式时的差别。当使用 javascript 控制 dom 去改变样式的时候，只能使用 link 标签，因为 dom 操作元素的样式时，用 @import 方式的样式也许还未加载完成

使用 @import 方式会增 HTTP 请求，会影响加载速度，所以谨慎使用该方法

(3)CSS 样式表特征

继承性

指被包含在内部的标签可以拥有外部标签的样式，比如： text- 、 font- 、 line-height ，但有些属性不能继承，比如： border 、 padding、 margin

层叠性

简单的说，层叠就是对一个元素多次设置同一个样式，这将使用最后一次设置的属性值。例如对一个站点中的多个页面使用了同一套CSS样式表，而某些页面中的某些元素想使用其他样式，就可以针对这些样式单独定义一个样式表应用到页面中。这些后来定义的样式将对前面的样式设置进行重写，在浏览器中看到的将是最后面设置的样式效果

优先级

样式定义冲突时，按照不同样式规则的优先级来应用样式

行内样式> 内部样式（外部样式）

内部样式和外部样式优先级一样，写在后面的生效

CSS 注释

注释是用来解释你的代码，并且可以随意编辑它，浏览器会忽略它

CSS 注释以 /* 开始 , 以 */ 结束

/* 这是注释 */

（4）基础选择器一

全局选择器

可以与任何元素匹配，优先级最低，不推荐使用

*{
     margin: 0;
     padding: 0;
 }

元素选择器

HTML 文档中的元素， p、b、div、a、img、body 等。标签选择器，选择的是页面上所有这种类型的标签，所以经常描述“共性 ” ，无法描述某一个元素的 “ 个性 ”

p{
    font-size:14px;
}

再比如说，我想让 “ 学完前端，继续学 Java” 这句话中的 “ 前端 ” 两个变为红色字体，那么我可以用 <span> 标签把 “ 前端 ” 这两个字围起来，然后给 <span> 标签加一个标签选择器

<p>学完了<span>前端</span>，继续学Java</p>
span{
 color: red;
}

温馨提示

1 所有的标签，都可以是选择器。比如 ul 、 li 、 label 、 dt 、 dl 、 input 、 div 等

2 无论这个标签藏的多深，一定能够被选择上

3 选择的所有，而不是一个

类选择器

规定用圆点 . 来定义，针对你想要的所有标签使用

<h2 class="oneclass">你好</h2>
/*定义类选择器*/
.oneclass{
 width:800px;
}

class 属性的特点

1 类选择器可以被多种标签使用

2 类名不能以数字开头

3 同一个标签可以使用多个类选择器。用空格隔开

<h3 class="classone classtwo">我是一个h3啊</h3>

<h3 class="teshu" class="zhongyao">我是一个h3啊</h3> // 错误

（5）基础选择器二

ID 选择器

针对某一个特定的标签来使用，只能使用一次。 css 中的 ID选择器以 # 来定义

<h2 id="mytitle">你好</h2>
#mytitle{
   border:3px dashed green;
}

特别强调

1 ID 是唯一的

2 ID 不能以数字开头

合并选择器

语法：选择器1,选择器2,...{ }

作用：提取共同的样式，减少重复代码

.header, .footer{
    height:300px;
}

选择器的优先级

CSS 中 , 权重用数字衡量

元素选择器的权重为 : 1

class 选择器的权重为 : 10

id 选择器的权重为 : 100

内联样式的权重为 : 1000

优先级从高到低 : 行内样式 > ID 选择器 > 类选择器 > 元素选择器

(6)DIV+CSS 布局

优点

1 符合 W3C 标准

2 使页面载入得更快

3 保持视觉的一致性

4 修改设计时更有效率

5 搜索引擎友好

布局时常用的属性

属性	描述
width	宽度
height	高度
background-color	背景颜色
float	浮动（ div 不在独占一行，左右摆放）

布局 - 上中下结构

<div class="header"></div>
<div class="content"></div>
<div class="footer"></div>

 <style>
.header {
height: 100px;
background-color: #fcc;
}
6
.content {
  height: 400px;
  background-color: #ff9;
 }
.footer {
    height: 100px;
    background-color: #ccf;
}
 </style>

布局 - 上中下 - 左右

<div class="container">
<div class="header"></div>
<div class="nav"></div>
<div class="content">
<div class="left"></div>
<div class="center"></div>
<div class="right"></div>
</div>
<div class="footer"></div>
</div>

<style>
.header {
 width: 100%;
 height: 100px;
 background-color: red;
}
.nav {
 width: 100%;
 height: 50px;
 background-color: pink;
}
.content {
    width:100%;
    height: 300px;
    background-color: yellow;
}
.footer {
    width: 100%;
    height: 150px;
    background-color: deepskyblue;
}
.left {
    width: 33.33%;
    height: 300px;
    background-color: palegoldenrod;
    float: left;
}
.center {
    width: 33.33%;
    height: 300px;
    background-color: palegreen;
    float: left;
}
.right {
    width: 33.33%;
    height: 300px;
    background-color: palevioletred;
    float: left;
}
</style>

前端菜鸟阿皮

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
前端三件套之CSS（一）

简单的说，层叠就是对一个元素多次设置同一个样式，这将使用最后一次设置的属性值。例如对一个站点中的多个页面使用了同一套CSS样式表，而某些页面中的某些元素想使用其他样式，就可以针对这些样式单独定义一个样式表应用到页面中。这些后来定义的样式将对前面的样式设置进行重写，在浏览器中看到的将是最后面设置的样式效果。在使用外部样式表的情况下，你可以通过改变一个文件来改变整个站点的外观。标签选择器，选择的是页面上所有这种类型的标签，所以经常描述“共性。要使用内联样式，你需要在相关的标签内使用样式（
复制链接

扫一扫