Web-3-CSS基础入门：从零开始打造网页样式

.CSS介绍

HTML学习完以后，以及可以使用HTML开发网页了，但是在呈现的效果上没有那么美观，所以接下来我们要学习CSS,CSS就是可以让我们页面变得更加美观，接下来我们开始学习CSS
第一步：在IDEA中创建名为08_CSS-介绍.html的文件：

第二步:编写如下代码，需要注意的是style标签中书写的是css样式，我们先照着写即可

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS介绍</title>
<style>
h1{
background-color:yellow;
color: red;
}
</style>
</head>
<body>
<h1>
Hello CSS
</h1>
</body>
</html>

第三步：浏览器打开页面，效果如下：

很明显，如果没有css，我们只会呈现黑色的效果，而我们加入了css，此处呈现红色大号字体，让我们的网页变得更加的美观的(ps:此处我们审美问题，修饰的并不美丽)。所以css可以美化我们的页面。

2.CSS概念和作用 2.1CSS格式规范HTML,元素名称在规则集开始位置

格式说明 大括号 开头和结尾，所有的样式放在里面 样式名 左边是样式名，样式名和样式值是固定的，中间使用冒号分隔 样式值 右边是样式值 样式结尾 每个样式以分号结尾

2.2CSS介绍

2.2.1CSS概念

层叠样式表，用于控制页面的样式（表现）。

2.2.2 CSS作用

美化网页

CSS格式规范

选择器:位于规则集开始位置，用于选择HTML元素
属性：改变HTML元素样式
属性值: 在属性右边，冒号后面
存放位置：<head>标签中创建<style>标签

3.CSS三种引入方式

我们知道了css可以美化html的页面，那么我们该如何再html中书写css呢？接下来我们需要学习html中书写css的方式，具体有3种，语法如下表格所示：

名称 语法描述 内联样式在标签内使用style属性，属性值是css属性键值对内部样式定义<style>标签，在标签内部定义css样式外部样式定义<link>标签，通过href属性引入外部css文件

对于上述3种引入方式，企业开发的使用情况如下：

内联样式会出现大量的代码冗余，不方便后期的维护，所以不常用。
内部样式，通过定义css选择器，让样式作用于指定的标签上
外部样式，html和css实现了完全的分离，企业开发常用方式。

接下来，我们通过IDEA编写代码，来演示css的引入方式
第一步：我们IDEA中创建名为09_CSS-引入方式.html的文件：

第二步：我们首先演示内联样式，按照内联样式的语法，我们编写如下代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS引入方式</title>
</head>
<body>


<p style="color: red;font-size: 40px">CSS内联样式</p>
</body>
</html>

第三步：我们通过浏览器打开观察效果如下：

第四步：我们接下来注释掉内联样式，按照内部样式的语法演示内部样式，修改代码如下：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>CSS引入方式</title>
    <!--    2.内部样式-->
    <style>
      p{
        color: yellow;
        font-size: 50px;
      }
    </style>
  </head>
  <body>


    <!--    1.内联样式-->
    <!--      <p style="color: red;font-size: 40px">CSS内联样式</p>-->

    <!--2.内部样式-->
    <p>CSS内部样式1</p>
    <p>CSS内部样式2</p>
  </body>
</html>

新增内容：

<!--    2.内部样式-->
<style>
  p{
    color: yellow;
    font-size: 50px;
  }
</style>

第五步：打开浏览器观察效果如下：

第七步：在resources目录下创建demo.css文件中编写如下的css代码：

p{
color: blue;
font-size: 60px;
}

第八步：我们注释掉内部样式，新增标签来引入外部css文件，完整代码如下：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>CSS引入方式</title>
    <!--    2.内部样式-->
    <!--    <style>
    p{
    color: yellow;
    font-size: 50px;
    }
  </style>-->
    <link rel="stylesheet" href="demo.css">
  </head>
  <body>


    <!--    1.内联样式-->
    <!--      <p style="color: red;font-size: 40px">CSS内联样式</p>-->

    <!--2.内部样式
    <p>CSS内部样式1</p>
    <p>CSS内部样式2</p>-->

    <!--3.外部样式-->
    <p>CSS内部样式1</p>
    <p>CSS内部样式2</p>
  </body>
</html>

新增内容：

    <link rel="stylesheet" href="demo.css">

第九步：打开浏览器观察效果如图所示：

4.CSS选择器

上一小节我们学习了css的引入方式，其中内联样式和外部样式都书写了css选择器，那么本小节主要来讲解css的选择器，包括css选择器中的属性。顾名思义：选择器是选取需设置样式的元素（标签），但是我们根据业务场景不同，选择的标签的需求也是多种多样的，所以选择器有很多种，我们只学习最基本的3种
选择器通用语法如下：

选择器名   {
css样式名：css样式值;
css样式名：css样式值;
}

我们需要学习的3种选择器是元素选择器，id选择器，class选择器，语法以及作用如下：

4.1元素选择器

格式：

选择器的名字必须是标签的名字
作用：选择器中的样式会作用于所有同名的标签上

元素名称 {
    css样式名:css样式值；
}

例子如下：


      p{
        color: #00FF00;
        font-size: 30px;
      }

4.2.id选择器:

选择器的名字前面需要加上#
作用：选择器中的样式会作用于指定id的标签上，而且有且只有一个标签

#id属性值 {
    css样式名:css样式值；
}

例子如下：

#{
    color: blue;
}

4.3类选择器

选择器的名字前面需要加上.
作用：选择器中的样式会作用于所有class的属性值和该名字一样的标签上，可以是多个

.class属性值 {
    css样式名:css样式值；
}

例子如下:

.cls{
     color: aqua;
 }

接下来我们需要通过代码来演示3种选择器的作用：
第一步：在IDEA中创建名为10_CSS-选择器.html的文件：

第二步：遵循上述的3种选择器语法，编写如下代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS选择器</title>

<style>
p{
color: #00FF00;
font-size: 30px;
}
#pp{
color: blue;
}

.cls{
color: aqua;
}
</style>
</head>
<body>

<p>CSS元素选择器</p>



<p id="pp">CSS id选择器</p>

<p class="cls">CSS类选择器</p>

</body>
</html>

第三步：打开浏览器，观察效果如下图所示：

叠样式表(Cascading Style Sheets，CSS)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言，CSS备受前端开发者的青睐。本文对基本的CSS元素的基本属性进行介绍。

图片源于网络

CSS的基础元素包括style，本文主要对style中font-size(设置字体大小）和color设置文本颜色两种属性设置这两种属性主要包括三种方式：

第一种：对对象进行内嵌样式，代码如下：

<body>
<a style="font-size:定义对象大小;color=定义对象颜色">对象</a>   
</body>

第二种：对整个文本嵌入样式，代码如下：

<head>
<style type="text/css">
a｛
     font-size:定义字体大小;
     color:定义字体颜色
         ｝
</style>
</head>   //对整个文本进行嵌入样式

第三种：嵌入外部样式表

可以单独创建一个外部样式表（.CSS）文件，CSS文件中的定义方法与第二种类似，然后在HTML中引入该文件，代码示例如下：

<head>
<link rel="stylesheet"  type="text/css" herf="CSS文件名">
 </head>

三种方式中，后两种会经常用到，因为第一种在一个HTML中无法实现同时对两个对象进行样式设置，而后两种可以对多个对象进行样式设计。

另外，当三种在HTML同时层叠出现时，三种方式的优先级：第一种>第二种>第三种。

家都知道在JavaScript原生操作中获取元素的样式，在实际操作是使用时比较频繁的一件事，这里像大家介绍下获取css样式的方法，希望可以帮助一些需要的人，如果有幸被大牛看到，有更好的办法，欢迎提出！！！

一、行内元素样式获取：

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>js获取外部样式</title>
</head>
<body>
 <div id="div" style="width:200px;height:200px;border:3px solid cyan;"></div>
</body>
<script>
 //获取行间样式
 var div=document.getElementById('div');
 var width=div.style.width;
 alert(width);//200px
</script>
</html>

前端全栈学习交流圈：866109386,面向1-3经验年前端开发人员,帮助突破技术瓶颈，提升思维能力

在JS代码中，alert会弹出div元素的width为200px；达到了要获取元素宽度的目的，但是这种简单的方法只适用于获取元素的行内元素样式，并不能获取内部样式和外部样式，在项目中，写入行内元素这种方案并不被大家认同，所以这种方法，只是让大家了解下。

二、非行间样式元素获取：

如果元素样式并非行间样式，利用上面这种方法并不能获取到元素的样式，需要使用另一种方法：

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>js获取内部部样式</title>
 <style>
 #div{
 width: 200px;
 height: 200px;
 border:3px solid cyan;
 }
 </style>
</head>
<body>
 <div id="div""></div>
</body>
<script>
 var div=document.getElementById('div');
 //获取div的width
 var width=window.getComputedStyle(div,null).width;
 alert(width);//200px
 //修改div的width
 div.style.cssText='width:300px;'
</script>
</html>

前端全栈学习交流圈：866109386,面向1-3经验年前端开发人员,帮助突破技术瓶颈，提升思维能力

在上面代码中，使用了window.getComputedStyle('元素',null).'样式',此方法兼容性:火狐谷歌 IE9 获取的为计算后的样式,但是这里需要注意的是用此方法获取的值为只读模式,并不能修改,所以用了style.cssText方式修改了其属性,这里需要注意下书写方式.

三、兼容性:

前段潜规则,凡是好的东西都不能通用,是的,你猜对了,任性的IE并不能使用以上方法,但是IE有自己的方法为currentStyle,用法一样,就不再赘述了,下面直接写出已经处理兼容的代码如下:

var div=document.getElementById('div');
if (div.currentStyle) {
 console.log(div.currentStyle.width);
}else{
　　console.log(getComputedStyle(div,null).width);
}

方法封装:

 if (obj.currentStyle) {
 return obj.currentStyle[name];
 }else{
 return getComputedStyle(obj,false)[name];
 }
}

对前端的技术，架构技术感兴趣的同学关注我的头条号，并在后台私信发送关键字：“前端”即可获取免费的架构师学习资料

知识体系已整理好，欢迎免费领取。还有面试视频分享可以免费获取。关注我，可以获得没有的架构经验哦！！

在线咨询

上一篇：像许昕、刘子歌一样逐梦吧，这所体育运动学校招生啦！
下一篇：JS模块化 - 浅谈 CommonJS requir

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商