程序猿小白成长之路[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部分组成：
一、内容区域-content area:内容区域中包含的是盒子中真正的内容（文本、图片等）；
（内容区域的默认高度由内容的高度决定）

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

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

四、边距-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方法让网页中的内容居中显示：
1、若是想把块标签中的内容居中，
那么设置块标签 text-align的值为 center

2、把块标签自己居中，而且这个标签有固定的宽度，
那么，设置块标签左右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标签都是下拉列表的一个选项。