CSS样式

CSS样式在Web开发中有着很大的作用，尤其是在网页的美化上显得尤为突出，下面我将对我所学的css样式进行总结归纳来加强学习记忆。

一、HTML5中一些需要注意的元素

1. 网页中添加图片

<img src="图片的url" alt="图片无法加载时显示的图片url" title="鼠标悬停时显示的信息"/>

除此之外还需要注意图像的对其方式：align: top/bottom/left/right/middle/。

• top：表示图像顶端和文字第一行对齐。
• bottom：表示图像底端和文字第一行对齐。
• left：表示图像左对齐。
• right：表示图像右对齐。
• middle：表示图像的水平线和文字的第一行对齐。

例：

<img src="img/image1.jpg" alt="错误" title="山脉" height="200px" width="200px"/>

2. 网页中添加超链接
<a href=“url” target=“打开方式”>提示文字或图片</a>
其中打开方式分为：_parent、_blank、_self、_top。

• _parent：表示在上一级窗口打开。
• _blank：表示新建窗口打开。
• _self：表示字当前窗口打开。
• _top：表示在浏览器整个窗口打开。

例：

<a href="http://www.baidu.com" target="_blank"><img src="img/image1.jpg"  height="200px" width="200px"/></a>

3. html5中新增的锚点标签（用于定位）具体用法是先要定义锚点然后使用超链接链接到锚点的位置实现一页中的定位（一般使用在文档内容较多时，通过锚点就可以不用翻页就可以快速定位）。
使用方法：
创建锚点：<a name="one">第一段</a>
链接到锚点：<a href="#one">第一段</a>

4. HTML5中的header、nav、section、acticle、aside、footer的介绍

设计上述结构标签目的是为了使语义变清晰同时搜索引擎也更容易检索，当然上述结构标签也可以使用div标签代替。

<section>：在 web 页面应用中，该元素也可以用于区域的章节描述。

<header>：页面主体上的头部， header 元素往往在一对 body 元素中。

<footer>：页面的底部（页脚），通常会标出网站的相关信息。

<nav>：专门用于菜单导航、链接导航的元素，是 navigator 的缩写。

<article>：用于表现一篇文章的主体内容，一般为文字集中显示的区域。

<aside>：用于表达注记、贴士、侧栏、摘要、插入的引用等作为补充主体的内容。

在设计页面时选择需要的结构标签即可。

5. 新增<mark></mark>元素
mark为标记标签，被标记的元素会显示黄色<mark>hello!</mark>

6. 新增<mete>元素
mete为度量元素例如下图的效果<progess value="30" max="100"></progess>（max为完成时的值）

7. <progess></progess>元素

用法为：<progress value="30" max="100"></progress>

如果不定义value值则为动态进度条<progress max="100"></progress>

8. <detail></detail>和<summary></summary>元素
detail细节一般配合summary标签一起使用

<details>
			<summary>第一段</summary>
				<p>
					一个人，越是有福气，越是善良；一个人，越是喜欢做善事，越是有福气。
　　				生活中，一个人的善事，做的越多越有福气，坑人害人的事，不做更有福气。
				</p>
			
</details>

9. contenteditable属性
用于设定是否可编辑元素，属性值为 true 或 false。
10. hidden属性
用于设定元素是否隐藏（js也可以实现），属性值为 true 或 false。
19. spellcheck 属性
用户设置是否开启单词拼写检查，属性值为 true 或 false。

注意： 许多新增的标签在使用时需要注意自己使用的浏览器是否支持，这个可以通过查询文档得到。

二、CSS样式的总结

css选择器是指，css样式作用对象的选择，常用的选择器有基础选择器、结构选择器以及伪类选择器。

css基础选择器

1.标签选择器

标签选择器是通过html标签来确定所修饰的对象，例如对p标签进行修饰就可以直接使用p{ 属性：属性值}进行修饰。

2.id选择器

id选择器是通过在定义标签时的唯一id来获取所修饰的对象用法是通过在id前加上 # 来识别，例如：

<p id="text">nihao</p>

#text{属性：属性值}

3.类选择器

由于id是唯一的，如果我们想对一个类别统一进行样式处理，我们就可以为他们统一定义一个类，样式选择器可以通过这个类名统一进行样式处理，用法是在类名前加上 . 即可，例如：

<form>
			<input class="login" type="text"/>
			<input class="login" type="button"/> 
</form>

.login{属性：属性值}

4.通配符选择器

使用*通配符可以选择所有元素*{属性：属性值}。

5.后代选择器

由于许多标签具有父子等关系，我们也可以通过这个关系来选择子类元素，
父类 子类{属性：属性值} //如果还有孙类元素会被一并选中，如果要只选择孙类元素则需要一直写到孙类 例如：父类 子类 孙类{属性：熟悉值}

6.并集选择器

有这样的一种场景，我们需要对不同标签且不具有包含关系的元素进行修饰，我们就可以使用并集选择器，用法是将不同标签之间使用 , 分隔，然后一一列出即可#login, p, #user{属性：属性值}。

7.子元素选择器

在我们使用后代选择器时会存在包含关系的影响，子元素选择器时通过指定某个确定的子元素同时不存在孙子元素的包含问题（选择了一个子元素进行修饰时不会将子元素内包含的孙子元素一同修饰）。
用法是父元素 > 子元素{属性：属性值}

8.兄弟选择器

兄弟选择器可以选择相同的元素兄弟，例如h标签后跟着多个标签p标签我们就可以使用h1~p{属性：属性值}来选择紧跟h1标签后所有的p标签
h1+p{属性：属性值}表示选择紧跟h1标签后的第一个p标签

9.属性选择器

属性选择器是根据多个相同标签但其属性值不同来区别被选择对象的，其用法例如：img[alt]来选择img标签中具有alt属性的元素
input[type=text“”]用于选择input标签中属性值为text的元素
div[class ^="a"]可以用来选择div标签中class属性值以a开头的元素
div[class *="a"]可以用来选择div标签中class属性值以包含a的元素
div[class $="a"]可以用来选择div标签中class属性值以a结束的元素

css伪类选择器

伪类选择器和基础选择器不同，它不能自定义名字，主要是用来针对标签不同状态、不同行为、不同特征来实现不同样式。

1.链接伪类选择器

链接伪类选择器主要是针对超链接 a 标签的，针对a标签的不同状态有如下伪类选择器：
a:link--------未点击前的样式
a:hover--------鼠标悬停时的样式
a:active--------点击时的样式
a:visited--------点击后的样式

<a id="lj" href="http://www.baidu.com" >百度</a>

#lj:hover{ color: red; }

2.行为伪类选择器

行为选择器和上面的链接伪类相似，不同行为选择器是根据标签元素的行为来展示不同样式的，所以相对于链接伪类功能会减少
标签:hover-----鼠标悬停在该标签上时的样式
标签:active-----鼠标点击在该标签上时的样式
标签:focus-----该元素成为焦点时的样式

<form>
			<input id="text" type="text" />
</form>
----------------------
#text:focus{
	background: cornflowerblue;
}

3.结构伪类选择器

除了上面的选择器我们还可以通过文档结构来选择相应的元素从而减少id和class的使用
E:only-child----------匹配父类唯一的一个子元素
E:first-child----------匹配父类第一个子元素
E:last-child----------匹配父类最后一个子元素
E:nth-child(n)----------匹配父类第n个子元素
E:nth-last-child----------匹配父类倒数第n个子元素

E:only-of-type----------匹配父类唯一的一个同级兄弟元素
E:first-of-type----------匹配父类第一个同级兄弟元素
E:last-of-type----------匹配父类最后一个同级兄弟元素
E:nth-of-type(n)----------匹配父类第n个同级兄弟元素
E:nth-last-type----------匹配父类倒数第n个同级兄弟元素

E:empty----------匹配没有子元素，或者文本内容为空的所有元素

4.伪元素

伪元素是针对标签中的元素进行设置，主要是用在对文本进行样式修饰，例如：
E:first-letter------用于对文本第一个词进行设置
E:first-line------用于对文本第一行进行设置
E:before------用于对该元素前添加内容
E:after------用于对该元素后添加内容

三、CSS常用样式

css的链如方式<link href="url" type="text/css" rel="stylesheet"/>

1.字体样式设置

font-family:"字体名称"-----用于指定字体名称
font-size:字体大小-----用于指定字体大小
font-color:字体颜色-----用于指定字体颜色
font-sytle:字体样式-----用于指定字体样式(斜体等)
font-weight:字体加粗-----用于指定字体的加粗程度(nomal、bold、bolder、lighter、number(整百的倍数))
处理使用上面的单个样式也可以使用font:属性值来综合处理字体样式，不过要按照style、variant(首字母大写)、weight、size、family的顺序来执行，同时还要注意必须要设置字体和字体大小否则其他样式无效。

假如需要使用一些特殊字体时，可以使用@font-face{font-family:字体名称； src:字体存储路径}先来设置服务器字体，这样就可以在进行font-family使用这个字体了。

2.字符间距设置

letter-spacing:nomal/长度(数字)----来设置字符间距
word-spacing:nomal/长度(数字)----来设置单词间距

3.文本修饰

text-decoration：underlin(下划线)、overline(上划线)、line-through(删除线)
text-align:center、left、right、justif-----文本对齐方式
text-indent:2em-----文本缩进2字符
white-space:normal、pre、nowrap-----空白符处理
text-shadow:(h(水平长度),v(垂直长度),blur(模糊程度),color(颜色))------文字阴影效果

未完待续…