2017.11.3第三课_first-line :向 3 文本添加样式-CSDN博客

本文链接：https://blog.csdn.net/gbb930920/article/details/78436953

一、 CSS简介

CSS 指层叠样式表(Cascading Style Sheets)，定义如何显示HTML元素。
CSS在家装设计领域有光明的前景，我们试试将将CODING COFFEE咖啡馆装修一下。

1.CSS样式规则和CSS加载的方式

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

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

HTML文档中使用元素引入外部样式文件，引入外部样式文件应在<head>元素中增加 <link>子元素。
2.导入外部样式单

<style  type="text/css">
                @import "../outer.css";
                @import url('outer.css');
</style>

二、css样式

1.内联元素和区块元素

（1）区块元素总是在新的一行上显示。高度、行高、宽度、内边距、外边距等都是可控制的。
高度默认为0，是根据元素内的内容而决定的，宽度是父元素的宽度，但是可以通过css 控制它，显示的指定他的宽度和高度，可以利用浮动和定位来将他与其他的块元素也显示在一行上。
实例:

<h1>,   <p>,    <ul>,   <table>。

（2）内联元素内联元素和其他的元素显示在一行上。上下边距、高度，宽度都是不可改变的，他的宽度是根据他的显示文本和图像的宽度。
实例:

<b>,    <td>,   <a>,    <img>。

2.选择器

（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）子选择器
子选择器要求目标选择器必须作为外部选择器对应的元素的直接子元素。

（6）群组选择器
群组选择器使用逗号对选择符进行分隔。我们可以将逗号读成“和”。

3. 伪类

CSS伪类是添加到选择器的关键字，指定要选择的元素的特殊状态。例如， :hover 将在用户悬停在选择器指定的元素上时应用样式。
（1）anchor伪类
链接的不同状态都可以以不同的方式显示。
注意：在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;
}
（3）first-line伪类
“first-line” 伪元素用于向文本的首行设置特殊样式。
在下面的例子中，浏览器会根据 “first-line” 伪元素中的样式对p元素的第一行文本进行格式化
（4）before伪类
“:before” 伪元素可以在元素的内容前面插入新内容。

4.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通道的延伸 - 指定对象的透明度。

RGBA颜色值指定：RGBA（红，绿，蓝，alpha）。 Alpha参数是一个介于0.0（完全透明）和1.0（完全不透明）之间的参数。
p {
background-color:rgba(255,0,0,0.5);
}

5.背景图片

(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;}
(5)背景图片的定位
可以利用 background-position 属性改变图像在背景中的位置。

(6)背景图片大小
background-size属性指定背景图片大小。

(7)背景的简写属性
为了简化这些属性的代码，我们可以将这些属性合并在同一个属性中.
背景颜色的简写属性为 “background”:
当使用简写属性时，属性值的顺序为：
background-color
background-image
background-repeat
background-attachment
background-position

6.文本

(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”，每一行被展开为宽度相等，左，右外边距是对齐（如杂志和报纸）。
(3)文本修饰
text-decoration属性一般用于删除链接的下划线。

(4)文本转换
文本转换属性是用来指定
(5)文本缩进
text-indent属性控制首行文本的缩进。
属性值可以是固定值（包括负数），也可是百分比。注意em单位一般代表网页中一个字符的大小。
(6)字符间距和字间距
letter-spacing属性控制字符的间距。属性值可以是正负数。 word-spacing属性控制字间距。我们在这里设置CODING COFFEE的产品页和首页。
(7)行间距
line-height属性控制行间距（简称行高）。

(8)元素的垂直对齐方式
vertical-align属性控制元素垂直对齐方式。

三、CSS列表

1. CSS列表

CSS列表属性作用如下：
设置不同的列表项标记为有序列表。设置不同的列表项标记为无序列表。设置列表项标记为图像。
（1）使用不同的列表项标记
使用list-style-type改变列表项标记。
（2）使用图片作为列表项
使用list-style-image可以用图片作为列表的标记项。

四、课后作业

1.主页设置背景，调整文本格式

主页面

div{
 text-align:center;
 margin: 180px 400px 200px 400px;
  color:white;
   font-weight:bold;
   font-size:18px;
}
h1{
text-align:center;
color:white;
font-size:58px;
 margin: 100px;
}
a:link {color:blue;}      /* 未访问链接*/
a:visited {color:red;}  /* 已访问链接 */
a:hover {color:green;}  /* 鼠标移动到链接上 */
a:active {color:yellow;}  /* 鼠标点击时 */
a{
  text-decoration:none;/*去掉下划线*/
}
/*h1:before 
{
    content:"真的";
    background-color:pink;
    color:rgb(0,0,255);
    font-weight:bold;
    font-size:60px;
    font-style:italic;
}*/
body {
   background-image:url('../img/main.jpg');
   background-repeat:no-repeat;

}

这里写图片描述

2.div浮动的使用

菜单页面
caidan.html

<div class="main">
<div class="img">
<img src="../img/c.jpg" width="400px" height="330px">
</div>
<div class="text">
<h2>蓝山咖啡</h2>
<p>蓝山咖啡是世界上最优越的咖啡,且产量较少,物以稀为贵。此种咖啡拥有所有好咖啡的特点,不仅口味浓郁香醇,而且由于咖啡的甘、酸、苦三味搭配完美</P></div>
</div>
<div style="clear:both;"></div>
<hr>
<div class="main">
<div class="img">
<img src="../img/a.jpg" width="400px" height="330px">
</div>
<div class="text">

caidan.css

<div class="main">
<div class="img">
<img src="../img/c.jpg" width="400px" height="330px">
</div>
<div class="text">
<h2>蓝山咖啡</h2>
<p>蓝山咖啡是世界上最优越的咖啡,且产量较少,物以稀为贵。此种咖啡拥有所有好咖啡的特点,不仅口味浓郁香醇,而且由于咖啡的甘、酸、苦三味搭配完美</P></div>
</div>
<div style="clear:both;"></div>
<hr>
<div class="main">
<div class="img">
<img src="../img/a.jpg" width="400px" height="330px">
</div>
<div class="text">

这里写图片描述

3.列表前加上小图标

门店页面
mendian.html

 <h1>我们的门店</h1>
 <ul class="item">1
   <li class="vip">超级
    <ul>

 <li id="vone">北京一号店</li> 
 <ul class="item"> 
    <li class="vip">我是超级迷你小门店</li>
        </ul>
  <li class="vip">上海二号店</li>
 <li class="vip">南通三号店</li>
 </ul>
   </li>

 </ul>
 <ul>

mendian.css

.vip{
   color:green;
}
#vone{
   color:yellow;
}
.item > .vip{
 color:red;
}
ul
{
  list-style-image: url('../img/tang.png');
}
body {
   background-image:url('../img/bg.jpg');
   background-repeat:no-repeat;
   background-origin:content-box;
   color:white;
}

这里写图片描述