1. 网页样式

1.1 引入方法

1.1.1内联样式

<标记名 style="样式属性：样式属性值；样式属性：样式属性值；·······"></标记名>

<div style="font-size:20px; line-height:30px; text-align:center: ">设置想要输入的文本</div>

1.1.2内部样式表

<style type = "text/csS">
选择符1{样式属性：样式属性值;样式属性：样式属性值…}
选择符2{样式属性：样式属性值；样式属性：样式属性值;…}
选择符3{样式属性：样式属性值；样式属性：样式属性值;⋯}
</style>

在<head>中引入<style>


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

1.1.3链接外部样式

rel=“styesheet”用来定义链接的文件与html之间的关系
styesheet值表示指定一个固定或者首选的样式
type="text/css"指文件的类型是样式表文本

href="style.css"文件所在的位置

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

1.1.4导入外部样式

<style>
    @ import ulr("样式路径")
</style>

导入外部样式使用import方法，常用如下

1.2 基础语法

1.3 选择器的分类

1.3.1标记选择器

css

<style>
h1{
color:"red"
}

html

<h1>标签选择器使用</h1>

1.3.2通用选择器

对所有元素都生效
符号表示

*{
margin: 0;
padding: 0;
}

1.3.3 i d选择器

id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式
HTML元素以id属性来设置id选择器, CSS 中 id 选择器以 "#" 来定义。
id名称是唯一的，只能对应于文档中一个具体的元素

<html>
<head>
<meta charset="utf-8"> 
<title>id选择器</title> 
<style>
#para1{
	text-align:center;
	color:red;
} 
</style>
</head>

<body>
<p id="para1">id选择的部分</p>
<p>这个段落不受该样式的影响。</p>
</body>
</html>

1.3.4类选择器

class 选择器用于描述一组元素的样式，class 选择器有别于id选择器，class可以在多个元素中使用。
class 选择器在 HTML 中以 class 属性表示,
在 CSS 中类选择器以一个点 . 号显示：
在以下的例子中，所有拥有 center 类的 HTML 元素均为居中

所有的 p 元素使用 class="center" 让该元素的文本居中:

<style>
p.center{
	text-align:center;
}
</style>
<body>
<h1 class="center">这个标题不受影响</h1>
<p class="center">这个段落居中对齐。</p> 
</body>

2.多个 class 选择器可以使用空格分开

<style>
.center {
	text-align:center;
}
.color {
	color:#ff0000;
}
</style>

<body>
<h1 class="center">标题居中</h1>
<p class="center color">段落居中，颜色为红色。</p> 
</body>

1.3.5属性选择器


    <style>
        /* 用属性名字来选择元素 */
        [title]{
            color: red;
        }
        a[title]{
            color: green;
        }

        a[title][href]{
            color: black;
        }
    </style>

<body>
    <h1>这是一个标题</h1>
    <h2 title="computer class one">hello word</h2>
    <a href="http://www.baidu.com" title="baidu">百度用一下</a><br>
    <a href="http://www.12306.com">12306</a>

2.属性值选择器

1.3.6后代选择器

E1 E2{属性1：属性值1;....}

<style type="text/css">
  ul a{
  color:red；
  }
</style>

<body>
     <ul>html:<a href="网址地址">html</a></li>
     <ul>css:<a href="网址地址">css</a></li>
     <ul>javaScript:<a href="网址地址">javaScript</a></li>
     </ul>
</body>

1.3.7子代选择器

e>f{属性1：属性值1；.....}
子选择器只有对直接后代有影响的选择器
对“孙子”以及对各层的后代不产生作用

 div > a{
            color: red;
        } 
    </style>
</head>

<body>
    <h1>这是一个段落</h1>
    <div id="one" class="test demo">
        <h2 title="computer class one">hello word</h2>
        <a href="http://www.baidu.com" title="baidu">百度用一下</a>
        <br>
        <p>
            <a href="http://www.12306.com">12306</a>
        </p>
 

        <ul>
            <li><h2>榴莲</h2></li>
            <li>苹果</li>
            <li>凤梨</li>
            <li>火龙果</li>
        </ul>
    </div>

1.38相邻选择器

1.3.9伪类选择器

“：hover”。当鼠标悬浮在元素上方时，像元素添加样式。
“：link”。向未访问的链接添加样式。
“：visited”。向已被访问的链接添加样式。
“：active”。向被激活的元素添加样式。
“：focus”。向拥有键盘输入焦点的元素添加样式。
“：fist-child”。向元素的第一个子元素添加样式。
“：lang (语言代码)”。向带有指定lang属性的元素添加样式。

选择符:link {color:#FF0000;} /* 未访问的链接 */
选择符:visited {color:#00FF00;} /* 已访问的链接 */
选择符:hover {color:#FF00FF;} /* 鼠标划过链接 */
选择符:active {color:#0000FF;} /* 已选中的链接 */

1.3.10伪元素选择器

:first-letter 伪元素

:first-line 伪元素
:before 伪元素

h1:before {content:url(smiley.gif)
	"文本";
	}

:after 伪元素

":after" 伪元素可以在元素的内容之后插入新内容。

和content属性一块使用在元素之后

1.3.11选择器分组

h2, p{
      colr:gray;
}

1.4选择器优先级

1.5 `css`单位

字体相对单位有：em，ex,ch,rem;
视窗相对单位有：vw , vh , vmin , vmax;
绝对长度单位固定尺寸是物理量单位：cm,mm,in,px,pt,pc;
- 使用广泛的有：em,rem,px,%来度量页面元素的尺寸。
- %：它是一个纯粹的相对长度单位。
- in：英寸（1in=96px=2.54cm）。
- cm
- mm
- pt:point,大约1/72英寸;(1pt=1/72in).
- px：像素
- em：浏览器默认字体大小为16px。则2em=32px。
- rem：相对根元素字体尺寸的倍数，1rem=16px。

1.6 给标签元素添加属性

/*...*/

2 .网页基础样式添加

2.1背景

2.1.1背景色background-color

background-color：颜色值;

2.1.2背景图background-imge

background-imge：url(图片路径)|none；

2.1.3背景图平铺background-repeat

2.1.4背景图像滚动background-attachment

2.1.5背景图定位background-position

2.1.6背景复合属性

2.2文本

2.2.1文本颜色

color："颜色值"

2.2.2水平对齐text-align

2.2.3文本缩进

text-indent：单位长度；

使用：em或者px表示

2.2.4行高

line-height: 20px ;

2.2.5垂直对齐

vertieal-align:left；

2.2.6文本装饰

2.3字体

2.3.1字体类型

2.3.2字体大小

2.3.3字体风格

2.3.4字体粗细

2.3.5字体复合属性

2.4超链接样式

2.5列表

2.5.1列表符号

2.5.2图片符号

2.5.3列表位置

2.5.4列表综合设置

2.6表格

2.6.1 border-collapse属性

2.6.2 border-spacing属性

2.6.3 empty-cells属性

2.6.4 table-layout属性

2.6.5 caption-side属性

2.7设置网页元素的样式

2.7.1超链接样式设置

2.7.2列表样式

2.7.3全局字体文本设置

2.7.4头部样式

3.网页布局

3.1`DIV`进阶（盒子模型）

3.1.1宽高

3.1.2改变盒子大小计算方法

3.1.3边框

3.1.4轮廓

3.1.5内边框

3.1.6外边框

3.1.7外边距合并

3.2给页面元素添加盒子

3.2.1新闻列表

4.网页排版

4.1布局与定位

4.1.1相对定位

4.1.2绝对定位

4.1.3固定定位

4.1.4堆叠

4.2浮动

4.2.1概述

4.2.2浮动

4.2.3图文绕排

4.2.4浮动清除

4.2.5

4.3页面元素位置排版

4.3.1浮动列表菜单

4.3.2页面中的左右结构布局及新闻列表样式

1小侯

css总结