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] {}
= : 完全匹配
*= :部分匹配
^= : 起始匹配
$=: 结束匹配
[][][] : 组合匹配