CSS - (Cascading Style Sheets) 自学教程

最新推荐文章于 2023-03-06 16:34:48 发布
最新推荐文章于 2023-03-06 16:34:48 发布
阅读量720 收藏 2
点赞数
分类专栏： 前端 文章标签： css css3 html html5 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Gjw_java/article/details/107453249
版权

CSS 教程

前言

在开始学习之前应该具备的知识：

  • HTML
  • XHTML

CSS基础教程

CSS简介

CSS概述

  • CSS 指层叠样式表(Cascading Style Sheets)
  • 样式定义如何显示HTML元素
  • 样式通常存储在样式表中
  • 把样式添加到HTML4.0中，是为了解决内容与表现分离的问题
  • 外部样式表可以极大的提高工作效率
  • 外部样式表通常存储在CSS文件中
  • 多个样式定义可层叠为一

样式解决了一个普遍的问题
为了分离文档内容和文档表现层，万维网联盟(W3C),在HTML 4.0之外创造出了样式。

样式表极大地提高了工作效率
由于允许同时控制多重页面的样式和布局，CSS可以称的上WEB领域的一大突破，作为网站开发者，你能够为每一个HTML元素定义样式，并将之应用于你希望的任意多的页面中，如需进行全局的更新，只需简单地改变样式，然后网站中的所有元素均会自动地更新。

多重样式将层叠为一个
样式表允许以多种方式规定样式信息。样式可以规定在单个的HTML元素中，在HTML页的头元素中，或在一个外部的CSS文件中，甚至可以在同一个HTML文档中引用多个外部样式表。

层叠次序
一般而言，所有的样式表会根据下面的规则层叠于一个新的虚拟样式表中，其中4拥有最高的优先权。

  1. 浏览器缺省设置
  2. 外部样式表
  3. 内部样式表(位于<head>标签内部)
  4. 内联样式(在HTML元素内部)

CSS基础语法

语法：

selector { declaration1; declaration2;....} //选择器 以及一条和多条声明
selector {property: value} //property是style attribute. 每个属性有一个值，属性和值被冒号分开。

实例：

h1 {color:red; font-size:14px;} // 将h1元素内的文字颜色定义为红色，同时将字体设置为14像素。

提 示 ： \color{orange}{提示：} 提示：请使用花括号包围声明

CSS的高级语法

选择器的分组

h1,h2,h3,h4,h5,h6 {  //对选择器进行分组，被分组的选择器可以分享相同的声明。
    color: green;
}

继承及其问题
根据CSS，子元素从父元素继承属性。但是它并不总是按此方式工作，

body {
    font-family: Verdana, sans-serif;
}
td, ul, ol, li, dl, dt, dd {
    font-family: Verdana, sans-serif;
}
p { //创建一个针对p元素的规则，就会摆脱父元素的规则。
    font-family: Times, "Times New Roam", serif;
}

CSS派生选择器

通过依据元素在其位置的上下文关系来定义样式。(CSS1 上下文选择器，CSS2 派生选择器)
CSS后代选择器
CSS子元素选择器
CSS相邻兄弟选择器

li strong { //将strong元素变为斜体字
    font-style: italic;
    font-weight: normal;
}
strong {
    color: red;
}
h2 {
    color: red;
}
h2 strong {
    color: blue;
}

CSS id选择器

id选择器以"#"来定义

#red{color:red;}
#green{color:green;}

#sidebar p {
    font-style: italic;
    text-align: right;
    margin-top: 0.5em;
}

#sidebar p {
    font-style: italic;
    text-align: right;
    margin-top: 0.5em;
}
#sidebar h2{
    font-size: 1em;
    font-weight: normal;
    font-style: italic;
    margin: 0;
    line-height: 1.5;
    text-align: right;
}

#sidebar {
    border: 1px dotted #000;
    padding: 10px;
}
div#sidebar {
    border: 1px dotted #000;
    padding: 10px;
}

CSS类选择器

在css中，类选择器以一个点号显示。

.center {text-align: center}

.fancy td {
    color: #f60;
    background: #666;
}

td.fancy {
    color: #f60;
    background: #666;
}

CSS属性选择器

对指定属性的HTML元素设置样式

[title]
{
    color: red;
}

[title=w3school]
{
    border:5px solid blue;
}

[title=hello]{color:red;}
[lang|=en]{color:red;}

input[type="text"]
{
    width: 150px;
    display: block;
    margin-bottom: 10px;
    background-color: yellow;
    font-family: Verdana, Arial;
}

input[type="button"]
{
    width: 120px;
    margin-left:35px;
    display: block;
    font-family:Verdana,Arial;    
}

CSS创建

插入样式表的方法有三种：

  • 外部样式表
  • 内部样式表
  • 内联样式
<!-- 外部样式 -->
<head>
  <link rel="stylesheet" type="text/css" href="mystyle.css"/> 
</head>

<!-- 内部样式 -->
<head>
  <style>
    hr {color: sienna;}
    p {margin-left: 20px;}
    body {background-image: url("images/back40.gif");}
  </style>
</head>

<!--内联样式-->
<p style="color: sienna; margin-left: 20px">
  This is a paragraph
</p>

多重样式
如果某些属性在不同的样式表中被同样的选择器定义，那么属性将从更具体的样式表中被继承过来。

//外部样式
h3 {
    color: red;
    text-align: left;
    font-size: 8pt;
}
//内部样式
h3 {
    text-align: right;
    font-size: 20pt;
}

//h3 最终得到的样式
color: red;
text-align: right;
font-size: 20pt;

CSS样式

CSS背景

CSS允许应用纯色作背景，也允许使用背景图像创建相当复杂的效果。

背景色

p {background-color: gray;}

background-color 不能被继承，如果一个元素没有指定背景色，那么背景就是透明的，这样祖先的背景色才能可见。

背景图像

body{background-image: url('/i/eg_bg_04.gif');}

background-image属性的默认值是none,表示背景上没有放置任何图像。
background-image也不能被继承，事实上，所有的背景属性都不能被继承。

背景重复
background-repeat 在页面上对背景图片进行平铺，

body {
    background-image: url('/i/eg_bg_04.gif');
    background-repeat: repeat-y; //repeat-x repeat-y no-repeat
}

背景定位
background-position:改变图像在背景中的位置。

body{
    background-image:url('/i/eg_bg_04.gif');
    background-repeat:no-repeat;
    background-position: center;  // top bottom left right center 100px 5cm
}

背景关联
background-attachment 可以声明图像相对于可视区是固定的(fixed)，因此不会受到滚动条的影响。

body{
    background-image:url('');
    background-repeat:no-repeat;
    background-attachment:fixed; //默认值是scroll 默认情况下，背景是会随文档滚动的。
}

CSS文本

CSS文本属性可以定义文本的外观，通过文本属性，你可以改变文本的颜色、字符间距、对齐文本、装饰文本、对文本进行缩进。

缩进文本
text-indent 通过使用该属性，所有元素的第一行都可以缩进一个给定的长度，甚至该长度可以是负值。

p {text-indent:5em;}

提 示 ： \color{orange}{提示：} 提示：text-indent 无法应用于行内元素，图像之类的替换元素也无法应用。

使用负值
text-indent 设置为负值，可以实现“悬挂缩进”。

p{text-indent:-5em; padding-left: 5em;} //对一个段落设置了负值，首行的字符可能会超出浏览器的窗口的左边界，因此需要设置一个内边距。

使用百分比
text-indent 可以使用所有的长度单位，包括百分比。

<style>
  div{width:500px;}
  p {text-indent:20%;} //缩进值是父元素的20%，即100个像素。
</style>
<div>
  <p>Hello World!</p>
</div>

继承
text-indent 属性可以被继承。

div#outer{width:500px}
div#inner{text-indent:10%}
p{width:200px;}

<div id="outer">
  <div id="inner"> World!!!
    <p>Hello </p>
  </div>
</div>

水平对齐
text-align 影响一个元素中文本行之间的对齐方式。取值有left、right、center
justify 文本行左右两端放在父元素的边界上，然后，调整单词和字母间的间距，使各行长度刚好相等。

语法示例

p {text-align: center;}

字间隔
word-spacing 可以改变字之间的标准间隔，默认值是normal与设置0是一样的。正值拉开间隔，负值拉近间隔。

语法示例

p.spread {word-spacing: 30px;}
p.tight {word-spacing: -0.5em;}

字母间隔
letter-spacing 修改字母或字符之间的间隔。

语法示例

h1 {letter-spacing: -0.5em}
h4 {letter-spacing: 20px}

字符转换
text-transform 处理文本的大小写。其值有none、uppercase、lowercase、capitalize。

语法示例

h1 {text-transform: uppercase}

文本装饰
text-decoration 它可以取值为none、underline、overline、line-through、blink。它的值会替换，而不是累积起来。

语法示例

a {text-decoration: none;}

处理空白符
white-space 会影响用户代理文档中的空格、换行和tab字符的处理。它可以取值为normal、pre、nowrap、pre-wrap、pre-line

语法示例

p {white-space: normal;}

文本方向
direction 影响块级元素中文本的书写方向，表中列布局方向，内容水平填充其元素框的方向，以及两端对齐元素中最后一行的位置。它可取值为：ltr、rtl。

语法示例

div
{
  direction: rtl
}

CSS字体

CSS字体属性定义字体的字体系列、大小、加粗、风格和变形。

CSS 字体属性

属性描述
font简写属性，作用是把所有针对字体的属性设置在一个声明中。
font-family设置字体系列。
font-size设置字体的尺寸。
font-size-adjust当首选字体不可用时，对替换字体进行智能缩放。
font-stretch对字体进行水平拉伸。
font-style设置字体风格。
font-variant以小型大写字体或者正常字体显示文本。
font-wight设置字体的粗细。

CSS字体系列
在CSS中，有两种不同的字体系列名称：

  • 通用字体系列 - 拥有相似外观的字体系统组合
    • Serif 字体
    • Sana-serif 字体
    • Monospace 字体
    • Cursive 字体
    • Fantasy 字体
  • 特定字体系列 - 具体的字体系列

指定字体系列
使用font-family属性来定义文本的字体系列。

语法示例

body {font-family: sans-serif;}

字体风格
font-style 规定斜体文本，它可以取值为normal、italic、oblique。

语法示例

h1 {font-family: Georgia;}

字体变形
font-cariant 可以设定小型大写字母。

语法示例

p {font-variant:small-caps;}

字体加粗
font-weight 设置文本的粗细。它可以取值为bold、normal、100~900。

语法示例

p.normal {font-weight:normal;}
p.thick {font-weight:bold;}
p.thicker {font-weight:900;}

字体大小
font-size 设置文本大小。普通文本的默认大小是16px。（16px=1em）

语法示例

h1 {font-size:60px;}
h2 {font-size:40px;}
p {font-size:14px;}

CSS链接

设置链接的样式
根据链接所处的状态来设置它们的样式。
链接的状态：

  • a:link - 普通的、未被访问的链接
  • a:visited - 用户已访问的链接
  • a:hover - 鼠标指针位于链接的上方
  • a:active - 链接被点击的时刻

提 示 ： \color{orange}{提示：} 提示：a:hover 必须位于 a:link 和 a:visited 之后。a:active 必须位于a:hover属性之后。

语法示例

a:link {color:#FF0000;}		/* 未被访问的链接 */
a:visited {color:#00FF00;}	/* 已被访问的链接 */
a:hover {color:#FF00FF;}	/* 鼠标指针移动到链接上 */
a:active {color:#0000FF;}	/* 正在被点击的链接 */

//文本修饰
a:link {text-decoration:none;}
a:visited {text-decoration:none;}
a:hover {text-decoration:underline;}
a:active {text-decoration:underline;}

//背景色
a:link {background-color:#B2FF99;}
a:visited {background-color:#FFFF85;}
a:hover {background-color:#FF704D;}
a:active {background-color:#FF704D;}

CSS列表

CSS列表属性可以允许你放置、改变列表项标志，或者将图像作为列表项标志。

CSS列表属性

属性描述
list-style简写属性，用于把所用于列表的属性设置于一个声明中
list-style-image将图像设置为列表项标志
list-style-position设置列表中列表项标志的位置
list-style-type设置列表项标志的类型
marker-offset

列表类型
list-style-type 改变列表项的标志类型。
语法示例

ul {list-style-type : square}

列表项图像
list-style-image 对标志使用图像。

语法示例

ul li {list-style-image : url(xxx.gif)}

列表标志的位置
list-style-position 可以确定标志出现在列表项内容之外还是内容内部。

简写列表样式
list-style 将以上3个列表样式属性简写合并为一个。

语法示例

li {list-style : url(example.gif) square inside}

CSS表格

CSS表格属性可以帮助您极大改善您表格的外观。

CSS Table 属性

属性描述
border-collapse设置是否把表格边框合并为单一的边框
border-spacing设置分隔单元格边框的距离
caption-side设置表格标题的位置
empty-cells设置是否显示表格中的空单元格
table-layout设置显示单元、行和列的算法

表格的边框
border 设置表格的边框

语法示例

table, th, td
{
  border: 1px solid blue;
}

折叠边框
border-collapse 设置是否将表格边框折叠为单一的边框。

语法示例

table
{
  border-collapse:collapse;
}

table,th, td
{
  border: 1px solid black;
}

表格的宽度和高度
通过width和height属性定义表格的宽度和高度。

语法示例

table
{
  width:100%;
}

th
{
  height:50px;
}

表格文本对齐
text-align和vertical-align属性设置表格中文本的对齐方式。

语法示例

td
{
  text-align:right; //水平方式对齐
}

td
{
  height:50px;
  vertical-align:bottom; //垂直方式对齐
}

表格的内边距
如需控制表格中内容与边框的距离，请为td和th元素设置padding属性

语法示例

td
{
  padding:15px;
}

表格颜色
通过color和background-color设置表格的颜色。

语法示例

table, td, th
{
  border:1px solid green;
}

th
{
  background-color:green;
  color:white;
}

CSS轮廓

轮廓(outline) 是绘制于元素周围的一条线，位于变框边缘的外围，可起到突出元素的作用。
CSS outline 属性规定元素轮廓的样式、颜色和宽度。

CSS边框属性

属性描述CSS
outline在一个声明中设置所有的轮廓属性CSS2
outline-color设置轮廓的颜色CSS2
outline-style设置轮廓的样式CSS2
outline-width设置轮廓的宽度CSS2

CSS框模型

CSS框架模型

CSS框架模型(Box Model)规定了元素框处理元素内容、内边距、边框和外边距的方式。
元素框的最内部分是实际的内容，直接包围内容的是内边距，内边距呈现了元素的背景，内边距的边缘是边框，边框以外是外边距，外边距默认是透明的，因此不会遮挡其后的任何元素。
提 示 ： \color{orange}{提示：} 提示： 背景应用于由内容和内边距、边框组成的区域。

CSS内边距

元素的内边距在边框和内容区之间，控制该区域最简单的属性是padding属性。padding属性可以接受长度值、百分比值，但是不允许使用负值。
单边内边距属性：分别是上、右、下、左内边距。

  • padding-top
  • padding-right
  • padding-bottom
  • padding-left

语法示例

h1 {padding: 10px;}
h1 {
  padding-top: 10px;
  padding-right: 0.25em;
  padding-bottom: 2ex;
  padding-left: 20%;
}

CSS边框

元素边框(boder)是围绕元素内容和内边距的一条或多条线。
Css border 属性允许你规定元素边框的样式、宽度和颜色。
提 示 ： \color{orange}{提示：} 提示：边框绘制在元素的背景之上。元素的背景是内容、内边距、边框区的背景。

bordre-style 定义了10个不同的非inherit样式，包括none。
定义单边样式：

  • border-top-style
  • border-right-style
  • border-bottom-style
  • border-left-style

border-width 边框指定宽度 其取值：长度值、thin、medium、thick。
定义单边宽度：

  • border-top-width
  • border-right-width
  • borser-bottom-width
  • borser-left-width

提 示 ： \color{orange}{提示：} 提示： 如果您希望边框出现，就必须声明一个变框样式。

border-color 设置边框的颜色，其取值可以是任何类型的颜色值。
定义单边颜色：

  • border-top-color
  • border-right-color
  • border-bottom-color
  • border-left-color
p.aside {border-style: solid dotted dashed double;} //类名为 aside 的段落定义了四种边框样式：实线上边框、点线右边框、虚线下边框和一个双线左边框。

p {
  border-style: solid;
  border-top-width: 15px;
  border-right-width: 5px;
  border-bottom-width: 15px;
  border-left-width: 5px;
  }

提 示 ： \color{orange}{提示：} 提示：边框颜色值transparent，这个值用于创建有宽度的不可见边框。

CSS外边距

围绕在元素边框的空白区域是外边距，设置外边距会在元素外创建额外的空白。
设置外边距的最简单的方法就是使用margin属性，这个属性接受任何长度单位、百分数、甚至负值。

单边外边距属性：

  • margin-top
  • margin-right
  • margin-bottom
  • margin-left

语法示例

h1 {margin: 0.25in;}
h1 {margin: 10px 0 px 15px 5px;}
h2 {
  margin-top: 20px;
  margin-right: 30px;
  margin-bottom: 30px;
  margin-left: 20px;
  }

CSS外边距合并

外边距合并值的是，当两个垂直外边距相遇时，它们将形成一个外边距。
合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。
提 示 ： \color{orange}{提示：} 提示： 只有普通文档流中块框的垂直外边距才会发生外边距的合并，行内框、浮动框或绝对定位之间的外边距不会合并。

CSS定位

CSS定位概述

CSS定位(Positioning)属性允许您对元素进行定位。
CSS有三种基本的定位方式：普通流、浮动和绝对定位。
行框：由一行形成的水平框。

position属性的4种不同取值：

  • static 元素框正常生成，块级元素生成一个矩形框，作为文档流的一部分，行内元素则会创建一个或多个行框，置于其父元素中。
  • relative 元素框偏移某个距离，元素仍保持其未定位前的形状，它原本所占的空间仍保留。
  • absolute 元素框从文档流完全删除，并相对于其包含块定位。包含块可能是文档中的另一个元素或者是初始包含块，元素原先子啊正常文档流中所占的空间会关闭，就好像元素原来不存在一样。元素定位后生成一个块级框，而不论它在正常流中生成何种类型的框。
  • fixed 元素框的表现类似于将position设置为absolute，不过其包含块是视窗本身。

提 示 ： \color{orange}{提示：} 提示： 相对定位实际上被看作普通流定位模型的一部分，因为元素的位置相对于它在普通流中的位置。

CSS相对定位

设置为相对定位的元素框会偏移某个距离。元素仍然保持其未定位前的形状，它原本所占的空间仍保留。
提 示 ： \color{orange}{提示：} 提示： 在使用相对定位时，无论是否进行移动，元素仍然占据原来的空间。因此，移动元素会导致它覆盖其他框。

语法示例

#box_relative {
    position: relative;
    left: 30px;
    top: 20px;
}

CSS绝对定位

绝对定位使元素与文档无关，因此不占据空间，这一点与相对定位不同，相对定位实际上被看作普通流定位模型的一部分，因为元素的位置相对于它在普通流中的位置。
提 示 ： \color{orange}{提示：} 提示：因为绝对定位的框与文档流无关，所以它们可以覆盖页面上的其他元素，可以通过设置z-index属性来控制这些框的堆放次序。

语法示例

#box_relative {
    position: absolute;
    left: 30px;
    top: 20px;
}

CSS浮动

浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。
在CSS中，通过float属性实现元素的浮动。
在CSS中，clear属性可以阻止行框围绕浮动框。

语法示例

.news img{
    float: left;
}

CSS选择器

CSS元素选择器

文档的元素就是最基本的选择器。
在W3C标准中，元素选择器又被称为类型选择器(type selector)。
类型选择器匹配文档语言元素类型的名称。类型选择器匹配文档树中该元素类型的每一个实例。

语法示例

h1 {font-family: sans-serif;}

CSS选择器分组

将选择器用逗号隔开，定义一个规则。可以任意多个选择器分组，对此没有限制。
通配符选择器(universal selector)，显示为一个(*)。该选择器可以与任何元素匹配。
声明分组：可以缩短样式表，使之更清晰，也更易维护。
在一个规则中结合选择器分组和声明分组，就可以使用很少的语句定义相对较复杂的样式。

声明分组
选择器进行分组，声明进行分组。

h1 {font: 28px Verdana;}
h1 {color: blue;}
h1 {background: red;}

语法示例

h1, h2, h3, h4, h5, h6 { //结合选择器和声明的分组
  color:gray;
  background: white;
  padding: 10px;
  border: 1px solid black;
  font-family: Verdana;
}

CSS类选择器

类选择器允许以一种独立于文档元素的方式来指定样式。
该选择器可以单独使用，也可以与其他元素结合使用。

提 示 ： \color{orange}{提示：} 提示： 只有适当地标记文档后，才能使用这些选择器，所以使用这两种选择器通常需要先做一些构想和计划。要应用样式而不考虑具体设计的元素，最常用的方法就是使用类选择器。

语法示例

.important {color: red;}  //选择类名为important的元素。

CSS ID选择器

ID选择器允许以一种独立于文档元素的方式来指定样式。
类选择器与ID选择器的区别：

  • 语法ID选择器以#开始。
  • ID选择器只能在文档中使用一次。
  • 不能使用ID词列表。
  • ID能包含更多的含义。

区分大小写：类选择器和ID选择器是区分大小写的。所以类和ID值的大小写必须与文档中的相应值匹配。

语法示例

#intro {font-weight: bold;} // 选择id为intro的元素

CSS属性选择器

属性选择器可以根据元素的属性及属性值来选择元素。

子串匹配属性选择器

类型描述
[abc^=“def”选择 abc 属性值以"def" 开头的所有元素
[abc$=“def”选择 abc 属性值以 “def” 结尾的所有元素
[abc*=“def”]选择 abc 属性值中包含子串 “def” 的所有元素

示例

*[title] {color: red;}
a[href] {color: red;}
a[href][title] {color: red;}

CSS后代选择器

后代选择器(descendant selector)又称为包含选择器
后代选择器可以选择作为某元素后代的元素
根据上下文选择元素

h1 em {color: red;} //作为 h1 元素后代的任何 em 元素

CSS子元素选择器

与后代选择器相比，子元素选择器(child selector)只能选择作为某元素子元素的元素。
如果不希望选择任意的后代元素，而是缩小范围，只选择某个元素的子元素，请使用子元素选择器。
语法示例

h1 > strong {color: red;} //选择只作为h1元素子元素的strong元素  > 即子结合符

结合后代选择器和子选择器

table.company td > p {} //选择作为 td 元素子元素的所有 p 元素，这个 td 元素本身从 table 元素继承，该 table 元素有一个包含 company 的 class 属性。

CSS相邻兄弟选择器

相邻兄弟选择器(Adjacent sibling selector)可选择紧接在另一元素后的元素，且二者有相同的父元素。
语法示例

h1 + p {margin-top: 50px;}  // + 即相邻兄弟结合符(Adjacent sibling combinator).

结合其他选择器

html > body table + ul {margin-top: 20px;} //选择紧接在 table 元素后出现的所有兄弟 ul 元素，该 table 元素包含在一个 body 元素中，body 元素本身是 html 元素的子元素。

CSS伪类

CSS伪类用于向某些选择器添加特殊的效果。

伪类

属性描述CSS
:active向被激活的元素添加样式CSS1
:focus向拥有键盘输入焦点的元素添加样式CSS2
:hover当鼠标悬浮在元素上方时，向元素添加样式CSS1
:link向未被访问的链接添加样式CSS1
:visited向已被访问的链接添加样式CSS1
:first-child向元素的第一个子元素添加样式CSS2
:lang向带有指定lang属性的元素添加样式CSS2

语法：

selector:pseudo-class {property: value;} //伪类语法
selector.class:pseudo-class {property:value;} //CSS类于伪类搭配使用

锚伪类

a:link {color: #FF0000}		/* 未访问的链接 */
a:visited {color: #00FF00}	/* 已访问的链接 */
a:hover {color: #FF00FF}	/* 鼠标移动到链接上 */
a:active {color: #0000FF}	/* 选定的链接 */

提 示 ： \color{orange}{提示：} 提示：在 CSS 定义中，a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的。a:active 必须被置于 a:hover 之后，才是有效的。伪类名称对大小写不敏感。

伪类和CSS类

a.red : visited {
    color:#FF0000;
}

:first-child伪类

p:first-child{font-weight: bold;}
li:first-child{text-transform: uppercase;}

提 示 ： \color{orange}{提示：} 提示：最常见的错误是认为p:first-child之类的选择器会选择p元素的第一个子元素。

lang伪类

<html>
<head>
  <style type="text/css">
    q:lang(no) {
      quotes: "~""~"; //:lang类为属性值为no的q元素定义引号的类型
    }
  </style>
</head>
<body>
  <p>文字<q lang="no">段落中的引用的文字</q>文字</p>
</body>
</html>

CSS伪元素

CSS伪元素用于向某些选择器设置特殊效果。

伪元素

属性描述CSS
:first-letter向文本的第一个字母添加特殊样式CSS1
:fisrt-line向文本的首行添加特殊样式CSS1
:before在元素之前添加内容CSS2
:after在元素之后添加内容CSS2

语法：

selector:pseudo-element {property:value;} //伪元素的语法
selector.class:pseudo-element {property:value;} //CSS类与伪元素配合元素

:first-line 伪元素

实例：

p:first-line
{
    color: #ff0000;
    font-variant: small-caps;
}

可应用于"first-line"伪元素的属性：

  • font
  • color
  • background
  • word-spacing
  • letter-spacing
  • text-decoration
  • vertical-align
  • text-transform
  • line-height
  • clear

提 示 ： \color{orange}{提示：} 提示：“first-line” 伪元素只能用于块级元素。

:first-letter 伪元素

实例：

p:first-letter
{
    color: #ff0000;
    font-size: xx-large;
}

可应用于"first-letter"伪元素的属性：

  • font
  • color
  • background
  • margin
  • padding
  • border
  • text-decoration
  • vertical-align(仅当float为none)
  • text-transform
  • line-height
  • float
  • clear

提 示 ： \color{orange}{提示：} 提示：“first-letter” 伪元素只能用于块级元素

伪元素和CSS类

p.article:first-letter
{
    color: #FF0000;
}

多重伪元素
可以结合多个伪元素

p:first-letter
{
    color: #ff0000; //首字母为红色
    font-size: xx-large;//字体大小为xx-large
}

p:first-line
{
    color: #0000ff; //第一行其余文本为蓝色
    font-variant: small-caps; //以小型字母显示
}

:before 伪元素

h1:before
{
    content:url(logo.gif); //h1之前插入一幅图片
}

:after 伪元素

h1:after
{
    content:url(logo.gif);
}

CSS高级

CSS对齐

在CSS中，可以使用多种属性来水平对齐元素。(水平对齐块级元素)

块元素的例子：

<h1>
  <p>
</h1>

使用margin属性来水平对齐
可通过将左和右外边距设置为“auto”，均等的分配可用的外边距，来对齐块元素。

实例：

.center {
    margin-left: auto;
    margin-right: auto;
    width: 70%;
    background-color: #b0e0e6;
}

提 示 ： \color{orange}{提示：} 提示：如果宽度是100%，则对齐效果无效。

使用position属性进行左和右对齐
对齐元素的方法之一是使用绝对定位。

实例：

.right
{
    position: absolute;
    right: 0px;
    width: 300px;
    background-color: #b0e0e6;
}

提 示 ： \color{orange}{提示：} 提示：绝对定位元素会被正常流中删除，并且能够交叠元素。

使用float属性来进行左和右的对齐
对齐元素的另一种方法是使用float属性。

实例：

.right
{
    float: right;
    width: 300px;
    background-color: #b0e0e6;
}

CSS尺寸

CSS尺寸(Dimension)属性允许你控制元素的高度和宽度。同样，它允许你增加行间距。

CSS尺寸属性
CSS尺寸属性允许你控制元素的高度和宽度，同样，还允许你增加行间距。

属性描述
height设置元素的高度
line-height设置行高
max-height设置元素的最大高度
max-width设置元素的最大宽度
min-height设置元素的最小高度
min-width设置元素的最小宽度
width设置元素的宽度

CSS分类

CSS分类属性(Classification)允许你控制如何显示元素，设置图像显示于另一元素中的何处，相对于其正常位置来定位元素，使用绝对值来定位元素，以及元素的可见度。

属性描述
clear设置一个元素的侧面是否允许其他的浮动元素。
cursor规定当指向某元素之上时显示的指针类型。
display设置是否及如何显示元素。
float定义元素在哪个方向浮动。
position把元素放置在一个静态的、相对的、绝对的、或固定的位置中。
visibility设置元素是否可见或不可见。

CSS导航栏

通过CSS，您能够把乏味的HTML菜单转化为漂亮的导航栏。

导航栏 = 链接列表

<ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">News</a></li>
    <li><a href="#">Contact</a></li>
    <li><a href="#">About</a></li>
</ul>
<style>
    ul{
        list-style-type: none; //删除圆点
        margin: 0; //去除浏览器的默认设定
        padding: 0;
    }
    // 垂直导航栏
    a {
        display: block; //把链接显示为块级元素可使整个链接区域可点击(不仅仅是文本)，同时也允许我们规定宽度
        width: 60px; //块级元素默认占用全部可用宽度，我们需要规定60像素的宽度。
    }
    // 水平导航栏 使用行内或浮动列表项
    // 行内列表项
    li {
        display: inline; // 默认地，<li> 元素是块元素，在这里，我们去除了每个列表前后的换行，以便让它们在一行中显示。
    }
    // 浮动列表项
    li
    {
        float: left; //使用float来把块元素滑向彼此
    }
    a 
    {
        display: block;
        width: 60px;
    }
</style>

CSS图片库

CSS用来创建图片库

实例：

<!doctype html>
<html>
<head>
<style>
div.img
  {
  margin:3px;
  border:1px solid #bebebe;
  height:auto;
  width:auto;
  float:left;
  text-align:center;
  }
div.img img
  {
  display:inline;
  margin:3px;
  border:1px solid #bebebe;
  }
div.img a:hover img
  {
  border:1px solid #333333;
  }
div.desc
  {
  text-align:center;
  font-weight:normal;
  width:150px;
  font-size:12px;
  margin:10px 5px 10px 5px;
  }
</style>
</head>
<body>

<div class="img">
  <a target="_blank" href="/i/tulip_ballade.jpg">
  <img src="/i/tulip_ballade_s.jpg" alt="Ballade" width="160" height="160">
  </a>
  <div class="desc">在此处添加对图像的描述</div>
</div>

<div class="img">
  <a target="_blank" href="/i/tulip_flaming_club.jpg">
  <img src="/i/tulip_flaming_club_s.jpg" alt="Ballade" width="160" height="160">
  </a>
  <div class="desc">在此处添加对图像的描述</div>
</div>

<div class="img">
  <a target="_blank" href="/i/tulip_fringed_family.jpg">
  <img src="/i/tulip_fringed_family_s.jpg" alt="Ballade" width="160" height="160">
  </a>
  <div class="desc">在此处添加对图像的描述</div>
</div>

<div class="img">
  <a target="_blank" href="/i/tulip_peach_blossom.jpg">
  <img src="/i/tulip_peach_blossom_s.jpg" alt="Ballade" width="160" height="160">
  </a>
  <div class="desc">在此处添加对图像的描述</div>
</div>

</body>
</html>

CSS图片透明

通过CSS opacity属性使创建透明图像变得很容易。

实例： 图像透明 - Hover效果

  img
  {
    opacity: 0.4; //取值范围 0.0 ~ 1.0，值越小，越透明。
  }
  img:hover //鼠标移动到图像上
  {
    opacity: 1.0; // 图像不透明
  }

实例： 透明框中的文本

<!DOCTYPE html>
<html>
<head>
<style>
div.background
{
  width: 400px;
  height: 266px;
  background: url('/i/tulip_peach_blossom_w.jpg') no-repeat;
  border: 1px solid black;
}

div.transbox
{
  width: 338px;
  height: 204px;
  margin:30px;
  background-color: #ffffff;
  border: 1px solid black;
  /* for IE */
  filter:alpha(opacity=60);
  /* CSS3 standard */
  opacity:0.6;
}

div.transbox p
{
  margin: 30px 40px;
}
</style>
</head>

<body>

<div class="background">
<div class="transbox">
<p>
This is some text that is placed in the transparent box.
This is some text that is placed in the transparent box.
This is some text that is placed in the transparent box.
This is some text that is placed in the transparent box.
This is some text that is placed in the transparent box.
</p>
</div>
</div>

</body>
</html>

CSS媒介类型

媒介类型(Media Types)允许你定义以何种媒介来提交文档。文档可以被显示在显示器、纸媒介或者听觉浏览器等等。

@media规则
@media 规则使你有能力在相同的样式表中，使用不同的样式规则来针对不同的媒介。

实例：

<html>

<head>

  <style>
    @media screen {
      p.test {
        font-family: verdana, sans-serif;
        font-size: 14px
      }
    }

    @media print {
      p.test {
        font-family: times, serif;
        font-size: 10px
      }
    }

    @media screen, print {
      p.test {
        font-weight: bold
      }
    }
  </style>

</head>

<body>....</body>

</html>

不同的媒介类型：
提 示 ： \color{orange}{提示：} 提示：媒介类型名称对大小写不敏感。

媒介类型描述
all用于所有的媒介设备
aural用于语音和音频合成器
braille用于盲人用点字法触觉回馈设备
embossed用于分页的盲人用点字法打印机
handheld用于小的手持的设备
print用于打印机
projection用于方案显示，比如幻灯片
screen用于电脑显示器
tty用于使用固定密度字母栅格的媒介，比如电传打字机和终端。
tv用于电视机类型的设备

下一步该学习什么呢？

下一步应该学习CSS3、HTML5和JavaScript。

CSS3 是最新的CSS标准。
HTML5 是下一代的HTML
Javascrip 世界上最流行的脚本语言，被设计为向HTML页面增加交互性。

参考文献

CSS教程

高建伟-joe
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
CSS 指层叠样式表 (Cascading Style Sheets) 和选择器
vincent_vang的博客
05-02 89
对css层叠样式以及选择器的知识点记录
CSS层叠样式表（Cascading Style Sheets）
ydyd的博客
07-07 1万+
CSS简介CSS全称为：层叠样式表（Cascading Style Sheets），主要用于定义HTML内容在浏览器内的显示样式，如文字大小，颜色，字体加粗等。 使用CSS样式通过定义某个样式，可以让不同网页位置的文字有着同一的字体效果。语法：p{ color:blue; } p 选择符又称选择位，指明网页中应用样式规则的元素，其他元素不受影响 {} 声明，在大括号内的都是声明
【前端】CSS-Cascading Style Sheets（级联样式表）
最新发布
m0_56492261的博客
03-06 277
css概述CSS是CascadingStyleSheets（级联样式表）。CSS是一种样式表语言，用于为HTML文档控制外观，定义布局。例如，CSS涉及字体、颜色、边距、高度、宽度、背景图像、高级定位等方面。可将页面的内容与表现形式分离，页面内容存放在HTML文档中，而用于定义表现形式的CSS在个.css文件中或HTML文档的某一部分。CSS与HTML的关系:HTML是网页内容;CSS定义页面的样式;CSS基本语法行内样式表行内样式表,又有人称内联样式、行间样式、内嵌样式。
CSS(Cascading Style Sheets)
weixin_47183168的博客
12-08 211
层叠样式表(Cascading Style Sheets) 层叠：多个样式可以作用在同一个html的元素上，同时生效 是一种用来表现HTML或XML等文件样式的计算机语言。 样式定义如何显示 HTML 元素 样式通常存储在样式表中 把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题 外部样式表可以极大提高工作效率 外部样式表通常存储在 CSS 文件中 多个样式定义可层叠为一个 CSS很像化妆，通过不同的CSS将同样的HTML内容打造为不同的呈现结果 CSS的优势 1. 功能强
css基础
Veilhry
02-18 205
CSS(Cascading Style Sheets) ，通常称为CSS样式表或层叠样式表（级联样式表） 作用： 主要用于设置 HTML页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局和外观显示样式。 CSS以HTML为基础，提供了丰富的功能，如字体、颜色、背景的控制及整体排版等，而且还可以针对不同的浏览器设置不同的样式。 1. 引入位置 行内式(内联样式) <标签名 style="属性1:属性值1; 属性2:属性值2; 属性3:属性值3;".
CSS 指层叠样式表 (Cascading Style Sheets)
06-05
CSS 指层叠样式表 (Cascading Style Sheets) 样式定义如何显示 HTML 元素 样式通常存储在样式表中 把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题 外部样式表可以极大提高工作效率 外部样式表通常存储在 CSS 文件中 多个样式定义可层叠为一
Cascading Style Sheet 2.0 中文手册.chm
03-09
本手册针对的是已有一定网页设计制作经验的读者。其目的是提供最新最全的样式表内容的快速索引及注释。所以对于样式表的基础知识，在此仅简单介绍，恕不赘述。 本手册的升级信息与版权声明请参阅关于本书页面。本手册中专用词汇请参阅中英文词汇对照表。 限于篇幅，对于一些过于繁杂的相关内容，如动态样式属性（Dynamic Properties），滤镜（Filters），行为（Behaviors）请参阅我的其它相关著作。 本书中涉及到的所有HTML对象（Object，Element），HTML特性（Attributes）和属性（Properties）请参阅我的相关著作。
DHTMLET - Cascading Style Sheet 2.0 中文手册
08-10
DHTMLET - Cascading Style Sheet 2.0 中文手册
CSS——Cascading Style Sheets
10-17
CSS——Cascading Style Sheets 层叠样式表 作用 定义了HTML元素怎样去显示 一般存储在样式表中 也可以存储在外部样式文件.css文件中
CSS（Cascading Style Sheets）层叠样式表
正林哥的博客
03-15 1055
1、选择器        1）选择器类型        2）选择器优先级     2、CSS2八大类样式        字体样式        区块样式        背景样式        方框样式           padding           margin        边框样
CSS 3之菜单的横竖转换
程序员小白的博客
07-01 1019
在设计网页时，不但能创建垂直导航菜单，也能创建水平导航菜单； 例子1：垂直菜单效果 水平效果 设置超链接样式 例子2：
css3新盒子模型来解决以前的撑大盒子问题（75）
weixin_45147894的博客
06-21 886
这是原来的盒子大小呀！ 加入边框会使得盒子变大！ 加入内边距也会使得盒子变大！ 加入box-sizing:content-box；是不会变得。 加入box-sizing:borser-box;就可以了，盒子就不会变大了呀！ css初始化时也能加入这个了呀！ ...
菜单的横竖转换
alex_sym的专栏
05-27 1141
导航菜单不仅只有竖直排列，通过设置标记为左浮动，可以使项目列表按水平方向排列 效果图： 代码： Untitled Document #box{ font-size:12px; font-family:"宋体"; } #box ul{ margin:0px; padding:0px; list-style-type:none; } #box li{ float:l
Cascading Style Sheets 基础整理(1)
iteye_20435的博客
05-15 146
[code="java"] //Priority 优先权 1 to 4 1.Broswer default setting //浏览器默认设置 2.External Css[b] [/b](independent css file ) //外部Css样式表 3.Internal Css (between HTML )//内部Css样式描述 4.Embedded st...
CSS设置菜单的横竖转换
天高任鸟飞
11-06 2659
CSS设置菜单的横竖转换           导航条不仅仅可以是竖直排列，还可以在水平方向上显示，通过CSS可以实现导航条的横竖转换。           首先，建立HTML结构，菜单的各个项目列表使用表示，设置页面的背景颜色，接着设置项目列表的属性，将项目符号设置不显示，在标记中设置字体。 菜
border的属性及写法大全：实线、点线、虚线、双线、混合用法
热门推荐
最初都是小白
03-26 11万+
border的属性及写法： 属性 含义 solid 实线 dotted 点线 dashed 虚线 double 双线 单项写法及效果演示： （后面有完整代码） 1.实线 // 1. 实线：solid .border1{ border: 1px solid #666; } 实线效果： 2.点线 // 2. 点线：...
CSS层叠样式表Cascading Style Sheets(2021.10.05)
SHY
12-19 1274
一、CSS简介 1.优缺点 优点：丰富的样式描述； 样式和结构的分离，便于维护和管理； 减少代码量，加快页面加载； 样式代码复用性强； 多个页面可以使用同一个CSS代码； 缺点：浏览器对CSS支持程度不同。 2.CSS特性 (1)继承性 1）后代元素继承祖先元素的样式(嵌套关系)； 2）只能继承文字、文本样式(如，color、text-开头、font-开头、line-开头)，其他样式不能继承。 (...
css（Cascading Style Sheets）
Peng_zhj的博客
01-03 369
一、CSS基础 1. CSS概述 CSS: cascading style sheets(层叠样式表) 层叠样式表：对同一个元素使用多种样式，显示最终重叠后的效果！ css解决html属性的不足！ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>font标签</title> </hea
IT预科班：HTML-CSS-JS-MySQL基础学习指南
在前端开发领域，HTML（HyperText Markup Language）、CSS（Cascading Style Sheets）和JavaScript是构建网页和Web应用程序的核心技术。HTML用于创建网页结构，定义内容如文本、图片、链接等元素；CSS则负责页面的...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

高建伟-joe

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值