web前端学习日志5

css段落样式

text-decoration:文本装饰

下划线：underline

删除线：line-through

上划线：overline

不添加任何装饰：none

注意：添加多个文本修饰，通过空格隔开

代码如下：

 <style>

        p{ width:300px; text-decoration: line-through underline overline;}

    </style>

text-transform：文字大小写（只针对于英文段落）

小写：lowercase

大写：uppercase

只针对于首字母大写：capitalize

text-indent:文本缩进

首行缩进（针对于英文不适应对齐）

em单位：相对单位，1em永远都是跟字体大小相同

text-align:文本对齐方式

对齐方式：left、right、center、justify(两端点对齐）

代码如下：

 p{ text-align:  ;}

line-height:定义行高

行高:上边距+字体大小+下边距（上下边距等高）

默认行高不是固定值，根据当前字体大小在不断的变化

取值：1、number(px)   |   scale(比例值，跟文字大小成比例）

letter-spacing:字之间的间距

word-spacing:词之间的间距（针对于英文段落）

代码如下：

p{ letter-spacing:10px;}

p{ word-spacing:10px;}

英文和数字不自动折行的问题：

1、word-break:break-all;(非常强烈的折行）

2、word-wrap:break-word;(不是那么强烈的折行,会产生一些空白区域)

css复合样式：

复合的写法，是通过空格的方式实现的。复合的写法有的不需要关心顺序（background、border)，有的需要关心顺序（font)

1、background: red url () repeat 0 0;

2、border: 1px red solid;

3、font: 

注意：最少要有两个值  size family： weight style size family   |   style weight size family  |  weight style size/line-height family

一个css属性只控制一种样式，叫做单一样式

一个css属性控制多种样式，叫做复合样式

注意：尽量不要混写，如果非要混写，那么一定要先写复合样式再写单一样式

css选择器

1、ID选择器

css：#elem{}

html:id="elem" 

注意：

1、在一个页面中，ID值是唯一的，只能出现一次

2、命名规范，字母、_、-、数字（命名的第一位不能是数字）

3、命名方式：

驼峰写法：searchButton(小驼峰）  SearchButton(大驼峰），一般用小驼峰

短线写法：search-small-button

下划线写法：search_small_button

css命名

头：header　　内容：content/container　　尾：footer　　导航：nav　　侧栏：sidebar

栏目：column　　页面外围控制整体布局宽度：wrapper　　左右中：left right center

登录条：loginbar　　标志：logo　　广告：banner　　页面主体：main　　热点：hot

新闻：news　　下载：download　　子导航：subnav　　菜单：menu

子菜单：submenu　　搜索：search　　友情链接：friendlink　　页脚：footer

版权：copyright　　滚动：scroll　　内容：content　　标签页：tab

文章列表：list　　提示信息：msg　　小技巧：tips　　栏目标题：title

加入：joinus　　指南：guild　　服务：service　　注册：regsiter

状态：status　　投票：vote　　合作伙伴：partner

(1)页面结构

容器: container　　页头：header　　内容：content/container

页面主体：main　　页尾：footer　　导航：nav

侧栏：sidebar　　栏目：column　　页面外围控制整体布局宽度：wrapper

左右中：left right center

(2)导航

导航：nav　　主导航：mainbav　　子导航：subnav

顶导航：topnav　　边导航：sidebar　　左导航：leftsidebar

右导航：rightsidebar　　菜单：menu　　子菜单：submenu

标题: title　　摘要: summary

(3)功能

标志：logo　　广告：banner　　登陆：login　　登录条：loginbar

注册：regsiter　　搜索：search　　功能区：shop

标题：title　　加入：joinus 　状态：status　　按钮：btn

滚动：scroll　　标签页：tab　　文章列表：list　　提示信息：msg

当前的: current　　小技巧：tips　　图标: icon　　注释：note

指南：guild　服务：service　　热点：hot　　新闻：news

下载：download　　投票：vote　　合作伙伴：partner

友情链接：link　　版权：copyright

css选择器

CLASS选择器

css: .elem{}

html: class = "elem"

注意：

1、class选择器是可以复用的

2、可以添加多个class样式

3、多个样式的时候，样式的优先级根据css决定，而不是class属性中的顺序

4、标签+类的写法

标签选择器（TAG选择器）

css:div{}          html:<div></div>

使用场景：

1、去掉某些标签的默认样式时

2、复杂的选择器中，如  层次选择器

群组选择器（分组选择器）

可以通过逗号的方式，给多个不同的选择器添加统一的css样式，来达到代码的复用

css: div、 p  、  span{}

通配选择器

*{}  ->   div,ul,li,p,h1,h2.....{}

注意：尽量避免使用通配选择器，因为会给所有的标签添加样式，慎用

使用场景：

去掉所有标签的默认样式时

层次选择器

后代     M  N  { }

父子     M>N{ }

兄弟     M~N{ }    当前M下面的所有兄弟N 标签

相邻     M+N{ }     当前M下面相邻的N标签

属性选择器

M[attr]  {}

= : 完全匹配

*= ：部分匹配

^= : 起始匹配

$=: 结束匹配

[][][] : 组合匹配