css学习
关注
分享
扫一扫
自由与束缚JavaJavaScript
这个作者很懒，什么都没留下…
展开
-
001_CSS简介
1. CSS概述1.1. CSS指层叠样式表(Cascading Style Sheets)。1.2. 样式定义如何显示html元素。1.3. 样式通常存储在样式表中。1.4. 把样式添加到html 4.0中, 是为了解决内容与表现分离的问题。1.5. 外部样式表可以极大提高工作效率。1.6. 外部样式表通常存储在CSS文件中。1.7. 多个样式定义可层叠为一。2. 样式解决了一个普遍的问题2.1. html标签原本被设计为用于定义文档内容。通过使用<h1>、原创 2020-10-13 21:48:56 · 108 阅读 · 0 评论 -
002_CSS基础语法
1. CSS语法1.1. CSS规则由两个主要的部分构成: 选择器, 以及一条或多条声明。selector {declaration1; declaration2; ... declarationN }1.2. 选择器通常是您需要改变样式的html元素。1.3. 每条声明由一个属性和值组成。1.4. 属性(property)是您希望设置的样式属性(style attribute)。属性和值被冒号分开。selector {property: value}1.5. 下面的示意图为原创 2020-10-13 21:52:34 · 140 阅读 · 0 评论 -
003_如何创建CSS
1. 如何插入样式表1.1. 当读到一个样式表时, 浏览器会根据它来格式化html文档。插入样式表的方法有三种:1.2. 外部样式表1.2.1. 当样式需要应用于很多页面时, 外部样式表将是理想的选择。在使用外部样式表的情况下, 你可以通过改变一个文件来改变整个站点的外观。每个页面使用<link>标签链接到样式表。<link>标签在(文档的)头部:<head><link rel="stylesheet" type="text/css" href=原创 2020-10-13 21:56:10 · 185 阅读 · 0 评论 -
004_CSS元素选择器
1. CSS元素选择器/类型选择器1.1. 元素选择器匹配文档语言元素的名称。元素选择器匹配文档树中该元素名称的每一个实例。1.2. 最常见的CSS选择器是元素选择器。换句话说, 文档的元素就是最基本的选择器。1.3. 在W3C标准中, 元素选择器又称为类型选择器(type selector)。2. 如果设置html的样式, 选择器通常将是某个html元素, 比如: p、h1、em、a, 甚至可以是html本身:<!DOCTYPE html><html> &原创 2020-10-13 22:08:57 · 164 阅读 · 0 评论 -
005_CSS通配符选择器
1. CSS2 引入了一种新的简单选择器 - 通配选择器(universal selector), 显示为一个星号(*)。该选择器可以与任何元素匹配, 就像是一个通配符。2. 例如, 下面的规则可以使文档中的每个元素都为红色:<!DOCTYPE html><html> <head> <title>通配符选择器</title> <meta charset="utf-8"> <style type="tex原创 2020-10-13 22:21:51 · 171 阅读 · 0 评论 -
006_CSS类选择器
1. CSS类选择器1.1. 类选择器允许以一种独立于文档元素的方式来指定样式。1.2. 该选择器可以单独使用, 也可以与其他元素结合使用。1.3. 只有适当地标记文档后, 才能使用这些选择器, 所以使用这两种选择器通常需要先做一些构想和计划。要应用样式而不考虑具体设计的元素, 最常用的方法就是使用类选择器。2. 修改html代码2.1. 在使用类选择器之前, 需要修改具体的文档标记, 以便类选择器正常工作。2.2. 为了将类选择器的样式与元素关联, 必须将class指定为一个适当的原创 2020-10-13 22:25:54 · 185 阅读 · 0 评论 -
007_CSS ID选择器
1. ID选择器允许以一种独立于文档元素的方式来指定样式。2. 语法2.1. 首先, ID选择器前面有一个#号 - 也称为棋盘号或井号。2.2. 请看下面的规则:*#intro {font-weight:bold;}2.3. 与类选择器一样, ID选择器中可以忽略通配选择器。前面的例子也可以写作:#intro {font-weight:bold;}2.4. 实例<!DOCTYPE html><html> <head> <原创 2020-10-14 00:01:47 · 99 阅读 · 0 评论 -
008_CSS属性选择器
1. CSS 2引入了属性选择器。2. 属性选择器可以根据元素的属性及属性值来选择元素。3. 简单属性选择3.1. 如果希望选择有某个属性的元素, 而不论属性值是什么, 可以使用简单属性选择器。3.2. 如果您希望把包含标题(title)的所有元素变为红色, 可以写作:*[title] {color:red;}3.3. 与上面类似, 可以只对有href属性的锚(a 元素)应用样式:a[href] {color:red;}3.5. 实例<!DOCTYPE htm原创 2020-10-14 00:01:57 · 209 阅读 · 0 评论 -
009_CSS分组选择器
1. 选择器的分组1.1. 你可以对选择器进行分组, 这样, 被分组的选择器就可以分享相同的声明。将多个选择器放在规则左边, 然后用逗号分隔, 就定义了一个规则。逗号告诉浏览器, 规则中包含两个不同的选择器。1.2. 可以将任意多个选择器分组在一起, 对此没有任何限制。1.3. 例如, 如果您想把很多元素显示为灰色，可以使用类似如下的规则:body, h2, p, table, th, td, pre, strong, em {color:gray;}2. 结合选择器和声明的分组2原创 2020-10-14 00:02:07 · 218 阅读 · 0 评论 -
010_CSS后代选择器
1. 后代选择器(descendant selector)又称为包含选择器。2. 后代选择器可以选择作为某元素后代的元素。3. 根据上下文选择元素3.1. 通过依据元素在其位置的上下文关系来定义样式, 你可以使标记更加简洁。3.2. 在CSS1中, 通过这种方式来应用规则的选择器被称为上下文选择器(contextual selectors), 这是由于它们依赖于上下文关系来应用或者避免某项规则。在CSS2中, 它们称为派生选择器(我们使用更好的叫法, 后代选择器)。3.3. 比方说, 你原创 2020-10-14 00:02:15 · 376 阅读 · 0 评论 -
011_CSS子元素选择器
1. 与后代选择器相比, 子元素选择器(Child selectors)只能选择作为某元素的子元素。2. 选择子元素2.1. 如果您不希望选择任意的后代元素, 而是希望缩小范围, 只选择某个元素的子元素, 请使用子元素选择器(Child selector)。2.2. 例如, 如果您希望选择只作为h1元素子元素的strong元素, 可以这样写:h1 > strong {color:red;}这个规则会把第一个h1下面的两个strong元素变为红色, 但是第二个h1中的strong不原创 2020-10-14 00:02:24 · 186 阅读 · 0 评论 -
012_CSS相邻兄弟选择器
1. 相邻兄弟选择器(Adjacent sibling selector)可选择紧接在另一元素后的元素, 且二者有相同父元素。2. 选择相邻兄弟2.1. 如果需要选择紧接在另一个元素后的元素, 而且二者有相同的父元素, 可以使用相邻兄弟选择器(Adjacent sibling selector)。2.2. 例如, 如果要增加紧接在h1元素后出现的段落的上边距, 可以这样写:h1 + p {margin-top:50px;}3. 语法解释3.1. 相邻兄弟选择器使用了加号(+), 即原创 2020-10-14 00:02:34 · 403 阅读 · 0 评论 -
013_CSS兄弟选择器
1. 定义和用法1.1. element1~element2选择器element1之后出现的所有element2。1.2. 两种元素必须拥有相同的父元素, 但是element2不必直接紧随element1。2. 选择具有相同父元素的位于p元素之后的所有ul元素<!DOCTYPE html><html> <head> <title>CSS兄弟选择器</title> <meta charset="utf-8" /&g原创 2020-10-27 12:30:18 · 146 阅读 · 0 评论 -
014_CSS伪类选择器
1. CSS伪类用于向某些选择器添加特殊的效果。2. 伪类的语法:selector : pseudo-class {property: value}3. 锚伪类3.1. 在支持CSS的浏览器中, 链接的不同状态都可以不同的方式显示, 这些状态包括: 活动状态, 已被访问状态, 未被访问状态和鼠标悬停状态。a:link {color: #FF0000} /* 未访问的链接 */a:visited {color: #00FF00} /* 已访问的链接 */a:hover {colo原创 2020-10-14 00:02:46 · 240 阅读 · 0 评论 -
015_CSS伪元素选择器
十四. CSS伪元素选择器1. CSS伪元素用于向某些选择器设置特殊效果。2. :first-line伪元素2.1. "first-line"伪元素用于向文本的首行设置特殊样式。2.2. "first-line"伪元素只能用于块级元素。2.3. 在下面的例子中, 浏览器会根据"first-line"伪元素中的样式对p元素的第一行文本进行格式化:p:first-line{ color:#ff0000; font-variant:small-caps;}2.4. 实例原创 2020-10-14 00:06:58 · 337 阅读 · 0 评论 -
016_CSS选择器列表
1.CSS选择器列表原创 2020-10-27 01:49:30 · 116 阅读 · 0 评论 -
017_CSS长度单位
1. 尺寸2.颜色原创 2020-10-18 23:43:18 · 237 阅读 · 0 评论 -
018_CSS颜色
1. 颜色由红色、绿色、蓝色混合而成。2. CSS颜色2.1. 可以用以下方法来规定CSS中的颜色:2.1.1. 十六进制色2.1.2. RGB颜色2.1.3. RGBA颜色2.1.4. HSL颜色2.1.5. HSLA颜色2.1.6. 预定义/跨浏览器颜色名3. rgb颜色3.1. 所有浏览器都支持rgb颜色值。3.2. rgb颜色值是这样规定的: rgb(red, green, blue)。每个参数(red、green以及blue)定义颜色的强度, 可以是介于原创 2020-10-30 18:48:24 · 154 阅读 · 0 评论 -
019_CSS尺寸
1. CSS尺寸(Dimension)属性允许你控制元素的高度和宽度。同样, 它允许你增加行间距。2. CSS 尺寸属性3. CSS line-height属性3.1. 定义和用法3.1.1. line-height属性设置行间的距离(行高)。3.1.2. 不允许使用负值。3.1.3. 该属性会影响行框的布局。3.1.4. line-height与font-size的计算值之差(在CSS中成为"行间距")分为两半, 分别加到一个文本行内容的顶部和底部。可以包含这些内容的最小框原创 2020-10-17 15:23:25 · 68566 阅读 · 0 评论 -
020_CSS背景
1. CSS允许应用纯色作为背景, 也允许使用背景图像创建相当复杂的效果。2. 背景色2.1. 可以使用background-color属性为元素设置背景色。这个属性接受任何合法的颜色值。2.2. 这条规则把元素的背景设置为灰色:p {background-color: gray;}2.3. 如果您希望背景色从元素中的文本向外少有延伸，只需增加一些内边距:p {background-color: gray; padding: 20px;}2.4. 可以为所有元素设置背景色,原创 2020-10-14 13:36:34 · 268 阅读 · 0 评论 -
021_CSS字体
1.CSS字体属性定义文本的字体系列、大小、加粗、风格(如斜体)和变形(如小型大写字母)。2. CSS字体系列2.1. 在CSS中, 有两种不同类型的字体系列名称:2.1.1. 通用字体系列 - 拥有相似外观的字体系统组合(比如 "Serif" 或 "Monospace")。2.1.2. 特定字体系列 - 具体的字体系列(比如 "Times" 或 "Courier")。2.2. 除了各种特定的字体系列外, CSS定义了5种通用字体系列:2.2.1. Serif 字体2.2.2.原创 2020-10-15 19:48:25 · 239 阅读 · 0 评论 -
022_CSS文本
1. CSS文本属性可定义文本的外观。2. 通过文本属性, 您可以改变文本的颜色、字符间距, 对齐文本, 装饰文本, 对文本进行缩进, 等等。3. 缩进文本3.1. CSS提供了text-indent属性, 该属性可以方便地实现文本缩进。3.2. 通过使用text-indent属性, 所有元素的第一行都可以缩进一个给定的长度, 甚至该长度可以是负值。3.3. 这个属性最常见的用途是将段落的首行缩进, 下面的规则会使所有段落的首行缩进5em:p {text-indent: 5em;}原创 2020-10-14 13:43:49 · 165 阅读 · 0 评论 -
023_CSS列表
1. CSS列表属性允许你放置、改变列表项标志, 或者将图像作为列表项标志。2. 列表类型2.1. 要修改用于列表项的标志类型, 可以使用属性list-style-type:ul {list-style-type : square}2.2.可能的值2.3. 代码<!DOCTYPE html><html> <head> <title>所有的列表样式类型</title> <meta charset="u原创 2020-10-15 19:48:46 · 158 阅读 · 0 评论 -
024_CSS轮廓
1. 轮廓(outline)是绘制于元素周围的一条线, 位于边框边缘的外围, 可起到突出元素的作用。2. CSS outline属性规定元素轮廓的样式、颜色和宽度。3. 轮廓的样式3.1. outline-style 属性用于设置元素的整个轮廓的样式。3.2. 默认值和继承性3.3. 可能的值3.4. 代码<!DOCTYPE html><html> <head> <title>轮廓的样式</title>原创 2020-10-15 19:49:07 · 158 阅读 · 0 评论 -
025_CSS框模型概述
1. CSS框模型(Box Model)规定了元素框处理元素内容、内边距、边框和外边距的方式。2. CSS框模型概述3. 元素框的最内部分是实际的内容, 直接包围内容的是内边距。内边距呈现了元素的背景。内边距的边缘是边框。边框以外是外边距, 外边距默认是透明的, 因此不会遮挡其后的任何元素。4. 背景应用于由内容和内边距、边框组成的区域。5. 内边距、边框和外边距都是可选的, 默认值是零。但是, 许多元素将由用户代理样式表设置外边距和内边距。可以通过将元素的margin和padding设原创 2020-10-15 19:49:15 · 191 阅读 · 0 评论 -
026_CSS内边距
1. 元素的内边距在边框和内容区之间。控制该区域最简单的属性是padding属性。CSS padding属性定义元素边框与元素内容之间的空白区域。2. CSS padding属性2.1. CSS padding属性定义元素的内边距。padding属性接受长度值或百分比值, 但不允许使用负值。2.2. 例如, 如果您希望所有h1元素的各边都有10像素的内边距, 只需要这样：h1 {padding: 10px;}2.3. 您还可以按照上、右、下、左的顺序分别设置各边的内边距, 各边均可以使原创 2020-10-15 19:49:22 · 345 阅读 · 0 评论 -
027_CSS边框
1. 元素的边框(border)是围绕元素内容和内边距的一条或多条线。2. CSS border属性允许你规定元素边框的样式、宽度和颜色。3. CSS边框3.1. 元素外边距内就是元素的的边框(border)。元素的边框就是围绕元素内容和内边据的一条或多条线。3.2. 每个边框有3个方面: 宽度、样式, 以及颜色。4. 边框与背景4.1. CSS规范指出, 边框绘制在"元素的背景之上"。这很重要, 因为有些边框是"间断的"(例如, 点线边框或虚线框), 元素的背景应当出现在边框的可见原创 2020-10-15 19:49:32 · 235 阅读 · 0 评论 -
028_CSS外边距
1. 围绕在元素边框的空白区域是外边距。设置外边距会在元素外创建额外的"空白"。3. CSS margin属性3.1. 设置外边距的最简单的方法就是使用margin属性。3.2. margin属性接受任何长度单位, 可以是像素、英寸、毫米、em或百分数值甚至负值。margin还可以设置为auto, 浏览器计算外边距。3.3. 还可以为margin设置一个百分比数值:p {margin : 10%;}3.4. 百分数是相对于父元素的width计算的。上面这个例子为p元素设置的外边距是原创 2020-10-15 19:49:40 · 288 阅读 · 0 评论 -
029_CSS水平对齐
1. 在CSS中, 可以使用多种属性来水平对齐元素。2. 使用margin属性来水平对齐2.1. 可通过将左和右外边距设置为"auto", 来对齐块元素。把左和右外边距设置为auto, 规定的是均等地分配可用的外边距, 结果就是居中的元素。2.2. 使用margin:auto, 一定要声明!DOCTYPE, 否则在某些浏览器版本中无效。2.3. 如果宽度是100%, 则对齐没有效果。2.4. 例子2.4.1. 代码<!DOCTYPE html><html&g原创 2020-10-17 15:16:35 · 137 阅读 · 0 评论 -
030_CSS外边距合并
1. 外边距合并指的是, 当两个垂直外边距相遇时, 它们将形成一个外边距。2. 合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。3. 外边距合并3.1. 外边距合并(叠加)是一个相当简单的概念。但是, 在实践中对网页进行布局时, 它会造成许多混淆。3.2. 简单地说, 外边距合并指的是, 当两个垂直外边距相遇时, 它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。3.3. 当一个元素出现在另一个元素上面时, 第一个元素的下外边距与第二个元素原创 2020-10-15 19:49:51 · 243 阅读 · 0 评论 -
031_CSS表格
1. CSS表格属性可以帮助您极大地改善表格的外观。2. 表格边框2.1. 如需在CSS中设置表格边框, 请使用border属性。2.2. 下面的例子为table、th以及td设置了蓝色边框:table, th, td{ border: 1px solid blue;}2.3. 请注意, 上例中的表格具有双线条边框。这是由于table、th以及td元素都有独立的边框。2.4. 代码<!DOCTYPE html><html> <head&原创 2020-10-15 19:48:59 · 165 阅读 · 0 评论 -
032_CSS定位
1.CSS定位属性允许你对元素进行定位。2.CSS定位和浮动2.1.CSS为定位和浮动提供了一些属性, 利用这些属性, 可以建立列式布局, 将布局的一部分与另一部分重叠, 还可以完成多年来通常需要使用多个表格才能完成的任务。2.2.定位的基本思想很简单, 它允许你定义元素框相对于其正常位置应该出现的位置, 或者相对于父元素、另一个元素甚至浏览器窗口本身的位置。显然, 这个功能非常强大, 也很让人吃惊。要知道, 用户代理对CSS2中定位的支持远胜于对其它方面的支持, 对此不应感到奇怪。2.3.原创 2020-10-16 23:01:27 · 187 阅读 · 0 评论 -
033_CSS相对定位
1. CSS相对定位1.1. 相对定位是一个非常容易掌握的概念。如果对一个元素进行相对定位, 它将出现在它所在的位置上。然后, 可以通过设置垂直或水平位置, 让这个元素"相对于"它的起点进行移动。1.2. 如果将top设置为20px, 那么框将在原位置顶部下面20像素的地方。如果left设置为30像素, 那么会在元素左边创建30像素的空间, 也就是将元素向右移动。#box_relative { position: relative; left: 30px; top: 20px;}原创 2020-10-16 23:04:56 · 148 阅读 · 0 评论 -
034_CSS绝对定位
1. 设置为绝对定位的元素框从文档流完全删除, 并相对于其包含块定位, 包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭, 就好像该元素原来不存在一样。元素定位后生成一个块级框, 而不论原来它在正常流中生成何种类型的框。2. CSS绝对定位2.1. 绝对定位使元素的位置与文档流无关, 因此不占据空间。这一点与相对定位不同, 相对定位实际上被看作普通流定位模型的一部分, 因为元素的位置相对于它在普通流中的位置。2.2. 普通流中其它元素的布局就像绝对定位的元素原创 2020-10-16 23:07:39 · 236 阅读 · 0 评论 -
035_CSS浮动
1. 浮动的框可以向左或向右移动, 直到它的外边缘碰到包含框或另一个浮动框的边框为止。2. 由于浮动框不在文档的普通流中, 所以文档的普通流中的块框表现得就像浮动框不存在一样。3. CSS浮动3.1. 请看下图, 当把框1向右浮动时, 它脱离文档流并且向右移动, 直到它的右边缘碰到包含框的右边缘:3.1.1. 代码<!DOCTYPE html><html style="background: black;"> <head> <tit原创 2020-10-16 23:21:57 · 133 阅读 · 0 评论 -
036_CSS导航条
1. 导航栏/链接列表1.1. 导航栏需要标准的html作为基础。1.2. 在我们的例子中, 将用标准的html列表来构建导航栏。1.3. 导航栏基本上是一个链接列表, 因此使用<ul>和<li>元素是非常合适的:<ul><li><a href="default.asp">Home</a></li><li><a href="news.asp">News</a><原创 2020-10-17 15:27:16 · 177 阅读 · 1 评论 -
037_CSS媒介类型
1. 设置链接的样式1.1. 能够设置链接样式的CSS属性有很多种(例如 color, font-family, background 等等)。1.2. 链接的特殊性在于能够根据它们所处的状态来设置它们的样式。1.3. 链接的四种状态:1.3.1. a:link - 普通的、未被访问的链接。1.3.2. a:visited - 用户已访问的链接。1.3.3. a:hover - 鼠标指针位于链接的上方。1.3.4. a:active - 链接被点击的时刻。1.4. 实例原创 2020-10-15 19:48:34 · 321 阅读 · 0 评论 -
038_CSS3图像透明度
1. CSS用于控制网页的样式和布局。CSS3是最新的CSS标准。2. 定义透明效果的CSS3属性是opacity。3. opacity属性能够设置的值从0.0到1.0。值越小, 越透明。4. 创建透明图像Hover效果:<!DOCTYPE html><html> <head> <title>创建透明图像Hover效果</title> <style type="text/css"> img {原创 2020-10-17 22:40:39 · 132 阅读 · 0 评论 -
039_CSS3边框
1. 通过CSS3, 您能够创建圆角边框, 向矩形添加阴影, 使用图片来绘制边框, 并且不需使用设计软件, 比如: PhotoShop。2. CSS3 border-radius属性创建圆角边框2.1. border-radius属性是一个简写属性, 用于设置border-top-left-radius、border-top-right-radius、border-bottom-right-radius、border-bottom-left-radius属性。2.2. 语法2.2.1.原创 2020-10-17 22:47:18 · 255 阅读 · 0 评论 -
040_CSS3背景
1. CSS3多重背景图片1.1. CSS3允许您为元素使用多个背景图像。1.2. 例子1.2.1. 代码<!DOCTYPE html><html> <head> <title>CSS3多背景</title> <meta charset="utf-8" /> <style type="text/css"> body { background-image: url(bg_f原创 2020-10-18 19:32:28 · 149 阅读 · 0 评论