程序猿小白成长之路[CSS选择器]

总结之前学过的内容
CSS选择器1

1-1CSS使用来描述 HTML标签勇敢如何显示这样的一个代码。
例如 在html 中
<h3>材料</h3>
使用CSS
让h3标签显示成 绿色
让h3的字体再大一点
让h3有一个下划线

1-2注意：所有的CSS组合在一起就定义了整个网页的样式
2-1 CSS： Cascading Style Sheets
级联样式表的缩写

3-1第一个选择器
选择器：可以选择html 标签，并且修改这些标签的样子
3-2类型选择器：不带尖括号的标签名
3-3类型选择器是 CSS标签中最简单的选择器就是写标签名，并且不带尖括号，叫做类型选择器
例如
p{ 文本装饰 下划线
text-decoration: underline;
可以应用到选择 每个属性
器的很多属性中 通常有若干可选的值
的一个
}
4-1选择器语法
我们必须遵守选择其中特殊的语法规则
4-2
选择器名字的后面是一个开始的大括号
p{ 属性和属性的值中间是冒号
text-decoration: underline;
属性的值后面是分号

}
所有属性的列表后面是一个结束的大括号

注意：任何部分都不能丢掉，还有一定是英文半角的符号

4-3一个选择器中可以写很多属性
4-4类型选择器会作用在所有同名标签中
4-5选择一个标签的子元素
4-6派生选择器：作用在某些标签的字标签上

4-7伪类选择器：在原有选择器的基础上添加一个限定条件，当某种情况发生时再选择这个标签
a{
text-decoration: none;
}
表示文本装饰：无；

a:hover{
text-decoration: underline;
color: darkred
}
a:hover:伪类选择器，鼠标放到超链接上停留时才会被应用，使用伪类选择器缩小选择范围

first-child:缩小标签的选择范围，只选择第1个子标签

5-1添加样式的位置之一：在head 标签中添加 Style 字标签
<style type="text/css">
a{}
</style>
tyle:属性 通知浏览器，css在此；
因此，CSS选择器写在style开始标签和结束标签之间。

6-1 a标签的伪类选择器一共有 4 种
a{}

未访问的链接，和a{}同时并相同存在时会覆盖a{}
a :link{}

鼠标移动到超链接上时
a:hover{}

被选定的超链接
a:active{}

已访问的超链接
a:visited{}

注意：
a :link{}必须在a:hover{}之前
a:active{}必须在a:hover{}之后

记忆方式：
显示访问的时候，然后是鼠标放在上面，接着是当数遍点击的时候，最后鼠标已点击过（已访问）

文档学习网站优选：W3C
有许多文档可以学习，例如参考手册，测验/考试
CSS参考手册里有很多选择器（可自行查找）


CSS颜色
1-1有关键字颜色、十六进制颜色、十进制颜色
十六进制颜色由3部分组成
#FF 00 00
前两个FF表示 红色的多少
中间两个字符 表示包含绿色的多少
最后两个表示 蓝色的数量
由红 绿 蓝 三颜色组成
三颜色取值范围可以从16进制的00-FF，
或从十进制的 0-255

2018.7.11
CSS中的盒模式

盒：在body中的每个html标签实际上都被包围在一个看不见的矩形中，这个矩形就叫做“盒”。

块级别的标签（Block-level Tags)

块标签的内容占据了容器的整个宽度

容器：指最外层的body标签
每个块标签的盒都尽可能的占据页面的整个宽度

目前为止学过的块标签有：
h1-h6,p,ul,ol,li

如果一个标签不是块标签，那么我们就叫它内联标签
a标签就是一个内联标签的例子

内联标签不会占据容器的一整行，内容的多少决定了它的宽度
已学的内联标签：a标签
其它的还包括：
img,input,lable等等

将块标签转化成内联标签，或将内联标签转化成块标签，需设置CSS的display属性
例如，将导航栏现在的垂直显示修改为水平显示
垂直： li 标签默认的display属性的值是：block
此为块标签。

水平：display:inline;
此为内联标签

块标签之间的间距：
盒模式是描述标签的边框和间距的一种方式

盒模式由4部分组成：
1、内容区域-content area:内容区域中包含的是盒子中真正的内容（文本、图片等）；
（内容区域的默认高度由内容的高度决定）

2、补白或内边距padding
padding包围在内容区域的边缘，分为上、右、下、左四个区域

3、边框border
border 包围在补白padding的边缘，也分为上、右、下、左四个区域

4、边距-margin
margin 包围在border的上、右、下、左四个边缘


padding的属性（上、右、下、左）

border的属性
border-width 边框的宽度
border-style 边框的样式 实线或虚线
border-color 边框的颜色
border-bottom 设置其中一侧的边框 right/left/top10像素

添加margin属性的方式和padding属性一样的（上、右、下、左）

计算盒子的尺寸：
整个盒子的宽度=内容区域的宽度+左padding+右padding+左border+右border+左margin+右margin
整个盒子的高度也一样。

盒模式总结：
每个标签都填充在一个看不到的盒子中；
块标签所在的盒会占据浏览器一整行的位置；
使用padding设置内容区域到边框的距离；
使用margin可以设置边框之外的距离，也就是盒子和其他盒子之间的距离

注意：
如果网页没有设置样式，浏览器会使用默认的样式
重置浏览器样式，把这段代码加入到CSS开始部分
包含所有在我们的页面中出现过的html标签
html,body,h1,h2,h3,p,ol,ul,li,a{
padding: 0;
border: 0;
margin: 0;
}

选择器2

使用类选择器：
给HTML标签添加一个class属性，然后给class属性填写一个值，这个值叫做 类名。
在HTML中
<ul class="nav">

类选择器：在类名前加 “."
在CSS样式中：
.nav{}

在派生选择器中使用：
类选择器和派生选择器可以同时使用

.nav a {}

查找nav 这个类名所在标签的子孙标签，并且这些子孙标签的名字是a

PS:子孙标签包括 子标签，子标签的子标签，子标签的子标签的子标签，等等

把内联标签恢复为块标签，怎么改呢？
在CSS中：
ul li{
display: inline;} 改为 .nav li{display: inline;}


div 布局

组织页面布局
div标签：division 的缩写，分区的意思
它是一个块标签。主要用来将网页中相关的内容组织在一起
header 头部
main-content 主体内容

使用class描述div的内容
要想区分每个div，常用的做法是给每个div添加一个class属性
<div class="header">
<div class="main-content">

去掉圈点，设置样式： list-style-type: none;

快捷键技巧：
div.header+div.main-content 按下键盘的 Tab 键，生成。

内容居中：
有两种常用的CSS方法让网页中的内容居中显示：
一、如果想把块标签中的内容居中，
那么设置块标签 text-align的值为 center

二、把块标签本身居中，并且这个标签有固定的宽度，
那么，设置块标签左右margin的值为 auto

margin: 30px auto 30px auto;

网页内容图片

三种网页图片：
内容图片
布局图片
用户交互图片

内容图片：是页面中真正需要的内容，没有内容图片你就无法完整的理解页面内容。

布局图片：出现在页面背景中，要想理解页面的内容，它们不是必须的。

用户交互图片：会给你浏览页面带来帮助，它不是背景也不是内容图片

创建内容图片

在HTML中 用<img>标签创建图片，英文 image的简写
<img>是一个空标签，同<link >一样，没有结束标签

如果想让<img>显示一张图片，那么就要为它<img>添加一个src属性
src的值等于图片的URL地址

<img src="egg.html"> url 地址可以是相对路径也可以是绝对路径

为内容图片添加alt属性

alt属性：填写对这张图片的简单描述， 可访问性的意思

<img src="egg.html" alt="西红柿炒蛋“>

由于并不是所有浏览网页的人都能够成功的看到图片，因此添加alt属性让它可访问
也就是 屏幕阅读器通过alt属性帮助看不见这张图片的访问者描述这张图片

总结：

<img>有两个属性：
src属性：图片的路径
alt属性：让图片可访问性

网页布局图片

创建布局图片

布局图片是在CSS中被创建出来的，使用CSS中的background属性

CSS中和背景相关的属性： background-color

技巧：如果要设置布局背景图片（background),也要始终设置背景颜色background-color
以确保背景图片没有成功加载时会显示一个背景颜色

CSS背景属性
background-image 可以指向一个相对路径或绝对路径

header{
padding: 1px;
background-color: #ffffff;
background-image: url(images/bg-header.jpg);
}

图片路径必须写在url（）中
图片路径两侧的双引号可写可不写

background-repeat 属性可以设置背景是否平铺在容器中
.header{
background-repeat: repeat;
}
repeat是默认值：平铺，横向或纵向平铺

background-repeat属性有另外三个值：no-repeat:根本不平铺 repeat-x:只能横向平铺 repeat-y:只能纵向平铺

background-position 属性可以控制背景图片显示在什么地方
.header{
background-position: top left;
}
top left 是属性的默认值
top 这个值可以是 top center bottom 上 中 下
left 这个值可以是 left center right 左 中 右

背景相关的属性在CSS中可简写在一起 成一行形式
.header{
padding: 10px;
background: #ffffff url(images/.z.jpg) center left no-repeat
}
背景颜色 URL地址 图片位置 是否平铺

用户交互图片

Web上最常用的3种图像格式

JPEG：可以展示一张图片或复杂图像
扩展名是.jpg或.jpeg
可以表示多达1600万种颜色，即所有的十六进制颜色
但是不支持图像透明
也不支持动画

PNG格式 是最适合展示网页插画、logo和网页小图标
扩展名：png
可以表示上百万种不同颜色的图像
包括PNG-8，PNG-4和PNG-32
可以设置颜色透明
也不支持动画

GIF 适合展示网页插画、Logo和网页小图标
扩展名为 .gif
web最早的图片格式，可以表示最多256种不同颜色
可以设置颜色透明
支持动画

总结：
复杂颜色的图像和图片则要使用JPEG格式
动态图像要使用GIF格式
透明图片可以PNG，也可以用GIF，因为GIF只能设置一种颜色的透明度，所以PNG格式的透明图片要比GIF格式的更平滑

这三种图像相对于气他格式的图像文件比较小，适合Web页面的高效展示。
一般情况下，用户交互图片都是一些小图标，所以使用PNG或GIF作为交互图片

大部分情况下使用CSS的background属性背景图片的形式展示用户交互图片

很多大型门户网站会把用户交互图片放在同一个文件中，提高网络和服务器性能

图片精灵：两个图标放在同一张图片中，但是它们可以在网页中显示，在不同的位置上。这是怎么做到的呢？

方法：首先把图片分割成不同的区域，得到每部分的height和width
然后把图片放到二维坐标中
接下来找到图片左上角坐标，然后可以设置CSS的样式为
background-position: 0,-28px; 写图片的坐标

字体

使用CSS改变字体

可以指定和改变字体外观的常用CSS属性：

字体风格 font-style
字体粗细 font-weight
字体大小 font-size
行高 line-height
字体样式 font-family

写的时候也可以统一写在一起：
p{
font:italic bold 2px 3px 微软雅黑
}

使用字体列表
font-family:每个字体用逗号分开
字体名称包含多个单词时使用引号 “”

字体列表p{
font-family: 微软雅黑，黑体，宋体，“Times New Roman",sans-serif;
} 优先使用的字体， 备 用 字 体 ， 字体列表最后指定一个通用字体。

通用字体系列
sans-serif字体系列：Verdana,ArialBlack,微雅软黑，黑体，Arial
这是一种无衬线字体：笔画粗细一直
在计算机屏幕上更容易识读

serif字体系列：Tims,Times New Roman ,宋体
这是一种有衬线字体：笔画末端有装饰性的线条或凸起（例如报纸）
报纸中正文使用的文字

Monospace字体系列： courier,courier New ,Andale Mono.
这是一种等宽字体：每个字母宽度一致
用于显示软件代码示例

Cursive字体系列：comic，sans,Apple,Chancery,华文行楷
这是一种手写体

Fantasy 字体系列：LAST,NINJA,华文琥珀，Impait
这是一种装饰性字体，设计感较强

注意：候选字体列表中的字体通常来自于同一个字体系列
如果前面指定广大特定字体都没有找到，浏览器就从sans-serif字体系列中找一个默认的字体

调整字体的大小
font-size
方法1：px，使用像素，数字和单位名称之间不能有空格；
方法2：%，百分号
方法3：em，类似于百分数

改变字体的粗细
font-weight:
bold：粗体
normal：去掉默认的粗体样式
其他值：
normal(正常） bold(粗体）
lighter(稍细） bolder（稍粗）
或者100,200....900 通常不使用数字

为字体添加风格
font-style:
italic:专门设计的斜体字符
oblicque:没有专门设计的斜体字符，由浏览器负责把正常的字体倾斜显示
他的值有：
normal(正常） oblicque（倾斜文本）
italic（斜体字符）

调整行高
line-height:可以定义盒子内每一行之间的距离

表单
一个简单的表单
<form>
<label>食品名称</label>
<input type="text">
<input type="submit" value="保存食谱“>
</form>

form标签的工作方式
form标签不但包含所有的表单控件，还会告诉浏览器当你提交表单时要把表单数据发送到哪里，以及使用什么方式发送

<form action="login.php" method="post">
...
</form>

action属性指定表单数据要发送到哪个服务器脚本上，例如这里发送到login.php
method属性指定数据发送的方式，有post和get两种，通常用post

for属性和id属性
label标签for属性的值应该和input标签中id属性的值一致，这两个表单控制就会关联起来
<form>
<label for="recipe-nam">食品</label>
<input type="text" id="recipe-nam">
<input type="submit" value="保存食谱“>
</form>
说明一下：for的值可以是任意值
for和id的值一样：这是将label关联在input上

input标签的type属性
type属性决定input标签显示成什么样子
type属性有很多值，有：
text 文本框
checkbox 复选框
radio 单选按钮
file 文件上传控件
password 密码
submit 提交
reset 重置

文本框：
input 文本框 标签可以接受少量的单行文本

textarea标签可以接受用户输入的多行文本

<label for="ingredients">材料</label>
<textarea id="ingredients"></textarea>

textarea标签与input标签不同，textarea标签必须有开始标签和结束标签

下拉列表 select 标签和子元素option标签组合成一个下拉列表
使用select标签和option标签创建下拉列表

每个option标签都是下拉列表的一个选项。