`

CSS表现形式

CSS浏览器嵌入式XHTML 
阅读更多

CSS插入XHTML方式：

外部样式表-独立的一个文件（myStyles.css）

<head><link rel="stylesheet" type="text/css" href="样式表的URL"/></head> 

内联样式表

<h1 style="color:red;">……</h1>

嵌入式样式表

<head><style type="text/css">…………<style></head>

<head><style type="text/css">@import url(myStylses.css);<style></head>

——在嵌入表中引入外部表

link

@import——当你的网页须要引入多个外部CSS文件时.你可以运用 link引入一个CSS,然后在这个CSS文件中用@import形式引入其它多个 CSS文件

  • 样式继承

不可继承——margin、padding、border、background

可被继承——

计算值继承——front-size 

  • 样式层叠

优先级：

  浏览器默认<用户自定义(normal)<网页设计师编写(normal)<网页设计师编写(import)<用户自定义(import)

排放次序判断

  1. 找出选择器对特定元素的所有声明
  2. 根据样式声明重要性(!import)和来源进行优先级排序——浏览器默认<用户自定义(normal)<网页设计师编写(normal)<网页设计师编写(import)<用户自定义(import)
  3. 特殊性排序-制定更详细的选择器将覆盖更一般的选择器。特殊性：a(内联)>b（id选择器数量）>c（属性（类、伪类）选择器数量）>d（元素（元素、伪元素）选择器数量）
  4. CSS规则在文档中出现顺序——后出现的>先出现的>@import(样式表本身规则前出现)

z-index

z-index在设置了position=absolute/relative时有效

值较高的覆盖较低的

z-index=-1时元素在默认文本下

<style type="text/css">

middle{position:absolute;left:60px;top:60px;z-index:2;background-color:orange;}

</style>

  • 效果控制：

制定裁剪区域（clip）

<style text="text/css">

  img{position:absolute;clip:rect(50px 200px auto auto);}

</style>

设置元素可见性

display——none、block（块级）、inline（内嵌级）

visibility——visible（可见）、hidden（影藏）、inherit（继承；默认值）

两者的区别在于visibility属性定义的元素任然保留原来的显示空间

  • CSS控制的区域：  

单位

 长度单位

 绝对长度——用于打印输出设备

  mm

 

  in

 

  pt

 点

  pc

 picas

 相对长度——浏览器的系统默认值

 em

ems 当前字体中M字母宽度

 px

 像素

 ex

 exes当前字体中X字母高度

 颜色单位

 百分比

rgb 

 整数值

 rgb

 十六进制

 #fc0eab;#c96==#cc9966

 颜色名

aqua（水绿/black（黑/blue（蓝/ fuchsia（紫红/ gray（灰/ green（绿/lime（浅绿/ maroon（褐/navy（深蓝/ olive（橄榄/purple（紫/red（红/silver（银/teal（深青/white（白/yellow（黄/transparent(透明

 URL单位

 

 

 字体

font-style（倾斜程度）normal、italic=oblique

font-variant（字体变形）normal、small-caps

font-weight（粗细）100、200、300、400=normal、500、600、700=bold、800、900、lighter、bolder

font-size（大小）xx-small、x-small、small、medium、large、x-large、xx-large

font-family（字体名）times new Roman、Arial、Verdana

元素内容文本属性

text-indent(首行缩进)

text-algn（对齐方式）left、right、center

vertical-align

text-decoration（文本装饰）none、underline、overline、line-through、blink

text-shadow（文本阴影）none、color值

line-height（行高）normal、auto

word-spacing（词间距）——空格为词的分割线

letter-spacing（字间距）

text-transform（大小写形式）capitalize（词首大写——空格为分隔符）、uppercase、lowercase、none

white-space normal pre nowrap(不换行)

背景和颜色

color 16进制、rgb()、颜色名字

background

#idDiv{bachground:red url(rdl_cup.jpg) no-repeat scroll right bottom}

background-color transparent

background-image

background-repeat repeat no-repeat repeat-x repeat-y

background-position {1,2} top/center/buttom||left/center/right

background-attachment scroll fixed

定位

在正常流中，文本元素按从上到下、从左到右的格式布局。——块级元素从上到下，内嵌元素从左到右。

正常流中的元素影响其相邻元素的位置

 容器快

  1. 初始化容器快——根元素（html）
  2. 块级元素、表格单元的内容区——静态或相对定位的费根元素
  3. 不是静态定位（relative、absolute、fixed）的祖先元素——绝对定位的非根元素——祖先元素为块级元素：容器块扩充到该元素的padding边缘；祖先元素是内嵌元素的容器快为内容区；无祖先元素的为初始化块

定位（position top、right、bottom、left）

  • 静态定位(static)——系统默认，按照它们在HTML的出现顺序生成。
  • 相对定位(relative)——相对于他在正常情况下的默认位置。去而留其位(不影响文本流中接下来的其它层的位置)，可能覆盖其它元素
    <style type="text/css">
    div{position:relative;height:80pc;width:80px;}
    .style1{left:30px;top:30px;border:1px solid black;margin-bottom:10px;background-color:#acd373;}</style>
  • 绝对定位(absolute)——孤立（脱离流）、空间被释放、相对其容器块定位
     <style type="text/css">
    .style{position:absolute;top:10px;left:10px;}</style>
     溢出（overflow）
    visible——默认值；不裁剪、无滚动、强制显示全部内容
    hidden——裁剪多余内容、
    scroll——裁剪多余内容、有滚动
    auto

<style type="text/css">

<div{width:250px;height250px;position:absolute;overflow:scroll;}

</style>

  • 固定定位(fixed)——孤立、相对视口=viewpoint（浏览器窗口）定位——永远显示在视区内。

浮动（float）——none、left、right

功能：多列的网页布局、从无序列表创建导航工具条、不使用表格而创建内饰表格的对齐方式

  1. float!=none时，元素被视为块级元素
  2. 浮动文本类型元素必须制定width
  3. 浮动元素margin不会重合
  4. 浮动元素在内容区内，不进padding
  5. 相邻的浮动元素向同一方向移动——直到碰到父级内边缘或前面的浮动元素
  6. 超过容器宽度的元素向相反方向浮动
  7. 浮动的内嵌元素顶部低于前面的块级元素
  8. 浮动元素顶部低于前一浮动元素
  9. 清除浮动clear:none/left/right/both

 <style>img {float:right;margin:2opx;

clear:ri}

</style>

布局

元素盒：每个元素都会产生一个矩形盒子围绕在元素类容之外

元素的背景（颜色和图）在内边距区域可见，且延伸到边框下

元素盒总宽度=margin+border+padding+width

padding—防止边框挤压内容，

背景填充padding；padding不重合 

border：1个到4个围绕在元素内容和内边距的线

边框样式

none

double

groove

ridge

 inset

outset

dotted

>dashed

solid

  1. 非可替换内嵌元素不受border影响
  2. 可替换元素受影响
  3. 上、右、下、

<h1 style="border:.5em(border-width) outset(border-style) red(border-color)"hello</h1>

margin{margin-top margin-right margin-bottom margin-left}：

  1. 外边距是透明的，其上显示的是父级的背景。 
  2. margin为负数时，突破父级元素与页面其它元素重叠
  3. 正常文档流中相邻块级元素垂直外边距重合——取其大。
  4. 浮动元素、绝对定位元素、内嵌元素垂直外边距不会重合

h1{margin:3px 20px 3px 20px;}  

width和height：——可以设置块级元素和内嵌可替换元素（图片）；不可以设置内嵌文本元素=不可替换元素（文本）

 不可替换元素+display:block—>块级元素

列表格式

项目图片

list-style-image

项目符号

 list-style-type disc/circle/square/decimal/lower-roman/upper-roman/lower-alpha/upper-aloha/none

分享到：
| CSS语法
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    强大的CSS3动画库animate.css 50多种动画形式

    **CSS3 动画库 animate.css 深度...它不仅提高了开发效率，而且丰富了网页的视觉表现，增强了用户体验。无论你是初学者还是经验丰富的开发者，animate.css都是一个值得尝试的工具，它能让你的网站或应用更加生动有趣。

    css样式模板_css_

    CSS控制着元素的布局、颜色、字体、间距以及更多视觉效果，使网页具有丰富的表现力和良好的可维护性。本资源“css样式模板”显然提供了一些预设的CSS样式，帮助开发者快速搭建网站或应用的外观。 首先，我们来了解...

    6种css帮助文档、手册(包括duv+css大全、样式源码、cssfilter、css2.0中文手册、Cascading Style Sheet 样式表中文手册)

    它允许我们独立于内容来定义表现形式，使得网页布局更加灵活且易于维护。这个压缩包包含了六种CSS相关的帮助文档和手册，这些资源对于学习和精通CSS至关重要。以下将对每个文件进行详细阐述： 1. **div+css大全**：...

    CSS经典教程.pdf

    - 值（Value）：指定样式的表现形式。 - 示例：`body { color: blue; }` #### 五、样式属性示例 - **颜色表示方法**： - 英文单词：如`color: red;` - 十六进制颜色值：如`color: #ff0000;`或简化写法`color: ...

    CSS权威指南 第3版

    CSS作为一种样式表语言，能够让开发者将内容与表现形式分离，使得网页内容更加灵活和可维护。 本书通常会涵盖以下知识点： 1. CSS的基本概念：介绍CSS的历史背景、作用和优势。讲解CSS与HTML的关系以及CSS规则的...

    CSS基础教程;Beginning CSS Web Development光盘源码

    CSS是一种样式表语言，它分离了网页内容（HTML或XML）与其表现形式。通过使用CSS，我们可以定义文本样式、颜色、布局以及页面的其他视觉元素。这使得网站可以更加灵活地管理和更新，同时保持一致的设计风格。 教程...

    CSS2中文参考手册+CSS浮动

    - **文本处理**: CSS2提供了一系列文本属性，如字体、字号、行高、对齐方式、颜色和文字阴影，丰富了文本的表现形式。 - **图像与媒体**: CSS2支持背景图像的使用，可以进行裁剪和定位，还定义了针对不同媒体类型...

    CSS2中文版

    同时，还引入了文本阴影（`text-shadow`）和文本装饰（`text-decoration`）等功能，丰富了文本的表现形式。 ### 9. 媒体查询 虽然CSS2没有完全实现媒体查询，但它的`media`规则为后续的CSS3媒体查询奠定了基础。这...

    css全攻(全面介绍CSS)

    它的主要目的是将网页的内容与表现形式分离，使开发者可以更加灵活地控制页面的视觉效果，同时也便于维护和更新。 #### CSS的重要性及历史 自CSS问世以来，它已经成为网页设计中不可或缺的一部分。随着互联网技术...

    DIV+CSS完美布局

    这意味着在布局过程中，应先关注内容的语义和结构，再考虑其表现形式。 - **结构化HTML**：在设计网页时，应优先考虑内容的结构和语义，而非外观。这意味着使用合适的HTML标签来组织内容，如使用`&lt;div&gt;`、`...

    css3实现波纹特效、H5实现动态波浪效果

    CSS3实现波纹特效和H5实现动态波浪效果是前端网页设计中常见的视觉表现形式，主要通过CSS3的相关属性和方法来创建动态和富有美感的视觉效果，以下详细说明这些知识点。 首先，CSS3是HTML5的主要样式表语言，其通过...

    免费的CSS初级教程下载

    - **分离内容与表现**：CSS（层叠样式表）的主要优势在于它能够将网页的内容与表现形式分离，这意味着开发者可以在不影响网页结构的情况下单独修改其外观。这种方式极大地简化了网站的设计与维护过程。 - **增强布局...

    css pdf书籍

    CSS（层叠样式表）是一种用于描述网页表现形式的语言，它能够控制网页在浏览器中的外观和布局。通过CSS，网页设计师可以将网页内容与它的表现形式分开，使得网页结构更加清晰，从而降低网页的维护成本和提高开发效率...

    CSS及其应用 书籍

    - **解析**：这个例子展示了如何通过不同的背景图片和颜色来表现不同季节的主题。同时，还定义了超链接的基本样式（无下划线）以及鼠标悬停时的颜色变化。 - **应用**：在HTML文件中引用`season.css`，并通过`class`...

    css样式表及其调用

    它分离了文档结构与表现形式，使得内容与显示方式得以独立，使得网页设计更加灵活，易于维护。在本教程中，我们将深入探讨CSS的各个方面，以及如何有效地调用和应用它们。 1. CSS基础概念： - 选择器：选择器是CSS...

    css叠层样式大全表

    通过使用CSS样式设置页面的格式，可将页面的内容 与表现形式分离。页面内容存放在HTML文档中，而用于定义表现形式的CSS规则则存放在另一个文件中或HTML文档的某一部分，通常为文件头部分。将内 容与表现形式分离，...

    CSS2中文手册

    `list-style`属性允许自定义列表项的标记，包括类型、位置和图像，丰富了列表的表现形式。 8. **表格样式** CSS2允许对表格进行更细致的样式控制，包括表格边框合并、单元格间距和填充，以及表头的垂直对齐方式。...

    js与css样式对照

    ### JS与CSS样式对照知识点详解 #### CSS样式与JavaScript属性对照表 在Web开发中，JavaScript经常被用来...这种对照对于实现动态样式调整非常有用，可以帮助开发者更好地控制网页的表现形式，实现更复杂的交互效果。

    css教程css理解

    - **内容与表现分离**: CSS的主要目的是解决早期HTML中内容与表现难以分离的问题。通过将样式移到外部文件，可以更好地管理网页的外观，同时保持内容的清晰度。 #### 二、CSS的发展背景 - **HTML4.0**: 在HTML4.0...

Magicbox
Global site tag (gtag.js) - Google Analytics