CSS第一天笔记

程序员文章站 2022-04-04 11:13:51

...

CSS的学习

1.css的概述

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

样式解决了一个普遍的问题

HTML 标签原本被设计为用于定义文档内容。通过使用 <h1>、<p>、<table> 这样的标签，HTML 的初衷是表达“这是标题”、“这是段落”、“这是表格”之类的信息。同时文档布局由浏览器来完成，而不使用任何的格式化标签。

由于两种主要的浏览器（Netscape 和 Internet Explorer）不断地将新的 HTML 标签和属性（比如字体标签和颜色属性）添加到 HTML 规范中，创建文档内容清晰地独立于文档表现层的站点变得越来越困难。

为了解决这个问题，万维网联盟（W3C），这个非营利的标准化联盟，肩负起了 HTML 标准化的使命，并在 HTML 4.0 之外创造出样式（Style）。

所有的主流浏览器均支持层叠样式表。
样式表极大地提高了工作效率
样式表定义如何显示 HTML 元素，就像 HTML 3.2 的字体标签和颜色属性所起的作用那样。样式通常保存在外部的 .css 文件中。通过仅仅编辑一个简单的 CSS 文档，外部样式表使你有能力同时改变站点中所有页面的布局和外观。

由于允许同时控制多重页面的样式和布局，CSS 可以称得上 WEB 设计领域的一个突破。作为网站开发者，你能够为每个 HTML 元素定义样式，并将之应用于你希望的任意多的页面中。如需进行全局的更新，只需简单地改变样式，然后网站中的所有元素均会自动地更新。
多重样式将层叠为一个
样式表允许以多种方式规定样式信息。样式可以规定在单个的 HTML 元素中，在 HTML 页的头元素中，或在一个外部的 CSS 文件中。甚至可以在同一个 HTML 文档内部引用多个外部样式表。

当同一个 HTML 元素被不止一个样式定义时，会使用哪个样式呢？

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

浏览器缺省设置
外部样式表
内部样式表（位于 <head> 标签内部）
内联样式（在 HTML 元素内部）
因此，内联样式（在 HTML 元素内部）拥有最高的优先权，这意味着它将优先于以下的样式声明：<head> 标签中的样式声明，外部样式表中的样式声明，或者浏览器中的样式声明（缺省值）。
CSS 基础语法
CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明

selector {declaration1; declaration2; … declarationN }
选择器{属性值1：属性值1；属性2：属性值2…}
选择器通常是您需要改变样式的 HTML 元素。

每条声明由一个属性和一个值组成。

属性（property）是您希望设置的样式属性（style attribute）。每个属性有一个值。属性和值被冒号分开。

selector {property: value}

css引入页面的三种方式
1)行内样式/内联样式：通过style属性将样式写入在标签内
<div style=“width: 500px; height: 500px; color: peru;border-width: 3px;border-style: solid; border-color: blue; background-color:palevioletred ;”>xxx</div>

	<!--内联标签或者元素；不会占据一行显示，先写的先排列，重点：内联元素设置的宽高不起作用-->
	<!--经典的页面布局，div+css-->

2）内嵌样式：通过style标签写入在head中
CSS第一天笔记
内嵌样式的语法结构

选择器{属性值1：属性值1；属性2：属性值2…}

3）外部样式/外联样式：使用link标签加载css文件到head中
CSS第一天笔记

一般推荐使用第三种样式
重点
三种样式的优先级：
行内样式>内嵌样式>外联样式
css样式

	<!--border-width表示边框的宽度-->
	<!--border-color表示边框的颜色-->
	<!--background-color表示背景的颜色-->
	<!--font-family设置字体-->
	<!--font-size 设置文本字体大小-->
	<!--border-color 设置文本字体颜色-->
	<!--background-color表示元素的背景颜色-->
	<!--font-family 设置字体-->
	<!--color 设置文本字体颜色-->
	<!--text-decoration设置是否显示上划线下划线 underline下划线 overline上划线 none去掉下划线-->
	<!--ext——align表示文本的水平对齐方式-->
	<!--line-height表示元素的垂直对齐一般设置为高度一样则垂直居中-->
	<!--list-style去掉无序列表前面的点-->

1）css背景
背景色
可以使用 background-color 属性为元素设置背景色。这个属性接受任何合法的颜色值。
这条规则把元素的背景设置为灰色：

p {background-color: gray;}

如果您希望背景色从元素中的文本向外少有延伸，只需增加一些内边距：

p {background-color: gray; padding: 20px;}

背景图像
要把图像放入背景，需要使用 background-image 属性。background-image 属性的默认值是 none，表示背景上没有放置任何图像。

如果需要设置一个背景图像，必须为这个属性设置一个 URL 值：

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

大多数背景都应用到 body 元素，不过并不仅限于此。

下面例子为一个段落应用了一个背景，而不会对文档的其他部分应用背景：

p.flower {background-image: url(/i/eg_bg_03.gif);}

您甚至可以为行内元素设置背景图像，下面的例子为一个链接设置了背景图像：

a.radio {background-image: url(/i/eg_bg_07.gif);}

背景重复
如果需要在页面上对背景图像进行平铺，可以使用 background-repeat 属性。

属性值 repeat 导致图像在水平垂直方向上都平铺，就像以往背景图像的通常做法一样。repeat-x 和 repeat-y 分别导致图像只在水平或垂直方向上重复，no-repeat 则不允许图像在任何方向上平铺。

默认地，背景图像将从一个元素的左上角开始。请看下面的例子：

body { background-image: url(/i/eg_bg_03.gif);
background-repeat: repeat-y; }

背景定位
可以利用 background-position 属性改变图像在背景中的位置。

下面的例子在 body 元素中将一个背景图像居中放置：

body {
background-image:url(’/i/eg_bg_03.gif’);
background-repeat:no-repeat;
background-position:center; }

为 background-position 属性提供值有很多方法。首先，可以使用一些关键字：top、bottom、left、right 和 center。通常，这些关键字会成对出现，不过也不总是这样。还可以使用长度值，如 100px 或 5cm，最后也可以使用百分数值。不同类型的值对于背景图像的放置稍有差异。

关键字
图像放置关键字最容易理解，其作用如其名称所表明的。例如，top right 使图像放置在元素内边距区的右上角。

根据规范，位置关键字可以按任何顺序出现，只要保证不超过两个关键字 - 一个对应水平方向，另一个对应垂直方向。

如果只出现一个关键字，则认为另一个关键字是 center。

所以，如果希望每个段落的中部上方出现一个图像，只需声明如下：

p {
background-image:url(‘bgimg.gif’);
background-repeat:no-repeat;
background-position:top; }

下面是等价的位置关键字：

单一关键字	等价的关键字
center	center center
top	top center 或 center top
bottom	bottom center 或 center bottom
right	right center 或 center right
left	left center 或 center left

百分数值
百分数值的表现方式更为复杂。假设你希望用百分数值将图像在其元素中居中，这很容易：

body {
background-image:url(’/i/eg_bg_03.gif’);
background-repeat:no-repeat;
background-position:50% 50%; }

这会导致图像适当放置，其中心与其元素的中心对齐。换句话说，百分数值同时应用于元素和图像。也就是说，图像中描述为 50% 50% 的点（中心点）与元素中描述为 50% 50% 的点（中心点）对齐。

如果图像位于 0% 0%，其左上角将放在元素内边距区的左上角。如果图像位置是 100% 100%，会使图像的右下角放在右边距的右下角。

因此，如果你想把一个图像放在水平方向 2/3、垂直方向 1/3 处，可以这样声明：

body {
background-image:url(’/i/eg_bg_03.gif’);
background-repeat:no-repeat;
background-position:66% 33%; }

如果只提供一个百分数值，所提供的这个值将用作水平值，垂直值将假设为 50%。这一点与关键字类似。

background-position 的默认值是 0% 0%，在功能上相当于 top left。这就解释了背景图像为什么总是从元素内边距区的左上角开始平铺，除非您设置了不同的位置值。

长度值
长度值解释的是元素内边距区左上角的偏移。偏移点是图像的左上角。

比如，如果设置值为 50px 100px，图像的左上角将在元素内边距区左上角向右 50 像素、向下 100 像素的位置上：

body
{
background-image:url(’/i/eg_bg_03.gif’);
background-repeat:no-repeat;
background-position:50px 100px;
}
注意，这一点与百分数值不同，因为偏移只是从一个左上角到另一个左上角。也就是说，图像的左上角与 background-position 声明中的指定的点对齐。
背景关联
如果文档比较长，那么当文档向下滚动时，背景图像也会随之滚动。当文档滚动到超过图像的位置时，图像就会消失。

您可以通过 background-attachment 属性防止这种滚动。通过这个属性，可以声明图像相对于可视区是固定的（fixed），因此不会受到滚动的影响：

body { background-image:url(/i/eg_bg_02.gif);
background-repeat:no-repeat; background-attachment:fixed }

background-attachment 属性的默认值是 scroll，也就是说，在默认的情况下，背景会随文档滚动。

CSS 文本
1）缩进文本
把 Web 页面上的段落的第一行缩进，这是一种最常用的文本格式化效果。

CSS 提供了 text-indent 属性，该属性可以方便地实现文本缩进。

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

这个属性最常见的用途是将段落的首行缩进，下面的规则会使所有段落的首行缩进 5 em：

p {text-indent: 5em;}

注意：一般来说，可以为所有块级元素应用 text-indent，但无法将该属性应用于行内元素，图像之类的替换元素上也无法应用 text-indent 属性。不过，如果一个块级元素（比如段落）的首行中有一个图像，它会随该行的其余文本移动。

提示：如果想把一个行内元素的第一行“缩进”，可以用左内边距或外边距创造这种效果。

使用负值
text-indent 还可以设置为负值。利用这种技术，可以实现很多有趣的效果，比如“悬挂缩进”，即第一行悬挂在元素中余下部分的左边：

p {text-indent: -5em;}

不过在为 text-indent 设置负值时要当心，如果对一个段落设置了负值，那么首行的某些文本可能会超出浏览器窗口的左边界。为了避免出现这种显示问题，建议针对负缩进再设置一个外边距或一些内边距：

p {text-indent: -5em; padding-left: 5em;}

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

百分数要相对于缩进元素父元素的宽度。换句话说，如果将缩进值设置为 20%，所影响元素的第一行会缩进其父元素宽度的 20%。

在下例中，缩进值是父元素的 20%，即 100 个像素：

div {width: 500px;} p {text-indent: 20%;}

<div> <p>this is a paragragh</p> </div>

继承
text-indent 属性可以继承，请考虑如下标记：

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

<div id=“outer”> <div id=“inner”>some text. some text. some text.
<p>this is a paragragh.</p> </div> </div>

以上标记中的段落也会缩进 50 像素，这是因为这个段落继承了 id 为 inner 的 div 元素的缩进值。

水平对齐
text-align 是一个基本的属性，它会影响一个元素中的文本行互相之间的对齐方式。它的前 3 个值相当直接，不过第 4 个和第 5 个则略有些复杂。

值 left、right 和 center 会导致元素中的文本分别左对齐、右对齐和居中。

西方语言都是从左向右读，所有 text-align 的默认值是 left。文本在左边界对齐，右边界呈锯齿状（称为“从左到右”文本）。对于希伯来语和阿拉伯语之类的的语言，text-align 则默认为 right，因为这些语言从右向左读。不出所料，center 会使每个文本行在元素中居中。

提示：将块级元素或表元素居中，要通过在这些元素上适当地设置左、右外边距来实现。

text-align:center 与 <CENTER>
您可能会认为 text-align:center 与 <CENTER> 元素的作用一样，但实际上二者大不相同。

<CENTER> 不仅影响文本，还会把整个元素居中。text-align 不会控制元素的对齐，而只影响内部内容。元素本身不会从一段移到另一端，只是其中的文本受影响。
文本装饰
接下来，我们讨论 text-decoration 属性，这是一个很有意思的属性，它提供了很多非常有趣的行为。
text-decoration 有 5 个值：

none
underline
overline
line-through
blink
underline 会对元素加下划线，就像 HTML 中的 U 元素一样。overline 的作用恰好相反，会在文本的顶端画一个上划线。值 line-through 则在文本中间画一个贯穿线，等价于 HTML 中的 S 和 strike 元素。blink 会让文本闪烁，类似于 Netscape 支持的颇招非议的 blink 标记。

none 值会关闭原本应用到一个元素上的所有装饰。通常，无装饰的文本是默认外观，但也不总是这样。例如，链接默认地会有下划线。如果您希望去掉超链接的下划线，可以使用以下 CSS 来做到这一点：

a {text-decoration: none;}

注意：如果显式地用这样一个规则去掉链接的下划线，那么锚与正常文本之间在视觉上的唯一差别就是颜色（至少默认是这样的，不过也不能完全保证其颜色肯定有区别）。

还可以在一个规则中结合多种装饰。如果希望所有超链接既有下划线，又有上划线，则规则如下：

a:link a:visited {text-decoration: underline overline;}

不过要注意的是，如果两个不同的装饰都与同一元素匹配，胜出规则的值会完全取代另一个值。请考虑以下的规则：

h2.stricken {text-decoration: line-through;} h2 {text-decoration:
underline overline;}

对于给定的规则，所有 class 为 stricken 的 h2 元素都只有一个贯穿线装饰，而没有下划线和上划线，因为 text-decoration 值会替换而不是累积起来

css中的选择器
1）标签选择器：是指通过元素的标签名称选择
CSS第一天笔记

2）id选择器：给元素设置id属性及属性值
语法结构：#id的值{属性：属性值；属性：属性值…}

补充：需要优先显示的加！important
3）类选择器：在 CSS 中，类选择器以一个点号显示：

.center {text-align: center}

<h1 class=“center”> This heading will be center-aligned </h1>

<p class=“center”> This paragraph will also be center-aligned.
</p>

注意：类名的第一个字符不能使用数字！它无法在 Mozilla 或 Firefox 中起作用
4）后代选择器:descendant selector）又称为包含选择器。
后代选择器可以选择作为某元素后代的元素。
语法结构：选中的元素后代元素{属性：属性值}
CSS第一天笔记

CSS第一天笔记
5）子代选择器：与后代选择器相比，子元素选择器（Child selectors）只能选择作为某元素子元素的元素。
语法结构：选中的元素>子代元素{属性：属性值}

6）组合选择器：
语法结构：选中的元素1，选中的元素2，…
CSS第一天笔记
7）伪类选择器：
：link 表示未访问的
：visited 表示已经访问的
：hover 表示鼠标悬浮时的状态
：active：表示超链接选中时的状态

CSS第一天笔记
8）伪元素选择器：
：before 在选中的元素内容之前显示重点：必须结合content‘’使用
：after 在选中的元素内容之后显示
：first-line 表示元素内容的首行设置样式
：first-letter 表示对选中元素的文本内容首个字符设置样式
9）相邻兄弟选择器：
相邻兄弟选择器（Adjacent sibling selector）可选择紧接在另一元素后的元素，且二者有相同父元素
例如，如果要增加紧接在 h1 元素后出现的段落的上边距，可以这样写：

h1 + p {margin-top:50px;}

这个选择器读作：“选择紧接在 h1 元素后出现的段落，h1 和 p 元素拥有共同的父元素”。
语法解释
相邻兄弟选择器使用了加号（+），即相邻兄弟结合符（Adjacent sibling combinator）。

注释：与子结合符一样，相邻兄弟结合符旁边可以有空白符。

请看下面这个文档树片段：

<div>
<ul>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ul>
<ol>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ol>
</div>
在上面的片段中，div 元素中包含两个列表：一个无序列表，一个有序列表，每个列表都包含三个列表项。这两个列表是相邻兄弟，列表项本身也是相邻兄弟。不过，第一个列表中的列表项与第二个列表中的列表项不是相邻兄弟，因为这两组列表项不属于同一父元素（最多只能算堂兄弟）。

请记住，用一个结合符只能选择两个相邻兄弟中的第二个元素。请看下面的选择器：

li + li {font-weight:bold;}上面这个选择器只会把列表中的第二个和第三个列表项变为粗体。第一个列表项不受影响。
10）
属性选择器
对带有指定属性的 HTML 元素设置样式。
可以为拥有指定属性的 HTML 元素设置样式，而不仅限于 class 和 id 属性。
注释：只有在规定了 !DOCTYPE 时，IE7 和 IE8 才支持属性选择器。在 IE6 及更低的版本中，不支持属性选择。

属性选择器
下面的例子为带有 title 属性的所有元素设置样式：

[title]
{
color:red;
}
属性和值选择器

下面的例子为 title=“W3School” 的所有元素设置样式：

[title=W3School]
{
border:5px solid blue;
}
设置表单的样式

属性选择器在为不带有 class 或 id 的表单设置样式时特别有用：

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样式：
color 设置文字的颜色，如： color:red;
font-size 设置文字的大小，如：font-size:12px;
font-family 设置文字的字体，如：font-family:‘微软雅黑’;
font-style 设置字体是否倾斜，如：font-style:‘normal’; 设置不倾斜，font-style:‘italic’;设置文字倾斜
font-weight 设置文字是否加粗，如：font-weight:bold; 设置加粗 font-weight:normal 设置不加粗
font 同时设置文字的几个属性，写的顺序有兼容问题，建议按照如下顺序写：
font：是否加粗字号/行高字体；如：font:normal 12px/36px ‘微软雅黑’;
line-height 设置文字的行高，如：line-height:24px;
text-decoration 设置文字的下划线，如：textdecoration:none;
将文字下划线去掉 text-indent 设置文字首行缩进，如：text-indent:24px; 设置文字首行缩进24px
text-align 设置文字水平对齐方式，如text-align:center 设置文字水平居中
2．背景设计
background-color 设置背景颜色
background-image 设置背景图片地址
background-repeat 设置背景图片如何重复平铺
background-position 设置背景图片的位置
background-attachment 设置背景图片是固定还是随着页面滚动
条滚动
实际应用中，我们可以用background属性将上面所有的设置项
放在一起，而且也建议这么做，这样做性能更高，而且兼容性更好，比如：
“background: #00FF00 url(bgimage.gif) no-repeat
left center fixed”，这里面的“#00ff00”是设置backgroundcolor；
“url(bgimage.gif)”是设置background-image；
“norepeat”是设置background-repeat；
“left center”是设置
background-position；
“fixed”是设置background-attachment，
各个设置项用空格隔开，有的设置项不写也是可以的，它会使用默
认值。

上一篇： Python—入门速成题目练习十五

下一篇： Java 流式编程概述

CSS第一天笔记

CSS的学习

Struts2学习笔记 JSPStruts

如何使用CSS3画出一个叮当猫_html/css_WEB-ITnose

如何在blur或focusout事件里得到即将得到焦点的元素？另外这两个事件有什么区别？_html/css_WEB-ITnose

蒙版倒影渐变_html/css_WEB-ITnose

怎样制作web版的folder treeview_html/css_WEB-ITnose

CSS对话框特效兼容性好_html/css_WEB-ITnose

Struts2学习笔记

现在就能投入使用的12个高端大气上档次的CSS3特性_html/css_WEB-ITnose

关于ueditor图片上传问题_html/css_WEB-ITnose

CSS知识点总结

CSS第一天笔记

CSS的学习

Struts2学习笔记 JSPStruts

如何使用CSS3画出一个叮当猫_html/css_WEB-ITnose

如何在blur或focusout事件里得到即将得到焦点的元素？另外这两个事件有什么区别？_html/css_WEB-ITnose

蒙版 倒影 渐变_html/css_WEB-ITnose

怎样制作web版的folder treeview_html/css_WEB-ITnose

CSS对话框特效 兼容性好_html/css_WEB-ITnose

Struts2学习笔记

现在就能投入使用的12个高端大气上档次的CSS3特性_html/css_WEB-ITnose

关于ueditor图片上传问题_html/css_WEB-ITnose

CSS知识点总结

蒙版倒影渐变_html/css_WEB-ITnose

CSS对话框特效兼容性好_html/css_WEB-ITnose