css简单入门

 

     1：     

HTML文件

CSS文件

JS文件     将他们分开书写，好处是方便管理、复用、维护。

 

2：

一、什么是语义化的HTML？

语义化的HTML就是写出的HTML代码，符合内容的结构化（内容语义化），选择合适的标签（代码语义化），能够便于开发者阅读和写出更优雅的代码的同时让浏览器的爬虫和机器很好地解析。

二、为什么要做到语义化？

1.有利于SEO，有利于搜索引擎爬虫更好的理解我们的网页，从而获取更多的有效信息，提升网页的权重。

2.在没有CSS的时候能够清晰的看出网页的结构，增强可读性。

3.便于团队开发和维护，语义化的HTML可以让开发者更容易的看明白，从而提高团队的效率和协调能力。

4.支持多终端设备的浏览器渲染。

三、语义化HTML改怎么做呢？

在做前端开发的时候要记住：HTML 告诉我们一块内容是什么（或其意义），而不是它长的什么样子，它的样子应该由CSS来决定。

写语义化的 HTML 结构其实很简单，首先掌握 HTML 中各个标签的语义，在看到内容的时候想想用什么标签能更好的描述它，是什么就用什么标签。

<h1>~<h6> ，作为标题使用，并且依据重要性递减，<h1> 是最高的等级。

<p>段落标记，知道了 <p> 作为段落，你就不会再使用 <br /> 来换行了，而且不需要 <br /> 来区分段落与段落。<p> 中的文字会自动换行，而且换行的效果优于 <br />。段落与段落之间的空隙也可以利用 CSS 来控制，很容易而且清晰的区分出段落与段落。

<ul>、<ol>、<li>，<ul> 无序列表，这个被大家广泛的使用，<ol> 有序列表也挺常用。在 web 标准化过程中，<ul> 还被更多的用于导航条，本来导航条就是个列表，这样做是完全正确的，而且当你的浏览器不支持 CSS 的时候，导航链接仍然很好使，只是美观方面差了一点而已。

<dl>、<dt>、<dd>，<dl> 就是“定义列表”。比如说词典里面的词的解释、定义就可以用这种列表。

<em>、<strong>，<em> 是用作强调，<strong> 是用作重点强调。

<table>、<td>、<th>、<caption>， (X)HTML中的表格不再是用来布局。

 

 

3：“层叠样式表（CSS）是描述标记语言页面格式的标准（或语言），CSS使开发人员能够分离内容和可视元素，以实现更好的页面控制和灵活性 CSS文件通常通过HTML文件中的链接附加到HTML文件。”

                                                          

 CSS的好处：1.大大缩减页面代码，提高页面浏览速度,缩减带宽成本;
2.结构清晰，容易被搜索引擎搜索到
3.缩短改版时间。只要简单的修改几个CSS文件就可以重新设计一个有成百上千页面的站点。
4.强大的字体控制和排版能力。CSS控制字体的能力比糟糕的FONT标签好多了，有了CSS，我们不再需要用FONT标签或者透明的1 px GIF图片来控制标题，改变字体颜色，字体样式等等。
5.CSS非常容易编写。你可以象写html代码一样轻松地编写CSS。
6.提高易用性。使用CSS可以结构化HTML。
7.可以一次设计，随处发布。
8.更好的控制页面布局。
9.表现和内容相分离。将设计部分剥离出来放在一个独立样式文件中，你可以减少未来网页无效的可能。
10.更方便搜索引擎的搜索。用只包含结构化内容的HTML代替嵌套的标签，搜索引擎将更有效地搜索到你的内容，并可能给你一个较高的评价(ranking)。

 

 

 

 

 

 

 

 

 

 

 

 

HTML 5 新增结构：

header:页面或者某个区域的头部

nav:导航栏

article：文章或者其他独立存在的页面

footer：脚注

 

aside：与周围主题相关的信息

section：整体，一部分主题

 

target="_blank"（在新窗口打开链接页面）

 

绝对路径：协议（http）／／域名／目录 访问站外资源，必须用绝对链接

相对路径：..／返回上一级目录

 

内部样式表：在head里面用style标签中写css

行内样式表：在开始标签里面接style=......进行书写

 

CSS的注释书写格式：／注释内容／，快捷键crtl+？

 

选择器：

 

元素选择器：标记名{ 声明块 }

 

类选择器： .awesome{ 声明块 } 则后面有class=“awesome”的都会用到awesome里面的声明

最常用的选择器，因为他的复用

 

id选择器：#awesome{ 声明块 } id选择器仅能每次选择一个元素，id=“awesome".

因为它的唯一性，使用很少

 

伪类选择器： 格式：ol li :nth-child(4) { 选择第四个 }（从众多子集中选择特定的某一个进行修改)

nth-last-child( ): 从倒数的第n个选择

nth-last-child(odd ):选奇数

nth-last-child( even):选偶数

 

通配符： ／所有元素／ { } 通配符使用星号表示，意思是“所有的”

会匹配所有的元素，因此针对所有元素的设置可以使用来完成，用的最多的例子如下：

*{margin:0px; padding:0px;}

这里是设置所有元素的外边距margin和内边距padding都为0。

 

并集方法： h1,h2, p,a{ } 只要是自己想要选择的都可以写进去

 

修改超链接样式方法：（LVha顺序）

a:link 未访问时

a:visited 访问后

a:hover 移入||悬停

a:active 点击时

 

！important 表示重要声明 格式：Color:red !important;