CSS基础02

1、CSS文本样式属性

text-align:
作用:规定文本的水平对齐方式。
语法:
text-align:left; 向左对齐 默认的
text-align:right; 向右对齐
text-align:center; 中心对齐
注意:
→ 对齐时,要以选择器所代表的元素的宽度为参考。
→ 图片、表单元素、行级元素都可以看成文本。

text-indent:
作用:文本首行缩进。
语法:如:
text-indent:20px; 向右缩进
text-index:-20px; 向左缩进
值的单位:可以使em 1个em代表缩进一个文字的距离
如:text-indent:2em;

text-decoration:
作用:规定添加到文本的水平线
语法:
text-decoration:none; 没有水平线的文本
text-decoration:underline; 在文本下添加一条线
text-decoration:overline; 在文本上添加一条线
text-decoration:line-through; 穿过文本的一条线

2、CSS的背景样式属性

background-color:
作用:设置元素的背景色
语法:
background-color:颜色值;
background-image:
作用:设置元素的背景图
语法:
background-image:url(图片路径);
案例:英雄联盟
background-repeat:
作用:设定背景图是否重复和如何重复
语法:
background-repeat:repeat; 水平和垂直方向都重复,默认
background-repeat:no-repeat; 背景图像仅仅显示一次
background-repeat:repeat-x; 仅水平方向重复
background-repeat:repeat-y; 仅垂直方向重复
案例:渐变背景
background-position:
作用:设置背景图像的起始位置
语法:
background-position:水平方向值 垂直方向值;
水平方向值:
方位名词:left center right;



垂直方向值:
方位名词:top center bottom



background-attachment:
作用:
设置背景图像是否固定或者随着页面的其余部分滚动。
语法:
background-attachment:scroll; 滑动 默认
background-attachment:fixed; 固定
背景属性联写:background
联写语法:
background:颜色 背景图 是否重复和如何重复 滚动或固定 x位置 y位置
注意:
需要什么就写什么,某些属性不写,也不会影响其他背景属性值

3、CSS三大特性

继承性:
概念:一个元素可以继承其父元素或祖先元素的样式。(子承父业)
哪些属性可以别继承?
text-、font-、line-、color
注意:
→ a标签不能继承颜色color和text-decor。必须在a标签本身设定颜色
→ h标签不能被继承字体大小font-size。必须在h标签上设定字体大小。


层叠性:
作用:是浏览器处理冲突的一个能力。
概念:
如果一个属性通过两个选择器设置到同一个元素上面,那么这个时候
一个属性就会将另一个属性层叠掉。
如果多个不相同的属性通过两个选择器设置到一个元素上面,那么不
会发生层叠。
优先级:
继承<通配符<标签选择器<类选择器<id选择器<行内style<!important
!important :
作用:
可以使指定选择器里的某一个样式属性达到最优先。
注意:
!important 虽然可以使我们的指定属性值达到最优先,但是在继承的样式属性同非继承的样式属性比较优先级时,继承的样式属性的优先级时最小的。
权重:
概念:优先级算法,层叠的规则。
作用:多个选择器组合以后的优先级。
算法:
(0,0,0,0)==》第一个0对应的是!important的个数,第二个0对
应的是id选择器的个数,第三个0对应的类选择器的个数,第四个0对
应的是标签选择器的个数,就是当前选择器的权重。
比较:
先从第一个0开始比较,如果第一个0大,那么说明这个选择器的权重
高,如果第一个相同,比较第二个,依次类推。
对于修饰的元素的样式属性,有两种情况,继承 和 非继承。
非继承 要优先于 继承。
若权重 一样(就近原则)
注意:选择器在查找元素的时候不是从左往右找,而是从右往左找。


4、补充行高

行高的概念:
行高就是 文字的上间距 + 文字 + 文字的下间距。
注意:文字的上间距 和 文字的下间距是相等的
行高的作用:
可以同过设置文字行高(line-height)等于元素的高度(height),使文字在元素中垂直居中。
行高中的单位:
px
像素
em
和文字大小相关
如:font-size:16px; line-height:2em;
2em 就是两个font-size的大小 32px
%
和em一样

浏览器默认文字的大小是16px
行高在不同浏览器下,甚至在不同系统的不同浏览器下,行高是不一致

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 194,457评论 5 459
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 81,837评论 2 371
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 141,696评论 0 319
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 52,183评论 1 263
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 61,057评论 4 355
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 46,105评论 1 272
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 36,520评论 3 381
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 35,211评论 0 253
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 39,482评论 1 290
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,574评论 2 309
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,353评论 1 326
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,213评论 3 312
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 37,576评论 3 298
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 28,897评论 0 17
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,174评论 1 250
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 41,489评论 2 341
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 40,683评论 2 335

推荐阅读更多精彩内容

  • 选择qi:是表达式 标签选择器 类选择器 属性选择器 继承属性: color,font,text-align,li...
    wzhiq896阅读 1,722评论 0 2
  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,703评论 1 92
  • 选择qi:是表达式 标签选择器 类选择器 属性选择器 继承属性: color,font,text-align,li...
    love2013阅读 2,298评论 0 11
  • 1.CSS基本概念 1.1 CSS的定义 CSS(Cascading Style Sheets)层叠样式表,主要用...
    寥寥十一阅读 1,793评论 0 6
  • 学习CSS的最佳网站没有之一 http://www.w3school.com.cn/tags/index.asp ...
    Amyyy_阅读 1,004评论 0 1