跳至主要內容

2.1 初体验CSS 🎉

刘春龙...大约 9 分钟CSSWEB前端css

2.1 初体验CSS 🎉

从HTML被发明开始,样式就以各种形式存在。不同的浏览器结合它们各自的样式语言为用户提供页面效果的控制。最初的HTML只包含很少的显示属性。

随着HTML的成长,为了满足页面设计者的要求,HTML添加了很多显示功能。但是随着这些功能的增加,HTML变的越来越杂乱,而且HTML页面也越来越臃肿。于是CSS便诞生了。

在这里,首先我们要了解几个概念

CSS概念

CSS(Cascading Style Sheets)层叠样式表,又叫级联样式表,简称样式表

CSS文件后缀名为.css

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

为什么需要CSS

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

CSS和HTML之间的关系

HTML用于构建网页的结构

CSS用于构建HTML元素的样式

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

css语法 💎

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

选择器通常是您需要改变样式的 HTML 元素

每条声明由一个属性和一个值组成

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

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

下面我们简单看一下使用css后的具体效果:

使用css之前的效果
<h4>我是按钮</h4>
<button>按钮</button>
<h5>我是输入框</h5>
<input type="text">
使用css之后的效果
<h4>我是按钮</h4>
<button>按钮</button>
<h5>我是输入框</h5>
<input type="text">
h4 {
    color: pink;
    background-color: blue;
}

button {
    background: purple;
    width: 100px;
    height: 30px;
    border-radius: 2px;
    background-color:#000;
    color:#fff;
}

h5 {
    color: red;
    font-size:30px;
    text-decoration: line-through;
}

input {
    border-radius: 10px;
    width: 200px;
    height: 40px;
    padding:0 20px;
    outline: none;
    border: 1px solid rgb(201, 43, 177);
}
随堂训练

CSS的引入方式 💎

内联样式(行内样式) 👻

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

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

提示

内联样式乏整体性和规划性,不利于维护,维护成本高

内部样式 👻

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

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        input {
            border-radius: 10px;
            width: 200px;
            height: 40px;
            padding:0 20px;
            outline: none;
            border: 1px solid rgb(201, 43, 177);
        }
    </style>
</head>

<body>
    <input type="text">
</body>

</html>








 
 
 
 
 
 
 
 
 
 







提示

style标签放在head标签之间,个人习惯放到title后面

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

外部样式(推荐) 👻

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

<!-- index.html -->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="./index.css">
</head>

<body>
    <input type="text">
</body>

</html>









 







导入式(了解即可) 👻

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

<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请求,会影响加载速度,所以谨慎使用该方法
随堂训练

CSS样式表特征 💎

继承性 👻

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

<div>
    <p>我是黑色</p>
    <h3>我是黑色</h3>
</div>
div{
    color: black;
}

很明显,ph3都继承了div的颜色

层叠性 👻

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

<p>我是红色</p>
p{
    color: black;
}

p{
    color: red;
}

很明显,后面把前面的颜色给覆盖掉了

优先级 👻

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

行内样式>内部样式(外部样式)

提示

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

CSS注释 👻

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

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

/* 这是注释 */
随堂训练

基础选择器 💎

全局选择器 👻

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

*{
   margin: 0;
   padding: 0;
}

提示

不同的浏览器会带有相应的内外边距,可以用此进行清除!

元素选择器 👻

HTML文档中的元素,pbdivaimgbody等。

标签选择器,选择的是页面上所有这种类型的标签,所以经常描述“共性”,无法描述某一个元素的“个性”

p{
  font-size:14px;
}

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

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

提示

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

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

选择的所有,而不是一个

类选择器 👻

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

class属性的特点

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

类名不能以数字开头

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

<h2 class="oneclass">你好</h2>
<h3 class="classone classtwo">我是一个h3啊</h3>
.oneclass{
   color: red; 
}
.classone{
   color: pink; 
}
.classtwo{
   background: yellow; 
}

ID选择器 👻

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

特别提示

ID是唯一的

ID不能以数字开头

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

合并选择器 👻

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

作用:提取共同的样式,减少重复代码

<p class="cls1">你好,</p>
<p class="cls2">李焕英</p>
.cls1,.cls2{
   color: green;
}

!important和优先级 👻

!important 直接把优先级增加到最大

<p class="cls">你好</p>
.cls{
   color: yellow !important;
}
.cls{
   color: red;
}

这里我们能看到字的颜色依旧是黄色,并没有被红色给覆盖掉。

选择器的优先级

CSS中,权重用数字衡量

  • 全局选择器的权重为: 最小

  • 元素选择器的权重为: 1

  • class选择器的权重为: 10

  • id选择器的权重为: 100

  • 内联样式的权重为: 1000

  • !important 的权重为: 最大

随堂训练

网页结构布局实战 💎

布局时常用的属性

属性描述
width宽度
height高度
background-color背景颜色
float浮动(div不在独占一行,左右摆放)
布局-上中下结构
<div class="header"></div>
<div class="content"></div>
<div class="footer"></div>
.header {
  height: 80px;
  background-color: #fcc;
}

.content {
  height: 200px;
  background-color: #ff9;
}

.footer {
  height: 80px;
  background-color: #ccf;
}
布局-上中下-左右
<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>
.header {
  width: 100%;
  height: 60px;
  background-color: red;
}
.nav {
  width: 100%;
  height: 50px;
  background-color: pink;
}
.content {
  width:100%;
  height: 200px;
  background-color: yellow;
}
.footer {
  width: 100%;
  height: 80px;
  background-color: deepskyblue;
}
.left {
  width: 33.33%;
  height: 200px;
  background-color: palegoldenrod;
  float: left;
}
.center {
  width: 33.33%;
  height: 200px;
  background-color: palegreen;
  float: left;
}
.right {
  width: 33.33%;
  height: 200px;
  background-color: palevioletred;
  float: left;
}
随堂训练

轻松一刻 🎧

音乐
音乐

视频教程 🎥

至此,本章节的学习就到此结束了,如有疑惑,可对接技术客服open in new window进行相关咨询。

上次编辑于:
贡献者: 刘春龙
评论
  • 按正序
  • 按倒序
  • 按热度
Powered by Waline v2.15.7