千峰web前端入门html+css笔记（一）

相对路径：从当前所在文件夹开始“./”是当前文件夹的文件，“../”是上一级文件夹

绝对路径：完全的文件地址

跳转链接

a -> 双标签  

<a href="" target="">信息</a>

href=""  链接的地址

信息：文字信息会变成带下划线的可以点击的相关链接网页；也可以使用图片，变成一个可以点击跳转的图片

target：可以改变链接打开的方式，默认值是在当前页面打开，可以改变为

_self 在当前页面打开; _blank  在新窗口打开

base ->单标签

改变链接的默认行为

在head部分使用，不用对每个a标签更改

Eg.让所有a链接的默认方式都是在新窗口打开

     <base target="_blank">

跳转锚点

在当前页内进行跳转，例如目录导航

方法一(#+id)

在a中使用#与正文的标题<h2>对应

Eg. <a href="#html">HTML</HTML></a>

   <h2 id="html">html语言</h2>

方法二(#+name)

在a中使用#与标题上方的a中的name对应

Eg. <a href="#html2">HTML2</HTML></a>

<a name="html2"></a>    //在要跳转的位置上方添加a标签

<h2>html语言</h2>

特殊符号

代码本身会省略空格，大于小于符号和标签的尖括号的形式很像

注意特殊符号有分号

无序列表

<ul>:列表的最外层容器

       有type属性：改变前面标记的样式（一般由css控制）

                           disc  默认实心圆；circle  空心圆； square  实心方块

<li>列表项

组合出现，之间不能有其他标签

<!--正确嵌套关系-->

    <ul>

        <li>第一项</li>

        <li>第二项</li>

        <li>第三项</li>

        <li>第四项</li>

    </ul>

ps.快速生成li{列表$}*4

有序列表

<ol>:列表的最外层容器

       有type属性：改变前面标记的样式（一般由css控制）

1数字序列；a  小写字母序列；A  大写字母序列；

i 小写罗马数字序列；I  大写罗马数字序列

<li>列表项

快捷生成li ：li * n（生成数量）

组合出现，之间不能有其他标签

<!--正确嵌套关系-->

    <ol>

        <li>第一项</li>

        <li>第二项</li>

        <li>第三项</li>

        <li>第四项</li>

    </ol>

定义列表

列表项需要添加标题和对标题进行描述的列表

dl：定义列表

dt：定义标题

dd：对标题进行解释

     <dl>

        <dt>标题</dt>

        <dd>描述</dd>

</dl>

运行结果

嵌套列表

列表之间相互嵌套，形成多层级的列表

生产多个<li></li>,可以写<li>*n

无序列表每一层都要嵌套一次

定义列表可以两层嵌套一次

表格

标签

table:最外层

tr：行

th：表头

td：单元内容,可以是文字，图片等

caption：标题

语意标签<thead>、<tbody>、<tfoot>

属性

border:表格边框

cellpadding：单元格的空间

cellspacing：单元格之间的空间

rowspan：合并行

colspan：合并列

align：左右对齐方式，值为left、right、center，在每一行的<tr>部分设置

valign：上下对齐方式，值为top、middle、bottom，在每一行的<tr>部分设置

表单

标签

form:最外层

action：表单的相关内容提交地址

input

用于收集用户信息，根据不同的type值展示不同控件

注意：在使用radio单选时间，要用name属性绑定相关选项，才可实现单选

其他标签

textarea：多行文本框

select、option：下拉菜单，组合使用

<select name="" id="" size=”2” >

            <option value="" selected  disabled>请选择</option>

</select>

selected：默认为第一个选项，使用这个属性可以改变默认选项

disabled:使当前选项不可选中

size：规定可以选中几项

multiple:变成多选,file也可以使用

label：辅助表单，让可选范围变大，除了点击选择按钮还可以点击字

eg.

<input type="radio" name="contry" id="CN"><label for="CN">中华人民共和国</label>

<input type="radio" name="contry" id="AM"><label for="AM">美利坚合众国</label>

注意相互绑定id和name

表单与表格结和

form在外层，table在内层，本质上是个表格形式的表单

div和span

分组标签

div（块）：没有具体含义，用来划分页面区域，独占一行

span（内联）：没有具体含义，用于对文本独立修饰的时候，允许在同一行，内容有多宽就占用多宽的空间距离。对于文本独立应用，在一行文字中产生不同的效果

css基础语法

格式

选择器{属性1：值1；属性2：值2}

单位

像素（px）、外容器/外层标签的占比（%）

基本样式

width（宽），height（高），background-color

css的注释

/*注释*/

选中后CTRL+/

内联样式与内部样式（css的引入方式）

内联（行内、行间）样式

在HTML标签上添加style属性实现

内部样式

在<style>标签内添加样式（css基础语法中举例）

优点：可以复用代码

外部样式及两种写法

引入一个单独的css文件，name.css

link

使用<link>标签引入外部资源，rel属性指定资源和页面的关系，href属性是资源的地址

位置：link在meta和title之间

默认：会自动填写rel的值stylesheet，定义为一个外部样式

详细说明：HTML <link> 标签的 rel 属性

rel属性取值

@import（了解，存在很多问题，不使用）

title后面style标签内部

区别，问题

link和@import的区别 - my~sunshine - 博客园

css颜色表示法 

单词表示法

red，blue，green，yellow…..

十六进制表示法

0123456789abcdef

#ff0000

rgb三原色表示法

rgb(000,255,255),用三原色组合形成其他颜色，取值在0到255

透明

color设置为transparent

取色

使用ps,插件获取十六进制颜色

背景样式

background-color背景颜色

background-image 背景图片

url(背景图片地址)     默认：水平垂直都铺满

 background-repeat 背景图的平铺方式

repeat-x    repeat-y     repeat(x,y)   no-repeat

background-position 背景图片的位置

定位方式：

X Y:数字/单词

X:left,center,right

Y:top,center,bottom

background-attachment 背景图随滚动条的移动方式

注意要加入body产生滚动条

scroll：默认值，会随滚动条滚动（背景位置是按照当前容器进行偏移的）

fixed：固定，容器在滚动，但是图片不动（背景位置是按照浏览器进行偏移的）

多个背景图

 用逗号隔开，先写的在下面

背景实现视觉差效果

主要用style标签的#div和body标签的<div id>来绑定

css边框样式

border-style：边框的样式

还可以细分为border-right/top/start-width/height，针对某一条进行设置

solid：实线

dashed：虚线

dotted：点线

border-width：边框的大小

px…

border-color：边框的颜色

red #f00 …

family字体类型

字体类型：font-family

div{ font-family :xxxx}

英文字体：Arial、‘Times New Roman’

中文字体：微软雅黑（‘Microsoft YaHei’）、宋体（SimSum）

衬线体和非衬线体

设置多字体

div{ font-family :xxxx，xxx，xxxx}         电脑依次设置字体，电脑存在哪个字体就使用哪个，相当于备选方案

引号：字体名字出现空格时要用引号

字体大小粗细样式

font-size：字体大小，默认16px

div{ font-size：xxpx ;}   数字写法

单词 写法：xx-small 最小，x-small 较小，small 小，medium 默认，large 大，x-large较大，xx-large 最大

ps.字体大小推荐为偶数，方便对齐

font-weight：粗细，正常（normal），加粗（bold），还可以设置为数值（100-900）

                       只有两种显示效果，100~500=normal、600~900=bold

font-style：样式，正常（normal），斜体（italic）

段落样式

p{width： ；text-decoration： ；text-transform ： ；}

text-decoration：文本装饰

下划线：underline

删除线：line-through

上划线：overline

无装饰：none

添加多个修饰，通过空格隔开

text-transform：文本大小写（针对英文）

小写：lowercase

大写：uppercase

首字母大写：capitalized

文本缩进与文本对齐

p{ text-indent： ；text-align： ；}

text-indent：文本缩进

首行缩进：em（相对单位），1em=1字体大小，就可以不用在意字体具体大小，方便对齐。eg.首行缩进2字符text-indent：2em

text-align：文本对齐方式

left，right，center，justify（两端对齐）

文本的行高

line-height：定义行高

默认行高不是固定值，随字体大小变化

可以设置为具体数值（xxpx），比例值(相对于文字大小成比例)

文本间距与英文折行

letter-spacing：字之间的间距

word-spacing：词之间的间距（英文效果）

英文折行，一个过长的英文单词或者数字会被当作一个整体，不会在中间换行，会造成溢出的现象

word-break：break-all;(非常强烈的折行)

word-wrap：break-word；（不是那么强烈的折行）

强烈？不强烈会 产生大片空白

css复合样式

一个css属性控制多种样式

复合由空格实现，有些不用在意顺序（background，border），有的要看顺序（font）

background：颜色，背景图，平铺方式，位置

border：边框大小，颜色，样式

font：最少要有两个值 size、family，且保证顺序；weight  style size family （√）

          size weight family（√）       family style size（×）

尽量不要复合单一混写，一起使用要先写复合再写单一，否则单一会被复合覆盖

id选择器及注意事项

ID选择器写法

css：#选择器名字{}

html：id=“名字”

快捷键：div#名字+回车

注意事项

1. 在一个页面中，ID是唯一的
2. 命名规范：字母_ - 数字组成，开头不能是数字
3. 命名方式，驼峰式（小写开头后面大写），短线（-），下划线（_）

class选择器及注意事项

class选择器写法

css：.名字{}

 html：class=“名字”

 快捷键：div.名字+回车

注意事项

1. 可以复用
2. 可以添加多个class样式
3. 多个样式时，优先级依据css决定（css部分的顺序），不是按照class中的顺序
4. 标签+类的写法（只有规定的类会被影响）

 标签群组通配等选择器

标签选择器（TAG选择器）

css：div{}

html：<div>

通用设置时使用，去掉默认样式时，复杂的选择器

群组选择器

css：div，p，span{}

给不同的选择器添加同样的样式

通配选择器

*{    }->div,h1,h2….p{}

对所有标签添加样式，尽量避免使用

层次选择器

后代：M N{}

       类似于筛选，MN为条件，在指定条件下筛选符合的设置样式

       且符合条件的所有后代都设置该样式

父子：M>N{}

          类似后代选择器，但是只有第一代子代会设置样式，子代的子代不会被影响

兄弟：M ~N

       M下面的所有兄弟设置样式，上面的不行

相邻：M+N{}

       当前M相邻的下面的N 标签

属性选择器

 *=部分匹配                  =完全匹配            ^=起始匹配              $=结束匹配

可以组合使用：M[1111][2222]

伪类选择器

实现普通css实现不了的特殊需求

M:伪类{}

:link                                   访问前的样式（只能添加给a标签）

:visited                              访问后的样式（只能添加给a标签）

:hover                                鼠标移入时的样式（可以添加给所有标签）

:active                               鼠标按下时的样式（可以添加给所有标签）

注意

如果要添加四个伪类，要按照L V H A的顺序

一般网站只设置a的初始样式和hover样式

after等伪类选择器

:after 、:before                              给元素前后添加文本内容，使用content指令

       用途：清浮动，列表图标

:checked（勾选） 、:disabled（不可勾选） 、:focus（鼠标选中）       针对表单元素

结构伪类选择器

M:nth-of-type（）      括号中填入数字/n，从1开始的第x项的M设置样式，n表示全部项，2n表示偶数项，2n+1表示奇数项

nth-child（）     用法基本同上

区别：M: nth-of-type,是依照M同类型的项数，M：nth-child，是依据和M同为子代的依次数，如有不是M的也算作一项

M:first-of-type、last-of-type         选中第一项/最后一项

M:only-of-type              选中唯一一个，不是唯一就没有用      不算only

css样式继承

文字相关的样式可以继承，布局相关的样式不能继承（默认不能继承，但是可以设置继承属性，inherit值）

针对div设置，但是其子代p也能继承相应的文字样式（字号，颜色，行高），不会继承布局样式（边框，div大小）

添加inherit值