十一月三日课堂笔记

最新推荐文章于 2017-12-25 22:06:53 发布

再让我多睡几分钟

最新推荐文章于 2017-12-25 22:06:53 发布

阅读量336

点赞数

分类专栏：笔记

本文链接：https://blog.csdn.net/Zaiaj/article/details/78434861

版权

笔记专栏收录该内容

16 篇文章 0 订阅

订阅专栏

1.3 CSS样式规则和CSS加载的方式
1.CSS样式规则
CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明:
选择器通常是您需要改变样式的 HTML 元素。
每条声明由一个属性和一个值组成。
属性（property）希望设置的样式属性（style attribute）。
2. CSS加载的方式
1.引入外部文件

<link href="outer.css" rel="stylesheet" type="text/css"></link>

HTML文档中使用“`“`元素引入外部样式文件，引入外部样式文件应在“`“`元素中增加 “`“`子元素。 2.导入外部样式单 “`“` @import “../outer.css”; @import url(‘outer.css’); “` 导入外部样式表单需要在“`“`元素中执行@import进行导入。 3.使用内部CSS样式一般来说我们不建议使用内部CSS样式：复用性小。导致HTML文档过大，会导致网络负载严重。修改整站风格时，需要对每个网页文件进行样式修改。 CSS样式规则和CSS加载的方式 8 “`

<title>三列布局</title>
<style>
body{ margin:0; padding:0; font-size:30px; font-weight:bold}
div{ text-align:center; line-height:50px}
.left{ width:240px; height:600px; background:#ccc; position:absolute; left:0; top:0
}
.main{ height:600px; margin:0 240px; background:#9CF}
.right{ height:600px; width:240px; position:absolute; top:0; right:0; background:#
FCC;}
</style>
</head>
<body>
<div class="left">left</div>
<div class="main">main</div>
<div class="right">right</div>
</body>

2. “` “`元素 HTML “`“`元素是内联元素，可用作文本的容器 “`“`元素也没有特定的含义。当与 CSS 一同使用时，“`元素可用于为部分文本设置样式属性。 DIV和SPAN标签介绍 12 1.5 选择器装修队CSS已经进场了，但是我们要小心控制装修队，可不能让装修队在家里胡作非为。所以我们要使用选择器精准的选择网页中需要装修的地方。 1.通配符选择器使用”*”表示通配符，用来选择页面所有元素的样式。 *{ margin:0; padding:0;} 2.类选择器类选择器指定的样式对指定class属性的元素起作用。使用“.”标识一个类选择符，类名可以任意。 .myclass{…} 3.ID选择器 ID选择器中的样式会对具有指定id属性的HTML元素起作用。 HTML元素以id属性来设置id选择器,CSS中id选择器以”#”来定义。需要注意的是id在HTML文档中具有唯一性，是不可以重复的。 #idValue{ …} 4.包含选择器包涵选择器用于指定处于某个选择器对应的内部元素。 h1 em {color:red;} 5.子选择器子选择器要求目标选择器必须作为外部选择器对应的元素的直接子元素。选择器 13

parent>child{width: 200px; height: 35px;}
<style>
</style>
<div class="a">
<p>A smooth, mild <span class="b">blend of coffees</span> from Mexico, </p>
<div>A smooth, <p>mild</p>mild</div>
</div>

6.群组选择器群组选择器使用逗号对选择符进行分隔。我们可以将逗号读成“和”。 h1,p,myClass,#main{ font-size:20px; } 选择器 14 1.6 伪类 CSS伪类是添加到选择器的关键字，指定要选择的元素的特殊状态。例如， :hover 将在用户悬停在选择器指定的元素上时应用样式。 1.anchor伪类链接的不同状态都可以以不同的方式显示。

<style>
a:link {color:#000000;} /* 未访问链接*/
a:visited {color:#00FF00;} /* 已访问链接 */
a:hover {color:#FF00FF;} /* 鼠标移动到链接上 */
a:active {color:#0000FF;} /* 鼠标点击时 */
</style>
<body>
<p><b><a href="/css/" target="_blank">这是一个链接</a></b></p>

注意： a:hover 必须在 a:link 和 a:visited 之后，需要严格按顺序才能看到效果。

注意： a:active 必须在 a:hover 之后。

注意：在CSS定义中，a:hover必须被置于a:link和a:visited之后，a:active必须被置于 a:hover之后，才是有效的。伪类的名称不区分大小写。 2.first-child伪类 :first-child CSS 伪类代表了一组兄弟元素中的第一个元素。被匹配的元素需要具有一个父级元素。 element:first-child { style properties } 上面的CSS作用于下面的HTML:

span:first-child {
background-color: lime;
}
<div>
<span>This span is limed!</span>
<span>This span is not. :(</span>
</div>

伪类 15 3.first-line伪类 “first-line” 伪元素用于向文本的首行设置特殊样式。在下面的例子中，浏览器会根据 “first-line” 伪元素中的样式对p元素的第一行文本进行格式化：

<style>
p:first-line {
color:red;
}
</style>
<body>
<p>A smooth, mild blend of coffees from Mexico, A smooth, mild blend of coffees from M
exico,A smooth, mild blend of coffees from Mexico,A smooth, mild blend of coffees from
Mexico,A smooth, mild blend of coffees from Mexico,A smooth, mild blend of coffees fr
om Mexico,A smooth, mild blend of coffees from Mexico,A smooth, mild blend of coffees
from Mexico,A smooth, mild blend of coffees from Mexico,A smooth, mild blend of coffee
s from Mexico,A smooth, mild blend of coffees from Mexico,A smooth, mild blend of coff
ees from Mexico,A smooth, mild blend of coffees from Mexico,A smooth, mild blend of co
ffees from Mexico,</p>
</body>

注意：”first-line” 伪元素只能用于块级元素。下面的属性可应用于 “first-line” 伪元素：

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

伪类 16 4.:before伪类 “:before” 伪元素可以在元素的内容前面插入新内容。下面的例子在每个“`

“`元素前面插入一幅图片：

<style>
p:before
{
content:"台词：-";
background-color:yellow;
color:red;
font-weight:bold;
}
</style>
<body>
<p>The :before pseudo-element inserts content before an element.</p>

注意:仅当 !DOCTYPE 已经声明 IE8 支持这个内容属性

大家应该想到了，既然有:before伪类，自然就有:after伪类，大家可以自行学习。在css中实际上提供了非常多的伪类可以使用，我们指数选择了一些常用的进行介绍，其他伪类的学习，需要大家自主学习。伪类 17 1.7 CSS颜色颜色是由红（RED），绿（GREEN），蓝（BLUE ）光线的显示结合。 CSS的颜色可以通过以下等方法指定：十六进制颜色、RGB颜色、RGBA颜色、颜色名等值指定。 1. 十六进制颜色值所有主要浏览器都支持十六进制颜色值。指定一个十六进制的颜色其组成部分是：＃RRGGBB，其中RR（红色），GG（绿色）和 BB（蓝色）。所有值必须介于0和FF之间。例如，＃0000FF值呈现为蓝色，因为蓝色的组成设置为最高值（FF）而其他设置为0。

p
{
background-color:#ff0000;
}

2.RGB颜色值 RGB颜色值在所有主要浏览器都支持。 RGB颜色值指定：RGB（红，绿，蓝）。每个参数（红色，绿色和蓝色）定义颜色的亮度，可在0和255之间，或一个百分比值（从0％到100％）之间的整数。例如RGB（0,0,255）值呈现为蓝色，因为蓝色的参数设置为最高值（255）而其他设置为0。此外，下面的值定义相同的颜色：RGB（0,0,255），RGB（0％，0％，100％）。

p
{
background-color:rgb(255,0,0);
}

3.RGBA颜色值 RGBA颜色值被IE9, Firefox3+, Chrome, Safari,和Opera10+支持。 RGBA颜色值是RGB颜色值alpha通道的延伸 - 指定对象的透明度。 CSS颜色 18 RGBA颜色值指定：RGBA（红，绿，蓝，alpha）。 Alpha参数是一个介于0.0（完全透明）和1.0（完全不透明）之间的参数。

p
{
background-color:rgba(255,0,0,0.5);
}

CSS颜色 19 1.8背景图片 1.背景颜色 background-color 属性定义了元素的背景颜色。页面的背景颜色使用在body的选择器中: body {background-color:#b0c4de;} 2.背景图片 background-image 属性描述了元素的背景图像。默认情况下，背景图像进行平铺重复显示，以覆盖整个元素实体。 background:url(img_flwr.gif); 3.背景平铺重复设置 background-repeat属性控制背景图像的平铺重复效果。 4.背景图片固定在默认情况下，组件里的背景图片会随着滚动条的滚动而自动滚动，我们要把backgrounattachment的属性设为fixed,那么背景图片就会被固定在该组件中，不会随滚动条的滚动而移动。 body{background-attachment: fixed;} 背景图片 20 5.背景图片的定位可以利用 background-position 属性改变图像在背景中的位置。 6.背景图片大小 background-size属性指定背景图片大小。

div
{
background:url(img_flwr.gif);
background-size:80px 60px;
background-repeat:no-repeat;
}

7.背景的简写属性背景图片 21 为了简化这些属性的代码，我们可以将这些属性合并在同一个属性中. 背景颜色的简写属性为 “background”: 当使用简写属性时，属性值的顺序为：

background-color
background-image
background-repeat
background-attachment
background-position

以上属性无需全部使用，你可以按照页面的实际需要使用. 8.还记得CODING COFFEE的菜单页吗，我们使用今天所学的知识，为它附上好看的背景吧。背景图片 22 1.9 文本 1.文本的颜色颜色属性被用来设置文字的颜色。颜色是通过CSS最经常的指定：十六进制值 - 如:＃FF0000。一个RGB值-如:RGB(255,0,0)。颜色的名称 - 如:red。 body {color:red;} h1 {color:#00ff00;} h2 {color:rgb(255,0,0);} 2.文本的水平对齐方式文本排列属性是用来设置文本的水平对齐方式。文本可居中或对齐到左或右,两端对齐. 当text-align设置为”justify”，每一行被展开为宽度相等，左，右外边距是对齐（如杂志和报纸）。文本 23

<style>
p {
text-align: justify;
}
</style>
<body>
<p>Be careful to perform the actions in the correct sequence.</p>
</body>

3.文本修饰 text-decoration属性一般用于删除链接的下划线。

<style>
a {
text-decoration:none;
}
</style>
<body>
<a href="#">百度</a>
</body>

4.文本转换文本转换属性是用来指定在一个文本中的大写和小写字母。可用于所有字句变成大写或小写字母，或每个单词的首字母大写。

<style>
.uppercase {
text-transform:uppercase;
}
.lowercase {
text-transform:lowercase;
}
/* 首字母大写 */
.capitalize {
text-transform:capitalize;
}
</style>
<body>
<p class="uppercase">Hello,World!</p>
<p class="lowercase">Hello,World!</p>
<p class="capitalize">hello,world!</p>
</body>

文本 24 5.文本缩进 text-indent属性控制首行文本的缩进。属性值可以是固定值（包括负数），也可是百分比。注意em单位一般代表网页中一个字符的大小。

<style>
p {
text-indent:2em;
}
</style>
<p>

南通青鸟教育集团成立于2006年2月，学校秉承“学习改变命运、实训提升实力”的理念，以就业为导向，强势发展校企合作、定向培养，借助南通和长三角地区软件和服务外包兴旺发达的产业优势，累计为南通、上海、南京等城市培养和输送专业人才6000余人。

6.字符间距和字间距
letter-spacing属性控制字符的间距。属性值可以是正负数。
word-spacing属性控制字间距。
我们在这里设置CODING COFFEE的产品页和首页。
p{
word-spacing: 5px;
letter-spacing: 5px;
}
7.行间距
line-height属性控制行间距（简称行高）。
文本
25

css
<style>
p{
word-spacing: 5px;
letter-spacing: 5px;
line-height: 20px;
}
</style>
<p>A smooth, mild blend of coffees from Mexico
A smooth, mild blend of coffees from MexicoA smooth,
mild blend of coffees from MexicoA smooth,
mild blend of coffees from Mexico</p>

8.元素的垂直对齐方式
vertical-align属性控制元素垂直对齐方式。
vertical-align被用于垂直对齐inline元素，也就是display值为inline和inline-block的元素。
也就是垂直居中是运用在行内元素的。
文本
26
1.10 CSS列表
CSS列表属性作用如下：
设置不同的列表项标记为有序列表。
设置不同的列表项标记为无序列表。
设置列表项标记为图像。
1.使用不同的列表项标记
使用list-style-type改变列表项标记。

<style>
ul.a {list-style-type:circle;}
ul.b {list-style-type:square;}
ol.c {list-style-type:upper-roman;}
ol.d {list-style-type:lower-alpha;}
</style>
<ul class="a">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
<ul class="b">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
<p>有序列表实例:</p>
<ol class="c">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
<ol class="d">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>

2.使用图片作为列表项
使用list-style-image可以用图片作为列表的标记项。
CSS列表
27


<style>
ul
{
list-style-image:url('sqpurple.gif');
}
</style>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>

再让我多睡几分钟

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
十一月三日课堂笔记

1.3 CSS样式规则和CSS加载的方式 1.CSS样式规则 CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明: 选择器通常是您需要改变样式的 HTML 元素。每条声明由一个属性和一个值组成。属性（property）希望设置的样式属性（style attribute）。 2. CSS加载的方式 1.引入外部文件 HTML文档中使用元素引入外部样式文件，引入外部样式
复制链接

扫一扫