web03.CSS层叠样式表

最新推荐文章于 2024-06-16 22:13:37 发布
最新推荐文章于 2024-06-16 22:13:37 发布
阅读量138 收藏
点赞数
分类专栏： WEB前端学习笔记 文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qvwvq/article/details/118906287
版权

web03.CSS层叠样式表

1.CSS概述

1.1.CSS 历史

  • CSS（Cascading Style Sheets，层叠样式表）是一种将表示样式应用到标记的系统。CSS以设计、改变其HTML页面的样式而知名，并使用于Web和其他媒介，如XML文档中。1996年12月W3C推出了CSS规范的第一个版本，1998年W3C发布了CSS的第二个版本即CSS2.0,2001年5月W3C开始进行CSS3标准的制定，到目前为止该标准还没有最终定稿。

    • CSS 1.0

      • 选择器：派生选择器、ID选择器和类选择器，用来定义希望应用样式的HTML元素或者标签。
      • 样式属性：该属性主要包括Font字体、Text文本、Background背景、Position定位、Dimensions尺寸、Layout布局、Margin外边框、Border边框、Padding内边框、List列表、Table表格和Scrollbar滚动条等，用于定义网页的一些样式变化。
      • 伪类属性：主要定义了针对描述对象a的link、hover、active、visited和针对节点的first-letter、first-child、first-line等几个伪类属性。
      • 保存方式：用户可以直接存储在HTML网页中，也可以将CSS样式代码存储为独立的样式表文件。

    • CSS 2.0

      • 选择器：CSS 2.0提供了更多强大的选择器，用来定位HTML节点或者标记。
      • 位置模型：在CSS2中进一步增强了位置属性功能，增加了relative、absolute和fixed等几个值。
      • 布局、表格样式：CSS 2对display属性进行了扩充，可用该属性指定元素是否会显示以及如何显示，也可以使用该属性配合位置和浮动进行页面的布局。另外，用户还可以将一个非表格的结构化文档显示为一个表格样式。
      • 伪类：CSS2增加了focus（将样式添加到被选中的元素）、：first-child（将特殊的样式添加到元素的第一个子元素）、：lang（允许创作者来定义指定的元素中使用的语言）。
      • 光标样式：增加了cursor属性，用于指定设备应该显示怎样的光标类型。

    • CSS 3

    • 早在2001年，W3C 就着手开始准备开发CSS第三版规范。虽然完整的、规范权威的CSS 3标准还没有尘埃落定，但是各主流浏览器已经开始支持其中的绝大部分特性。

  • CSS 是开放网络的核心语言之一

1.2.CSS的优点

  • 1.能够使代码精简，使用div+css布局使代码很是精简，css文件可以在网站的任意一个页面进行调用，避免了使用table表格修改部分页面。
  • 2.提升了网页访问速度，div+css布局较传统的Table布局比较，减少了许多代码，其浏览访问速度自然得以提升，从而提升了网站的用户体验度。
  • 3.有利于优化。采用div-css布局的网站对于搜索引擎很是友好，简洁、结构化的代码更加有利于突出重点和适合搜索引擎抓取。
  • 4.浏览器兼容性 。DIV+CSS更容易出现多种浏览器不兼容的问题，主要原因是不同的浏览器对web标准默认值不同。
  • 5.需要注意的是，网页不喜欢一个页面有太多的css代码，否则同样会影响蜘蛛的爬行，影响搜索引擎的收录，所以采用外部调用的方式调用CSS是非常不错的方法。

1.3.CSS的使用方法

  • 1.3.1.内联式Inline（也叫行内样式）

    • 格式：<p style="color:blue;font-family:隶书">在HTML中如何使用css样式</p
    • 特点：仅作用于本标签

  • 1.3.2. 嵌入式（也叫内页样式)

    • 格式： <style type="text/css">....</style>
    • 特点：作用于当前整个页面

  • 1.3.3.外联式（也叫外部样式）

    • 格式： <link href="文件名.css" type="text/css" rel="stylesheet"/>
    • 特点：作用于整个网站

  • 1.3.4.导入式

    • <style>
@import url(style.css);
</style>

    • 特点：作用于整个网站

  • 1.3.5.CSS的注释

  • 1.3.6.不同引入方式优先级

    • 当样式冲突时，就采用就近原则，
    • 若没有样式冲突则采用叠加效果。
    • 注意:他们的优先级：内联式 > 嵌入式 > 外联式。

2.CSS选择器

2.1.CSS基础语法

  • 格式： 选择器{ 属性:值；属性:值;…}。

2.2.ID选择器

  • id 选择器通过#名字{属性:值；属性:值;}来修改样式。
  • 注：ID选择器的名字声明不能使用数字开头，ID选择器只能用在一个标签上。

2.3.Class选择器

  • class 选择器用于描述一组元素的样式，class可以在多个元素中使用。
  • 注：Class选择器的名字声明不能使用数字开头，Class选择器可以用多个标签上。

2.4.标签选择器

2.5.通配符选择器

  • *选择器选取所有元素。

2.6.组合选择器

  • 1.后代选择器 ：选择所有被E元素包含的F元素，中间用空格隔开。
  • 2.子代选择器：选择所有作为E元素的直接子元素F，对更深一层的元素不起作用，中间用>表示。
  • 3.相邻兄弟选择器:选择紧跟E元素后的F元素，用+表示，选择相邻的第一个兄弟元素，中间用+表示。
  • 4.通用兄弟选择器：选择E元素之后的所有兄弟元素F，作用于多个元素，中间用~表示。
  • 5.多元素选择器：同时匹配所有指定的元素，中间用，表示。

3.伪类和属性选择器

3.1.伪类选择器

  • 1.a:link没有接触过的链接。
  • 2.a:hover鼠标放在链接上的状态。
  • 3.a:active在链接上按下鼠标时的状态。
  • 4.a:visited访问过的链接。

3.2. :xxx-child 选择器

  • 1.:first-child 选择器：匹配其父元素中的第一个子元素。

  • 2.:last-child 选择器：用来匹配父元素中最后一个子元素。

  • 3.:nth-child(n) 选择器：匹配父元素中的第 n 个子元素，元素类型没有限制。奇数和偶数是可以作为

  • 关键字使用，用于相匹配的子元素，其索引是odd等同于nth-child(2n-1)或even等同于nthchild(2n)，nth-child(an+b) 公式计算 n可以为0。

  • 4.:only-child 选择器：匹配属于父元素中只有一个子元素的选择器。

  • 5.:empty选择器：选择每个没有任何子级的元素（包括文本节点）。

  • 6.:not(selector) 选择器：匹配每个元素是不是指定的元素/选择器。

  • 7.:focus选择器：用于选择具有焦点的元素。

  • 8.:checked 选择器：匹配每个选中的输入元素（仅适用于单选按钮或复选框）。

  • 9.before 选择器在被选元素的“内容”前面插入内容，用来和content属性一起使用。

  • 10.after选择器在被选择元素的“内容”后面插入内容，用来和content属性一起使用。

  • 使用before和after来写小三角形:

    • <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>伪类选择器</title>
<style>
.demo:after{
content: '';
display: inline-block;
width: 0;
height: 0;
border: 8px solid transparent;
border-left: 8px solid #AFABAB;
position: relative;
top: 2px;
left: 10px;
}
</style>
</head>
<body>
<div class="demo">这是一个测试</div>
</body>
</html>

3.3.属性选择器

  • 属性选择器可以根据元素的属性及属性值来选择元素。如果希望选择有某个属性的元素，而不论属性值是什么，可以使用简单属性选择器
  • 选择器[attribute] 用于选取带有指定属性的元素。
    选择器[attribute=value] 用于选取带有指定属性和值的元素。
    选择器[attribute~=value] 用于选取属性值中包含指定词汇的元素。
    选择器[attribute|=value] 用于选取带有以指定值开头的属性值的元素，该值必须是整个单词。
    选择器[attribute^=value] 匹配属性值以指定值开头的每个元素。
    选择器[attribute$=value] 匹配属性值以指定值结尾的每个元素。
    选择器[attribute**=value*] 匹配属性值中包含指定值的每个元素。
  • 1.设置 target 属性的 <a>元素设置样式。
    2.设置target="_blank"的<a> 元素设置样式。
    3.设置 titile 属性包含单词 “flower” 的元素，并设置其样式。
    4.设置 langer 属性值以 “en” 开头的元素，并设置其样式。
    5.设置class 属性值以 “test” 开头的所有 div 元素的字体颜色。
    6.设置 class 属性值以 “test” 结尾的所有 div 元素的字体颜色。
    7.设置 class 属性值包含 “test” 的所有 div 元素的字体颜色。

4.CSS继承和优先级

4.1.CSS的继承

  • 继承是CSS的一个主要特征，继承是一种机制，它允许样式不仅可以应用于某个特定的元素，还可以应用于它的后代。

4.2. CSS的优先级

  • 权重的概念

    • 权重，是一个相对的概念，是针对某一指标而言。某一指标的权重是指该指标在整体评价中的相对重要程度。
    • 权重系数，是表示某一指标项在指标项系统中的重要程度，它表示在其它指标项不变的情况下，这一指标项的变化，对结果的影响。

  • CSS中的权重

    • 每一个CSS的选择器都有一个相对的重要程度值，也就是权重的值，简称“权值”；
    • CSS通过CSS选择器的权重占比，来计算CSS选择规则的总权值，从而确定定义样式规则的优先级次序。
    • 所谓CSS优先级，即是指CSS样式在浏览器中被解析的先后顺序，样式表中的特殊性描述了不同规则的相对权重，

  • CSS优先级规则

    • 1.CSS选择规则的权值不同时，权值高的优先。
    • 2.CSS选择规则的权值相同时，后定义的规则优先。
    • 3.CSS属性后面加 !important 时，无条件绝对优先。

  • 权值等级划分

    • 1.内联样式，如 style=""，权值为 1,0,0,0。
    • 2.ID选择器，如 #id="", 权值为 0,1,0,0。
    • 3.calss | 伪类 | 属性 选择器，如 .class | :hover,:link,:target | [type], 权值 0,0,1,0。
    • 4.标签 | 伪元素 选择器，如 p | ::after, ::before, ::fist-inline, ::selection, 权值 0,0,0,1。
    • 5.通用选择器（*），子选择器（>）， 相邻同胞选择器（+）等选择器不在4等级之内，所以它们的权值都为 0,0,0,0。

  • 权值计算公式

    • 权值 = 第一等级选择器 * 个数，第二等级选择器 * 个数，第三等级选择器 * 个数，第四等级选择器 *个数。

  • 权值比较规则

    • 低等级的选择器，个数再多也不会越等级超过高等级的选择器的优先级的。

  • 总结

    • 1.先从高等级进行比较，高等级相同时，再比较低等级的，以此类推。
    • 2.完全相同的话，就采用 后者优先原则（也就是样式覆盖）。
    • 3.CSS属性后面加 !important 时，无条件绝对优先（比内联样式还要优先）。

5.CSS背景属性

  1. background-color 设置颜色作为对象背景颜色。

  2. background-image 设置图片作为背景图片。

  3. background-repeat 设置背景平铺重复方向。

  4. background-position 设置或检索对象的背景图像位置。

6.CSS文本属性

text-indent 像素 首行缩进

text-align left左/right右/center居中 文本的位置

text-transform capitalize(首字母)|uppercase大写|lowercase小写 文本的大小写

text-decoration none无、underline下画线，line-through贯穿线 文本的画线

text-shadow x轴/y轴/模糊度/颜色 文本的阴影

letter-spacing 像素 文字的间距

word-spacing 像素 单词的间距

line-height 像素 行高

color 颜色属性 颜色

7.CSS字体属性

font-size 像素 字体大小

font-family 字体库中的字体C:\Windows\Fonts 字体

font-style normal/italic/inherit/oblique 字体效果

font-weight normal/lighter/bold/bolder 字体加粗

font-variant normal/small-caps 文本字母

8.CSS边框属性

8.1.复合写法

/*
样式效果应用在四条边
顺时针，上右下左
*/
width:200px;
height:200px;
border-width:1px;
border-style:solid;
border-color:red;

8.2.一个值

/*
样式效果应用在四条边
顺时针，上右下左
*/
width:200px;
height:200px;
border-width:1px;
border-style:solid;
border-color:red;

8.3.两个值

 /*
 样式效果应用在四条边
 两个值得时候应用在上下 左右8.5. 写三个值
 8.6. 写四个值
 */
 width:200px;
 height:200px;
 border-width:1px 2px;
 border-style:solid dashed;
 border-color:red blue;

8.4.写三个值

 /*
 样式效果应用在四条边
 两个值得时候应用在上 左右 下
 */
 width:200px;
 height:200px;
 border-width:1px 2px 3px;
 border-style:solid dashed double;
 border-color:red blue yellow;

8.5.写四个值

 /*
 样式效果应用在四条边
 两个值得时候应用在上 右 下 左                             
  */
 width:200px;
 height:200px;
 border-width:1px 2px 3px 4px;
 border-style:solid dashed double dotted;
 border-color:red blue yellow green;

8.6.边框样式

  • dotted 点状轮廓
  • dashed 虚线轮廓
  • solid 实线轮廓
  • double 双线轮廓

8.7.圆角边框

 div{
 width:200px;
 height:200px;                                                                                              background-color:#fff;
 border:5px solid green;
 线的粗细 线的形状 线的颜色
 border-color:green yellow pink;
 border-style:ridge groove outset inset;
 border-width:10px 20px 30px 40px;
 }

9.CSS颜色属性

9.1. HSL颜色

  • 通过对色调(H)、饱和度(S)、亮度(L)三个颜色通道的变化以及它们相互之间的叠加来得到各式各样的颜色。

    • 色调 0-360
    • 饱和度 0%-100%
    • 亮度 0%-100%
    • 透明度 0-1

9.2.HSLA颜色

  • HSLA颜色:色调(H)、饱和度(S)、亮度(L)、透明度(A)。A:Alpha透明度。取值0~1之间。

9.3.RGB颜色

  • RGB颜色:红®、绿(G)、蓝(B)三个颜色通道的变化。

    • R红色 0-255或0%-100%
    • G绿色 0-255或0%-100%
    • B蓝色 0-255或0%-100%
    • A透明度 0-1

9.4. RGBA颜色

  • RGB颜色:红®、绿(G)、蓝(B)三个颜色通道的变化。
  • A:Alpha透明度。取值0~1之间。

9.5.十六进制色彩的表示方式

  • 颜色构成：红绿蓝
  • 取值范围：0-9 a-f

9.6.英文单词

  • red,yellow,pink,green,blue。

10.CSS margin和padding属性

10.1.margin

  • 1.margin 外边框元素区域。margin 没有背景颜色，是完全透明的。
  • 2.margin 可以单独改变元素的上，下，左，右边距，也可以一次改变所有的属性。

10.2.padding

  • 1.当元素的 padding（填充）内边距被清除时，所释放的区域将会受到元素背景颜色的填充。
  • 2.padding可以单独改变元素的上，下，左，右边距，也可以一次改变所有的属性。

11.CSS定位和浮动属性

11.1.定位属性

  • position 属性指定了元素的定位类型。

  • 定义建立元素布局所用的定位机制。任何元素都可以定位，不过绝对或固定元素会生成一个块级框，而不论该元素本身是什么类型。相对定位元素会相对于它在正常流中的默认位置偏移。

  • 元素可以使用的顶部，底部，左侧和右侧属性定位。然而，这些属性无法工作，除非是先设定position属性。他们也有不同的工作方式，这取决于定位方法。

  • 属性

    • position absolute(绝对定位)
    • position fixed(固定定位)
    • position relative（相对定位）
    • position static默认值（不适用定位）
    • position z-index（层叠顺序）

11.2.浮动属性

  • Float 属性定义元素在哪个方向浮动。以往这个属性总应用于图像，使文本围绕在图像周围，不过在 CSS 中，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。

  • CSS 的 Float（浮动）使元素脱离文档流，按照指定的方向（左或右发生移动），直到它的外边缘碰到包含框或另一个浮动框的边框为止。

  • 文档流是文档中可显示对象在排列时所占用的位置/空间，而脱离文档流就是在页面中不占位置了。

  • 属性

    • float 浮动属性
      • left 左浮动
      • right 右浮动
      • clear 清除浮动
      • both 清除左右浮动
      • left 清除左浮动
      • right 清除右浮动

11.3.清除浮动的影响

  • 浮动元素会造成父元素高度塌陷。

  • 解决办法

    • 设置父布局的高度

      • 设置父标签合适的高度，前提必须确定子布局的高度，来计算父布局的合适高度，包裹住子布局。

  • 受影响的元素加clear属性

12.属性转化

12.1.属性转化

  • display 属性规定元素应该生成的框的类型。这个属性用于定义建立布局时元素生成的显示框类型。对于HTML 等文档类型，如果使用 display 不谨慎会很危险，因为可能违反 HTML 中已经定义的显示层次结构。

  • display属性

    • none 此元素不会被显示。
    • block 此元素将显示为块级元素，此元素前后会带有换行符。
    • inline 默认。此元素会被显示为内联元素，元素前后没有换行符。
    • inline-block 行内块元素。（CSS2.1 新增的值）
    • table 此元素会作为块级表格来显示（类似 ），表格前后带有换行符
    • inline-table 此元素会作为内联表格来显示（类似 ），表格前后没有换行符。
    • inherit 规定应该从父元素继承 display 属性的值。

12.2.隐藏方法的不同之处

  • 1display:none; 隐藏自己，隐藏后原位置不保留。
  • 2 visibility:hidden; 隐藏自己，隐藏后原位置保留。
  • 3 opacity:0; 隐藏自己，隐藏后原位置保留。
  • 4 overflow:hidden; 溢出部分隐藏。

13.CSS盒模型和元素溢出

13.1.CSS盒模型

  • CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：**边距（margin），边框（border），填充（padding），和实际内容（content）。**盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。

    • 1.Margin(外边距) - 清除边框外的区域，外边距是透明的。
    • 2.Border(边框) - 围绕在内边距和内容外的边框。
    • 3.Padding(内边距) - 清除内容周围的区域，内边距是透明的。
    • 4.Content(内容) - 盒子的内容，显示文本和图像。

13.2.标准盒模型

  • 根据 W3C 的规范，元素内容占据的空间是由 width 属性设置的，而内容周围的 padding 和 border 值是另外计算的；即在标准模式下的盒模型，盒子实际内容（content）的width/height=我们设置的width/height;盒子总宽度/高度=width/height+padding+border+margin。

13.3.怪异盒模型

  • 在该模式下，浏览器的 width 属性不是内容的宽度，而是内容、内边距和边框的宽度的总和；即在怪异模式下的盒模型，盒子的（content）宽度+内边距padding+边框border宽度=我们设置的width(height也是如此)，盒子总宽度/高度=width/height + margin 。

13.4.元素溢出

  • CSS overflow 属性用于控制内容溢出元素框时显示的方式。

    • visible 默认值。内容不会被修剪，会呈现在元素框之外。
    • hidden 内容会被修剪，并且其余内容是不可见的。
    • scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
    • auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
    • inherit 规定应该从父元素继承 overflow 属性的值。

14.CSS Hack

14.1. CSS初始化

  • 因为默认样式导致的错乱问题，而且每个浏览器的css默认样式不尽相同，所以最简单有效的方式就是对其进行初始化（覆盖默认样式）。

14.2.CSS hack

  • 除了以上的默认样式覆盖及私有属性添加，有时我们还需要针对不同的浏览器甚至不同版本编写特定的CSS样式，这一过程就叫做CSS hack

  • CSS hack的写法

    • 条件hack：主要针对IE浏览器进行一些特殊的设置

      • <!--[if <keywords>? IE <version>?]>
代码块，可以是html，css，js
<![endif]-->

      • 6种选择方式：是否、大于、大于或等于、小于、小于或等于、非指定版本。

        • 1.是否：指定是否IE或IE某个版本。关键字：空。
        • 2.大于：选择大于指定版本的IE版本。关键字：gt（greater than）。
        • 3.大于或等于：选择大于或等于指定版本的IE版本。关键字：gte（greater than or equal）。
        • 4.小于：选择小于指定版本的IE版本。关键字：lt（less than）。
        • 5.小于或等于：选择小于或等于指定版本的IE版本。关键字：lte（less than or equal）。
        • 6.非指定版本：选择除指定版本外的所有IE版本。关键字：! 。
        • IE浏览器版本，如6、7、8，但IE10及以上版本已将条件注释特性移除，使用时需注

      • 属性hack：在CSS样式属性名前加上一些只有特定浏览器才能识别的hack前缀。

      • 选择符级hack：是针对一些页面表现不一致或者需要特殊对待的浏览器，在CSS选择器前加上一些只有某些特定浏览器才能识别的前缀进行hack。

qvwvq
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
HTML之CSS层叠样式表
qq_45337431的博客
08-20 3404
一、CSS层叠样式表概述 CSS :层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。 多个样式可以层层覆盖叠加，如果不同的css样式对同一个html标签进行修饰，样式有冲突的,应用优先...
WEB前端CSS层叠样式表思维导图（Xmind）
06-23
本人网页制作课程所用的思维导图，包含了所有web前端技术的概念和知识点，比较适合学生、初学者建立一个初步的思维模型，另外本人还有html标语言的思维导图，欢迎大家下载查看。
CSS前端基础01-CSS基础选择器、设置字体样式、文本样式、CSS三种引入方式、Chorme调试工具调试样式
weixin_51353891的博客
04-12 369
学习目标：什么是CSS；CSS基础选择器；设置字体样式；文本样式；CSS三种引入方式；Chorme调试工具调试样式； css第一天总结 css简介 CSS 是层叠样式表 ( Cascading Style Sheets ) 的简称. 有时我们也会称之为 CSS 样式表或级联样式表。 CSS 是也是一种标记语言 CSS 主要用于设置 HTML 页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局和外观显示样式。 CSS 让我们的网页更加丰富多彩，布局更加灵活自如。.
层叠样式表
m0_60975412的博客
08-22 106
层叠概述： 多个规则选中同一个元素相同属性名，不同属性值，叫做“声明冲突” 一但声明冲突，浏览器会自动触发层叠机制 1、比较优先级 important 重要性 color:red; 普通声明 color:red !important; 重要声明 2、比较特殊性 范围越小，特殊性越高 特指度 特指值 从高到底 行内样式>ID选择器>类选择器>元素选择器>通配符选择器 会生成4个数字a、b、c、d a：若声明是行内样式。则为1 否则为0 b：规则中ID选择器的个
Web前端基础——层叠样式表（CSS）
weixin_40013461的博客
09-05 1165
本文介绍了CSS层叠样式表的简单调用方法，可通过style在标签/文档中调用，做一简单了解即可。
web基础——CSS层叠样式表
威威的博客
12-28 3925
目录CSS的作用：基本语法选择器1.类选择器2.id选择器3.标签选择器4.包含选择器5.伪类选择器的优先级子选择器相邻选择器 div +p相邻所有选择器 div ~p属性选择器 input[type=“password”]过滤选择器 CSS的作用： 实现了样式和html的代码分离 弥补html对属性的控制不足 精确的控制页面的布局 可以提高页面的执行效率 css有特殊的功能 特性：继承性，层叠性 基本语法 <style type="text/css"> 选择器{ 属性1
CSS2.0层叠样式表——CSS概述
qq_36893834的博客
07-27 222
​ CSS（Cascading Style Sheets，层叠样式表）是一种将表示样式应用到标记的系统。CSS以设计、改变其HTML页面的样式而知名。1996年12月W3C推出了CSS规范的第一个版本，1998年W3C发布了CSS的第二个版本即CSS2.0，2001年5月W3C开始进行CSS3标准的制定，到目前为止该标准还没有最终定稿。
Web前端之CSS层叠样式表&相关案例
ANingL的博客
02-24 3883
一、CSS介绍 1、定义 CSS:层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。 CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。 CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象...
css层叠样式表
是草莓味的啊
02-18 1753
一.简介 css层叠样式表在主页制作时可有效地对页面的布局、字体、颜色、背景和其它效果实现精确的控制。 二.注释 /**/ 三.css属性 背景，字体，文本，列表 四.css样式引入的方法 1.行内引入(不利于重用和扩展,是html和css的混排编写,不利于页面维护) <h1 style="color: red; font-size: 20px;font-family: '楷体';...
web标准化、XHTML与CSS层叠样式表的关系
01-20
　* 表现:CSS1，CSS2 　* 行为:ECMAScript, DOM 　Web标准至今汉有对外观审美做任何指导方针和戒律，对站点的外观和感觉没有做任何限制，它们只不过使浏览器能够正确地表现设计师创建的站点，帮助客户根据公司的市场...
CSS层叠样式表技术参考手册
02-15
本手册是汇集W3C网站大量网页内容，经编辑、整理、排版和注释形成的，内容丰富全面，可以方便Web开发人员翻阅查询参考。
完整版 web应用开发 web网站建设实用教程 第4讲 层叠样式表 CSS语言（共64页）.ppt
10-16
web应用开发 web网站建设实用教程 第4讲 层叠样式表 CSS语言（共64页）.ppt web应用开发 web网站建设实用教程 第5讲 HTML5和CSS3（共61页）.ppt web应用开发 web网站建设实用教程 第6-3讲 PHP开发环境（共152页）....
CSS层叠样式表介绍
05-20
DHTML(Dynamic HTML):以HTML语言为基础，使用JavaScript控制网页元素，利用CSS层叠样式表进行布局传统的Web的HTML页面文档结构和显示格式一直是混在一起的。这些给页面开发和调整带来了不便。HTML对网页的调整是粗糙...
CSS中，设置 0.5px 会生效吗
Keep trying, keep going
06-12 387
在高分辨率屏幕（例如 Retina 屏幕）上，0.5px 的设置通常会生效，因为这些屏幕具有更高的像素密度，可以显示更细的细节。在这些设备上，1 个 CSS 像素可能对应多个设备像素，因此可以实现 0.5px 的效果。，因为这些屏幕的像素密度较低，可能无法精确地显示半个像素的大小。在这种情况下，浏览器会对 0.5px 的值进行。在 CSS 中，设置 0.5px 是有效的，浏览器会尝试渲染出这种细微的大小差异。然而，在低分辨率屏幕上，0.5px 的设置可能无法完美呈现。
CSS从入门到精通——动画:CSS3动画延迟和完成后状态的保持
m0_73614626的博客
06-16 349
上面已经实现了绿色小球向右移动的动画， 怎么在绿色小球动画完成时保持这个状态呢？红色小球和绿色小球的动画基本是一样的，调整一下位置就可以了。为了完成本关任务，你需要掌握：1.动画状态，2.动画完成时的状态，3.动画延迟。这里以绿色小球的移动来说明小球的状态。小球向右移动是利用定位来改变它的。它规定了动画在播放之前或之后，其动画效果是否可见。本关任务：用 CSS3 实现小车等待红绿灯的效果。运用第一关学到的知识，先创建一个动画名称为。来实现，它定义了动画在何时开始，默认为。然后把这个动画绑定到。
CSS期末复习速览（二）
2301_80369371的博客
06-16 343
4.行内块元素：常见的行内块元素：<img/> <input/> <td>，同时具有块元素和行内元素的特点，特点：和相邻行内元素（行内块）在一行上，但是它们之间会有空白缝隙，一行可以显示多个（行内元素特点）；高度，行高，内外边距都可以控制（块元素特点）2.块元素：常见的块元素：<h1>~<h6> <p> <div> <ul> <ol> <li>，特点：自己独占一行；3.行内元素：常见的行内元素：<a> <strong> <span>，特点：相邻行内元素在一行上，一行可以显示多个；
CSS 实现电影信息卡片
qq_33003143的博客
06-16 538
综合运用CSS知识实现电影信息卡片
【CSS】background怎么设置多个背景图
最新发布
读心悦
06-16 155
在CSS中设置多个背景图片可以通过属性来实现，不同的背景图像之间使用逗号隔开。
viewer.min.css
07-18
CSS是层叠样式表（Cascading Style Sheets）的缩写，用于控制网页的外观和布局。而viewer.min.css则是经过压缩和优化的CSS文件。 该文件常用于各种网页浏览器中，用于美化和优化网页的显示效果。它包含了一系列CSS...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值