网页的外观---CSS层叠样式表---01

简介: 网页的外观---CSS层叠样式表---01

一.CSS简介


CSS是什么?CSS,即“Cascading Style Sheet(层叠样式表)”,是用来控制网页的外观的一门技术。HTML、CSS和JavaScript是前端技术中最核心的三个元素。其中:


HTML控制网页的框架结构
CSS控制网页的外观
JavaScript控制网页的行为。



二.CSS的引入方法


css的引入方法有四种:

1.行内样式

<html>
<head>
<meta charset="utf-8">
<title></title>
<body>
<p style="color: #CC0000;">这个是红色字体</p>
</body>
</html>


2.内嵌样式

<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.big{font-size: 30px;}
</style>
</head>
<body>
<p class="big">css样式内容写在style标签内</p>
</body>
</html>


3.外链样式

首先在css目录里建立一个1.css的css文件

p{
  font-size:48px;
}


html文件内容:

<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="css/1.css" />
</head>
<body>
<p>我的大小是48px。</p>
</body>
</html>


4.导入

导入位置可以是在css文件中或者是style标签中。导入语法是@import url(’./xxx.css’)或者@import ‘./xxx.css’

@import url("css/1.css");


或者

@import './xxx.css';



三.层叠关系


1.当属性一致的时候,越在html后面的优先级越高,行内样式的优先级最高,因为行内样式最靠近元素。

<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" type="text/css" href="css/css02.css"/>
    <style type="text/css">
      .red{
        color: #006400;
      }
    </style>
  </head>
  <body>
    <P>css优先级</P>
    <p class="red" style="color: pink;">宁静致远</p>
  </body>
</html>

这里的显示结果是粉色,因为行内样式最靠近元素p。


2.当属性不一致则属性相加。

<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" type="text/css" href="css/css02.css"/>
    <style type="text/css">
      .red{
        color: #006400;
        font-size: 48px;
        font-family: "simsun";
      }
    </style>
  </head>
  <body>
    <P>css优先级</P>
    <p class="red" style="color: pink;">宁静致远</p>
  </body>
</html>


显示结果:


3.加上 !important代表权重最大,不可以覆盖。

<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" type="text/css" href="css/css02.css"/>
    <style type="text/css">
      .red{
        color: red !important; 
        color: #006400;
        color: #DBCBE6;
        font-size: 48px;
        font-family: "simsun";
      }
    </style>
  </head>
  <body>
    <p class="red" style="color: pink;">宁静致远</p>
  </body>
</html>


显示结果:



四.CSS选择器


首先选择器类型有7种:


选择器类型 权重
通配符选择器 0.5
标签选择器 1
class类选择器 10
id选择器 100
包含选择器
群组选择器
直接子集选择器



选择器优先级


表格中的权重越大,优先级越高,而包含选择器,直接子集选择器的权重相加,权重越大,优先级越高。下面介绍这7种选择器:


1.通配符选择器,在style样式里直接加*{color: red;},代表所有的文字颜色皆为红色。


2.标签选择器,在style样式里直接写标签然后加属性

p{ font-size:40px;}
span{ color:red;}

代表html页面中所有的p标签的字大小为40px,所有span标签里的字体颜色均为红色。


3.class类选择器,在头部style里面加类及其属性,在body里面加class。

<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
      .red{
        color: red;
        font-size: 48px;
        font-family: "simsun";
      }
    </style>
  </head>
  <body>
    <p class="red">宁静致远</p>
  </body>
</html>


4.id选择器,在头部style里面加类及其属性,在body里面加class。

<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
      .red{
        color: #DBCBE6;
        font-size: 48px;
        font-family: "simsun";
      }
    </style>
  </head>
  <body>
    <p id="red" >宁静致远</p>
  </body>
</html>


5.包含选择器,类名1 类名2{属性},其中类名2必须是类名1的后代。(中间用空格隔开。)

<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
      ul li{background-color: #125AA2;}
      /* 选择的li标签是ul的后代 */
      /* 尽量在包含选择器中父辈选择类名或者id */
      /* 一般选择器层级不超过三层 */
    </style>
  </head>
  <body>
    <h1>包含选择器</h1>
    <ul>
      <li>ul中的li1</li>
      <li>ul中的li2</li>
      <li>ul中的li3</li>
    </ul>
  </body> 
</html>


6.群组选择器,类名1,类名2,类名3{属性},类名1,类名2,类名3公用下面的属性。(中间用,隔开。)

<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title></title>
    <style type="text/css">
    h1,p,leiming{
      color:red;
          }
    </style>
  </head>
  <body>
    <h1>css选择器</h1>
    <p>选择到html元素,应用css样式</p>
    <div class="leiming">宁静致远</div>
  </body> 
</html>


7.直接子集选择器,类名1>类名2>类名3,其中是类名3必须是类名2的子集,类名2必须是类名1的子集,这样直接控制类名3的属性。(中间用>隔开。)

<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
      ul>li>p{color: #125AA2;}
    </style>
  </head>
  <body>
    <h1>css选择器</h1>
    <p>选择到html元素,应用css样式</p>
    <ul>
      <li  id="myid">id选择器</li>
      <li class="odd">class类选择器</li>
      <li>包含选择器</li>
      <li><p>标签选择器</p></li>
      <li>通配符选择器</li> 
  </body> 
</html>

这里只有p标签选择器的文字颜色会变红。



五.css优先级


1.有!important 修饰符最高

2.css越靠近元素的优先级越高

3.选择器一致的情况下style行内样式优先级高,同样的css,后面的会覆盖前面。


未完待续…

相关文章
|
2天前
|
缓存 移动开发 JavaScript
WKWebView对网页和js,css,png等资源文件的缓存机制及如何刷新缓存
WKWebView对网页和js,css,png等资源文件的缓存机制及如何刷新缓存
12 1
|
6天前
|
Web App开发 前端开发 JavaScript
只需一行CSS代码,让长列表网页的渲染性能提升几倍以上!
只需一行CSS代码,让长列表网页的渲染性能提升几倍以上!
|
7天前
|
前端开发 JavaScript UED
CSS顶部与JS后写:网页渲染的奥秘
CSS顶部与JS后写:网页渲染的奥秘
|
9天前
|
前端开发
实践任务:项目介绍与项目准备+制作网页头部和导航+制作banner和最新更新栏目+制作苹果之家栏目+制作底部版权区域与CSS代码优化+制作Apple独家栏目
实践任务:项目介绍与项目准备+制作网页头部和导航+制作banner和最新更新栏目+制作苹果之家栏目+制作底部版权区域与CSS代码优化+制作Apple独家栏目
8 1
|
9天前
|
缓存 前端开发 JavaScript
【专栏:HTML与CSS移动端开发篇】移动端网页性能优化策略
【4月更文挑战第30天】本文探讨了移动端网页性能优化的重要性,并提出了优化策略。HTML方面,建议精简结构、使用语义化标签、异步加载脚本和压缩文件;CSS优化包括精简样式、使用CSS3动画、媒体查询和压缩文件。其他策略涉及图片和字体压缩、缓存利用、数据压缩、减少HTTP请求及根据网络状态调整加载。综合运用这些策略能提升网页性能和用户体验。
|
1天前
|
前端开发 JavaScript
HTML DOM如何通过JavaScript动态改变元素的CSS样式?
【5月更文挑战第23天】HTML DOM如何通过JavaScript动态改变元素的CSS样式?
3 1
|
9天前
|
移动开发 HTML5
HTML5/CSS3粒子效果进度条代码
HTML5/CSS3进度条应用。这款进度条插件在播放进度过程中出现粒子效果,就像一些小颗粒从进度条上散落下来
23 0
HTML5/CSS3粒子效果进度条代码
|
9天前
|
移动开发 前端开发 JavaScript
:掌握移动端开发:HTML5 与 CSS3 的高效实践
:掌握移动端开发:HTML5 与 CSS3 的高效实践 “【5月更文挑战第6天】”
28 1
|
9天前
|
缓存 移动开发 前端开发
【专栏:HTML与CSS前端技术趋势篇】HTML与CSS在PWA(Progressive Web Apps)中的应用
【4月更文挑战第30天】PWA(Progressive Web Apps)结合现代Web技术,提供接近原生应用的体验。HTML在PWA中构建页面结构和内容,响应式设计、语义化标签、Manifest文件和离线页面的创建都离不开HTML。CSS则用于定制主题样式、实现动画效果、响应式布局和管理字体图标。两者协同工作,保证PWA在不同设备和网络环境下的快速、可靠和一致性体验。随着前端技术进步,HTML与CSS在PWA中的应用将更广泛。
|
9天前
|
前端开发 JavaScript 开发者
【专栏:HTML与CSS前端技术趋势篇】前端框架(React/Vue/Angular)与HTML/CSS的结合使用
【4月更文挑战第30天】前端框架React、Vue和Angular助力UI开发,通过组件化、状态管理和虚拟DOM提升效率。这些框架与HTML/CSS结合,使用模板语法、样式管理及组件化思想。未来趋势包括框架简化、Web组件标准采用和CSS在框架中角色的演变。开发者需紧跟技术发展,掌握新工具,提升开发效能。