Blogger Information
Blog 18
fans 0
comment 0
visits 13235
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
CSS基础知识:元素、文档内容、媒体查询小结
马晓宁
Original
1316 people have browsed it

一. CSS的介绍

CSS:层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS不仅可以静态地装饰网页,还可以配合各种脚本语言动态地对网页各元素进行装饰。

序号术语描述
1cssCascading Style Sheets缩写(层叠样式表)
2样式css 可以影响一个或一组”文档”的表现样式
3文档包括但不限于 html,也包括 xml

二.元素与元素框

是那些在源文档中不会形成新块的元素,这些元素的左右可以放置其他元素。典型的行内级元素有 span、em、strong、a,等等。
根据元素框中内容提供的自身特点,元素又被分为置换元素和非置换元素。

序号术语描述
1置换元素元素框内容由外部资源提供,元素框就是占位符<img>,<input>..
2非置换元素元素框内容用户提供,浏览器生成,如<p>,<span>

示例:

<!DOCTYPE html><html lang="en">  <head>    <meta charset="UTF-8" />    <meta name="viewport" content="width=device-width, initial-scale=1.0" />    <title>Document</title>  </head>  <style type="text/css">    p{background-color: red;}    </style></head><body> <p>非置换元素</p> <input type="text" style="width: 50px;" /> <strong style="width: 100px;">置换元素</strong>          </body></html>

三.元素的显示方式

1.元素类型

序号类型描述
1块级元素默认生成一个填满父级内容区的元素框,且二侧不能有其它元素,如<div>,<p><form>
2行内元素默认在一行文本内生成元素框,不打断所在行,如<a>,<span>
3行内块元素默认在一行文本内生成元素框,不打断所在行,但支持宽高,如<img>

2.display属性

每个元素都可以通过style="display:type控制它的显示类型,即生成什么样的”元素框”
display属性常用值

序号属性值描述
1inline默认行内元素,<span>, <a>
2block块级元素,<div>,<p>
3inline-block行内块级元素,<img>
4list-item块级: 列表元素,<li>
5table块级: 表格元素,<table>
6flex弹性元素
7grid网格元素

示例:

<!DOCTYPE html><html lang="en">  <head>    <meta charset="UTF-8" />    <meta name="viewport" content="width=device-width, initial-scale=1.0" />    <title>Document</title>  </head>  <html>    <head>      <style type="text/css">        p {display: inline;}        div {display: none;}      </style>    </head>    <body>      <p>飞机</p>      <p>火车</p>      <div>汽车</div>      <!-- 汽车浏览器中不显示 -->    </body>  </html></html>

四. css 在html上的应用

1.分类

行内样式,应用于一个
嵌入样式,应用于一类标签
如果我们有很多的网页,都要用css,将这些css写到一个独立文件中,这个就是外链式。
导入式样式,也式将样式写道一个文件中,在导入到文件中。

序号属性值描述备注
1link标签<link rel="stylesheet" href="..." />外部样式
3@import指令@import url(...)  @import '...'外部样式
2<style>元素<style>...</style>内部样式
4style=""属性<tag style="...">行内样式

2.示例

<!DOCTYPE html><html lang="en">  <head>    <meta charset="UTF-8" />    <meta name="viewport" content="width=device-width, initial-scale=1.0" />    <link rel="stylesheet" href="style/style1.css" />    <title>Document</title>  </head>  <body>    <h2>外部样式</h2>    <ul>      <li>前端基础: html5/css3/flex/grid</li>      <li>php开发: php+pdo+mvc+composer</li>      <li>前端进阶: javascript + jquery + layui</li>      <li>Laravel: 实战</li>    </ul>  </body></html>

style1.css文件代码:

ul {  border: 1px solid #ccc;  background-color: #efefef;  padding: 15px 30px 15px;}ul > li {  margin: 10px;}

五. css 文档的内容

样式规则

CSS样式表单是由一条一条的样式规则(style rule)所组成,而样式规则包含选择器(selector)与声明(declaration)两个部分。

  • css 文档中必不可少的内容就是: 样式规则

  • css 语法:selector {property: value;...}

组成描述
selector选择符,或者称”选择器”,决定文档中哪部分受到影响
{property: value;...}声明块,由 “属性” 与 “属性值” 二部分组成

注意事项:
1,空白,换行,属性值的前后必须加上双引号或者单引号。
2,CSS会区分英文字母的大小写。
3,CSS的注释符号是/**/。
4,样式规则可以合并。

六.CSS媒体查询

由于媒体尺寸的多样性,为了能够使同一套代码适配多种尺寸媒体,于是产生了响应式布局。

响应式布局,就是页面能够根据当前媒体的不同应用不同的布局方式,以此达到最佳效果。

布局方式通常由CSS控制,媒体查询可以判断当前媒体类型,从而应用不同的CSS代码。

看如下简单代码实例:

<link href="css/reset.css" rel="stylesheet" type="text/css" media="screen" /><link href="css/style.css" rel="stylesheet" type="text/css" media="all" /><link href="css/print.css" rel="stylesheet" type="text/css" media="print" />

上述代码分析如下:

(1).link元素的media属性用来规定上述CSS代码应用的媒体类型。

(2).screen表示对应CSS文件应用于显示设备。

(3).all表示对应CSS文件应用于所有媒体设备.

(4).print表示对应CSS文件应用于打印机。

(5).即便当前媒体不符合要求,也会下载对应的CSS文件,只是不应用。

media属性也可以用于<style>元素,规定当前css代码应用的媒体类型。

下面罗列一下当前媒体查询常见的媒体类型与媒体属性:

1.媒体类型:

(1).screen:显示屏幕,比如电脑、手机或者pad屏幕。

(2).tty:电传打字机已经等宽字符网格类的设备。

(3).tv:电视等类型的设备。

(4).projection:投影仪等设备。

(5).handheld:一些手持设备。

(6).print:打印机。

(7).braille:盲人专用的一些设备。

(8).aural:语音合成器。

(9).all:表示适用于所有设备。

2.媒体属性:

媒体属性是针对媒体类型的一种细化,比如同是screen显示器设备,但是规格会有所不同。

比如显示区域的尺寸不同,再比如显示器中浏览器视口可以调整到不同的尺寸。

主要媒体属性列举如下:

序号媒体描述符描述
1width显示区域宽度
2min-width显示区域最小宽度
3max-width显示区域最大宽度
4device-width设备显示区域宽度
5min-device-width设备显示区域最小宽度
6max-device-width设备显示区域最大宽度
7height显示区域高度
8min-height显示区域最小高度
9max-height显示区域最大高度
10device-height设备显示区域高度
11min-device-height设备显示区域最小高度
12max-device-height设备显示区域最大高度

3.示例1

<!DOCTYPE html><html lang="en">  <head>    <meta charset="UTF-8" />    <meta name="viewport" content="width=device-width, initial-scale=1.0" />    <title>媒体查询</title>    <style>      h1 {        color: green;      }      body {        background-color: cyan;      }       /* 大于等于500px以下样式有效 */      @media screen and (min-width: 500px) {        h1 {          color: red;        }        body {          background-color: wheat;        }      }    </style>  </head>  <body>    <h1>Hello, 欢迎大家来做客</h1>  </body></html>

示例2

<!DOCTYPE html><html lang="en">  <head>    <meta charset="UTF-8" />    <meta name="viewport" content="width=device-width, initial-scale=1.0" />    <title>Document</title>    <style>      .nav {        height: 50px;        background-color: #eee;        display: flex;        align-items: center;      }      .nav ul {        display: flex;        list-style: none;      }      .nav ul a {        color: #666;        text-decoration: none;        padding: 0 15px;      }      /* 局部媒体查询,当屏幕宽度小于等于400px,不要显示菜单了 */      @media screen and (max-width: 400px) {        .nav ul {          display: none;        }      }    </style>  </head>  <body>    <div class="nav">      <div class="log">LOGO</div>      <ul>        <li>          <a href="">首页</a>          <a href="">视频</a>          <a href="">问答</a>          <a href="">下载</a>        </li>      </ul>    </div>  </body></html>


总结

通过学习CSS可以理解为页面格式,格式和内容的分离,使得HTML文件大小缩小,条例清晰,格式可以多次利用。也就是拿来调节页面格式的一种规则,这种规则可以同时作用于多个页面,一次加载多次利用毫无疑问的使得网页文件大小大大缩小,同时,页面可以统一风格,调节页面也可以统一调节,方便高效。

Correcting teacher:天蓬老师天蓬老师

Correction status:Uncorrected

Teacher's comments:
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post