1. Css概念

CSS 指层叠样式表 (Cascading Style Sheets)级联样式表

1.1 Css与Html的关系

Css 以 html 为基础的.
Css 主要设置的就是 html 标签中的属性样式,css 进行网页布局.

1.2 Css语法

选择器{属性:值; 属性:值;…. }
选择器 : 就是一个选择谁的过程.
参数说明 : 属性和属性值之间用冒号(:)隔开,定义多个属性时,属性之间用英文输入法下的分号;隔开.

属性	赋值	介绍
color	color: red;	前景色（文字颜色）
font-size	font-size: 20px;	设置文字大小
width	width: 30px;	设置宽度
width	width: 30px;	设置宽度
Height	height:30px;	设置高度
Background-color	background-color:red;	设置背景颜色
Text-align	text-align:center; left/right;	文字居中
Text-indent	text-indent: 2em；	首行缩进

Px : 像素
注意 :
- Text-align:center; 在块级元素中可以让文字居中

1.3 Css 书写位置介绍

内嵌式写法

<head>
    <meta charset="utf-8">
    <style type="text/css">
        p{
          color:red;
        }
    </style>
</head>

1.4 选择器的分类

基础选择器
- 标签选择器
- 类选择器
- id 选择器
  -通配符选择器
复合选择器
- 标签指定式选择器
- 后代选择器
- 并集选择器

1.5 标签选择器

标签 : 就是 html 中的标签
用法 :
标签名{属性:值; 属性:值;}

颜色的显示方式
- 直接设置对应颜色的名称
  p{color:red;}
- 通过十六进制显示
  color:#2934DE;
- 通过 rgb 方式显示
  - R : 代表的是红色（red） 0-255
    G : 代表的是绿色（green） 0-255
    B : 代表的是蓝色（blue） 0-255
- rgba
  - a : 设置透明度 alpha 0-1

1.6 类选择器

用法 :
- .自定名称{属性:值;}
调用 :
- 标签通过 class 属性调用类样式
  .fontcolor{color:red;}
特点 :
- 谁调用谁改变,多个标签可以同时调用一个类样式.
- 一个标签可以调用多个类样式

1.7 类的命名规范

不能以纯数字或者以数字开头定义类名
不推荐使用汉字定义类名
不能以特殊符号或者以特殊符号开头（“_”除外）定义类名
不建议使用标签名或者属性名定义类名

1.8 Id选择器

用法 :
- #id名称{属性:值;}
调用 :
<p id ="p_color">hello,world!</p>
特点 :
- 不建议多个标签使用同一 id 选择器的样式
- 一个标签只能调用一个 id 样式

1.9 通配符选择器

用法 :
- {属性:值; 属性:值;}
  `{color: red; font-size: 30px;}`
特点 :
- 将页面中所有的标签都选中,设置样式
- 进行页面样式的初始化
注意 :
- 在写样式的时候 (类选择器),如果有样式代码重复使用的时候,我们
  要提取公共类.

1.10 字体相关属性

Font-size : 设置文字大小
Font-family : 设置文字字体
Font-weight : 设置文字加粗
Font-style : 设置文字斜体
Line-height : 行高

1.11 Font-family

直接设置汉字
p{font-family: 微软雅黑;}
设置对应字体的英文
可以设置 unicode 编码
Font-family 可以设置多个值;
{font-family: "Simsum","宋体"}

1.12 Font-weight

取值方式 :
- 直接设置数字 100-900
- bold (字体加粗) 效果与 700-900
- normal (文字字体正常显示)
注意 :
- 文字加粗显示,推荐使用 font-weight:700;

1.13 Font-style(斜体)

italic 文字斜体显示
normal 文字正常显示

1.14 Font 属性联写

用法 :

1 2	font: font-style font-weight font-size/line-height font-family

注意 :
font 属性联写必须有 font-size 和 font-family(其他属性可以不写)
font-size 和 font-family 的顺序不能换

2. 标签指定选择器

用法 :
标签名.选择器名{属性:值; 属性:值;}

3. 后代选择器

特点 :
- 标签之间必须属于嵌套关系.
用法 :
- 选择器 +空格+ 选择器{属性:值; 属性:值;…}
特点 :
- 选择器之间必须有空格
关系 :
- 父与子的关系

4. 并集选择器

用法 :
- 选择器,选择器,选择器{属性:值;}
作用 :
- 将样式集体声明,css 样式初始化.
特点 :
- 并集选择器之间必须用逗号隔开!
- margin: 0 auto; 让盒子居中显示。

5. 作业与一些总结

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <style>
          .newsTitle{Text-align:center;}
          .secondTitle{Text-align:center;}
          .time{
            color: #AABBCC;
            font-size: 14px;}
          .adTitle{color: #990000;font-size: 14px;}
          .show{color: red;}
          .search{
            color: #008000;
          }
          .essay{
            text-indent:2em;
          }
          .weibo{
            color: #3399CC;
          }
        </style>
    </head>
    <body>
      <h1 class="newsTitle">中乙队赛前突然换帅仍胜毅腾 高原黑马欲阻击舜天</h1>
      <p class="secondTitle">
      <font class="time">2014年07月16日20:11</font>
      <font class="adTitle">新浪体育 评论中大奖（11人参与）</font>
      <a href="http://www.w3school.com.cn">收藏本文</a>
        <input class="show" type="text" value="请输入查询条件">
        <input class="search" type="button" value="搜索">
<hr />
<p class="essay">
  新浪体育讯　7月16日是燕京啤酒<a class="weibo" href="http://www.w3school.com.cn">[微博]</a>2014中国足协杯第三轮比赛，丽江嘉云昊队主场迎战哈尔滨毅腾队的比赛日。然而就在比赛日中午，丽江嘉云昊队主帅李虎和另外两名成员悄然向俱乐部提出了辞呈，并且收拾行囊准备离开。在这样的情况下，丽江嘉云昊队不得不由此前的教练员杨贵东代理指挥了本场比赛。
</p>
<p class="essay">
在昨日丽江嘉云昊队主帅李虎就缺席了赛前的新闻发布会，当时俱乐部给出的解释是李虎由于身体欠佳，去医院接受治疗。然而今日李虎出现在俱乐部时，向记者否认了这一说法，并且坦言已经向俱乐部提出了辞呈。</p>
<p class="essay">
据记者多方了解的情况，李虎<a class="weibo" href="http://www.w3school.com.cn">[微博]</a>极其教练组近来在执教成绩上承受了不小的压力，在联赛间歇期期间，教练组曾向俱乐部提出能够多引进有实力的球员补强球队，然而由于和俱乐部在投入以及成绩指标上的分歧，李虎最终和教练组一起在比赛日辞职。</p>
<p class="essay">
这样的情况并没有影响到丽江嘉云昊队<a class="weibo" href="http://www.w3school.com.cn">[微博]</a>的队员，在比赛中丽江队在主场拼的非常凶，在暴雨之中仍然发挥出了体能充沛的优势，最终凭借点球击败了中超球队哈尔滨毅腾，顺利晋级下一轮比赛。<B>根据中国足协杯的赛程，丽江嘉云昊队将在本月23日迎战江苏舜天队。</B></p>
    </body>
</html>