CSS初步认识 2019-01-22

- CSS是什么?是编程语言吗?

“CSS是层叠样式表;不是编程语言。”


- CSS的作用是什么?

“CSS的作用是为HTML标记语言提供一种样式描述,定义了其中元素的显示方式。”


- 如何使用CSS?

“CSS有三种使用方式:内联样式、内部样式表、外部引用。其中最佳的方式为外部引用。”


- 什么是多重样式?

“每条css为两部分组成:1.选择器 2.样式。”


- 多重样式的优先级是?

“当两个规则都作用到了同一个html元素上时,如果定义的属性有冲突,那么应该用谁的值的,CSS有一套优先级的定义。

不同级别:!important > 行内样式>ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性

同一级别:后写的会覆盖先写的样式

important的优先级是最高的,但出现冲突时则需比较”四位数“;

优先级相同时,则采用就近原则,选择最后出现的样式;

继承得来的属性,其优先级最低;

强烈建议:css选择器采用低权重原则,利于充分发挥css的继承性,复用性,模块化、组件化。”


- CSS的选择器有哪些?

“标签选择器(如:body, div, p, ul, li)

类选择器(如:class="head",class="head_logo")

ID选择器(如:id="name",id="name_txt")

全局选择器(如:*号)

组合选择器(如:.head .head_logo,注意两选择器用空格键分开)

后代选择器 (如:#head .nav ul li 从父集到子孙集的选择器)

群组选择器 div,span,img {color:Red} 即具有相同样式的标签分组显示

继承选择器(如:div p,注意两选择器用空格键分开)

伪类选择器(如:就是链接样式,a元素的伪类,4种不同的状态:link、visited、active、hover)

字符串匹配的属性选择符(^ $ *三种,分别对应开始、结尾、包含)

子选择器 (如:div>p ,带大于号>)

CSS 相邻兄弟选择器器 (如:h1+p,带加号+)”


- CSS的常用属性有哪些?

“背景样式:background,background-image等;

位置尺寸:position定位方式,overflow内容溢出,width宽度,height高度,margin外边距,padding内边距,border边框;

文字属性:color 文字颜色,font-size 文字大小,line-height 设置行高,text-align居中方式,font-weight粗体,text-decoration文字特效;

连接属性:a:link 超链接文字格式,a:visited 浏览过的链接文字格式 ,a:active 按下链接的格式,a:hover 鼠标在链接上”


- 什么是盒子模型?

“所有HTML元素可以看作盒子,在CSS中,"box model"这一术语是用来设计和布局时使用。

CSS盒模型本质上是一个盒子,封装周围的HTML元素,它包括:边距,边框,填充,和实际内容。

盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。”


- 媒体类型的作用是?

“对不同指定特定样式。”


- 定位的方式有哪几种?

“两类,六种。”


- 伪类和伪元素的区别

“本质区别是,是否创造了新元素。”


- CSS3添加了哪些特性?

“https://leohxj.gitbooks.io/front-end-database/html-and-css-basic/css3-news.html”


- 谈谈弹性盒子模型和之前盒子模型的区别?

“区别在于特殊页面布局上弹性盒子更方便。”


- 如何做多媒体查询?

“多媒体查询语法

多媒体查询由多种媒体组成,可以包含一个或多个表达式,表达式根据条件是否成立返回 true 或 false。

@medianot|only mediatypeand(expressions) {  CSS 代码...;}

如果指定的多媒体类型匹配设备类型则查询结果返回 true,文档会在匹配的设备上显示指定样式效果。

除非你使用了 not 或 only 操作符,否则所有的样式会适应在所有设备上显示效果。

not:not是用来排除掉某些特定的设备的,比如 @media not print(非打印设备)。

only:用来定某种特别的媒体类型。对于支持Media Queries的移动设备来说,如果存在only关键字,移动设备的Web浏览器会忽略only关键字并直接根据后面的表达式应用样式文件。对于不支持Media Queries的设备但能够读取Media Type类型的Web浏览器,遇到only关键字时会忽略这个样式文件。

all:所有设备,这个应该经常看到。

你也可以在不同的媒体上使用不同的样式文件:

CSS3 多媒体类型

值描述

all用于所有多媒体类型设备

print用于打印机

screen用于电脑屏幕,平板,智能手机等。

speech用于屏幕阅读器。”

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

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,753评论 1 92
  • HTML 5 HTML5概述 因特网上的信息是以网页的形式展示给用户的,因此网页是网络信息传递的载体。网页文件是用...
    阿啊阿吖丁阅读 3,888评论 0 0
  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5? 答:HTML5是最新的HTML标准。 注意:讲述HT...
    kismetajun阅读 27,486评论 1 45
  • CSS参考手册 一、初识CSS3 1.1 CSS是什么 CSS3在CSS2.1的基础上增加了很多强大的新功能。目前...
    没汁帅阅读 3,579评论 1 13
  • 终于,他从幽深的地窖中逃脱出来。 伏在地面上,他大口喘息,肺叶贪婪地拥抱清新的空气,手脚擦伤处的血渗入湿冷的泥土。...
    素衣月阅读 353评论 1 2