CSS入门

一,CSS是什么?

  1. 定义:CSS全称是层叠样式表;
  2. 作用:为页面内容设置好看的模样,在整个页面中,CSS就像是人的外表一样重要;
  3. 语法规范:CSS由选择器,属性,值组成,其中属性和值用大括号包裹,以分号结尾。
    例如:h1{ color: red; }; 其中h1是选择器,color是属性,red是值;
  4. CSS注释:CSS的注释格式是:/* 注释的语句 */;被注释的语句不会生效;

二,CSS引入方式的介绍(3种)

  • 内联样式:在标签内使用style属性引入(不推荐),例:
    <h1 style='color: red;'>666666</h1>
  • 内部样式:在<style>标签内书写样式(不推荐),例:
内部样式
  • 外部样式:在HTML文档外创建.css文件,并通过<link>标签或者@import引入:
    1.<link>标签引入(推荐用法),<link>标签引入.css文件时最好写在<head>标签内,例:

link引入外部样式

2.@import引入(不推荐):在<style>标签内部进行引入,如下:

import引入样式

此外,import引入方式还可运用在CSS文件中,如下:

import使用在CSS文件中
★:<link>标签引入和<@import>引入方式的不同点
  • link是HTML标签,@import是CSS语法,同时,link标签还可用于载入其它资源而@import不能;
  • link引入的样式文件可以进行异步加载,而@import引入需要页面加载内容完成才加载,这样有可能因为加载失败导致白屏问题;
  • link是HTML标签,不存在兼容性问题,而@import是CSS样式,在低版本IE不能用;
  • link支持JS控制DOM改变样式,而@import不支持;
    综上所述,不推荐使用@import引入CSS样式

三,开发者工具和浏览器默认样式

  • 开发者工具:开发者工具可以在页面单击右键点检查选项打开,下图是它的模样:
谷歌浏览器开发者工具

在Elements中可以看到该网页的HTML和CSS样式。

  • 浏览器默认样式
    浏览器默认样式是指在未设定样式是,浏览器默认自带的样式,每个浏览器的默认样式都有可能不同,并且在默认样式旁边都会带有user agent stylesheet字样标明,浏览器默认样式不能更改,但是可以覆盖,如下图:
谷歌浏览器h1标签默认样式

四,关于文件路径

  • 绝对路径(不推荐使用):指的是文件所在的完整路径,如果文件上传到服务器因为路径改变有可能会导致文件错误,所以不推荐使用,如下:
文件完整路径
  • 网络路径:网站路径指的是服务器存放网页源代码的路径,通常见到的都是url(统一资源定位符)
    例如:
url
  • 相对路径:推荐使用,即使该路径放上服务器也不会出错
    1.css/XXX.css
    指当前目录下文件夹css中的XXX.css;
    2../css/XXX.css
    同上,但不同的是,该写法是严格模式写法;
    3.XXX.css
    指当前文件夹下的XXX.css文件;
    4.../imgs/XXX.png
    指上级文件夹下的imgs文件夹里的XXX.png文件;

五,CSS书写规范

  • 统一小写;
  • 不要使用内联的style属性去定义样式,错误范例:
错误
  • 标签的id或者class使用有意义的词语,不要像下面这样:
错误写法
  • 尽可能用缩写,如下代码:
缩写
  • 块内容缩进,如下图,箭头所指就是缩进:
缩进

★六,关于CSS选择器

  • 总概:一共有五中选择器:1.基础选择器;2.组合选择器;3.属性选择器;4.伪类选择器;5.伪元素选择器
    下面就一一来介绍他们的用法:
  • 基础选择器:
    1.*:通用选择器:适用于页面所有标签的样式,范围太广所以很少使用;

通用选择器

2.#id:id选择器:匹配特定的id元素;

id选择器

3..class:类选择器:匹配特定的class元素;

类选择器

4.element:标签选择器:直接使用标签名称进行样式设定;

标签选择器
  • 组合选择器
    1.E,F:多元素选择器:可同时设置多个元素的相同样式:
多元素选择器

2.E F:后代选择器:可设置E元素包裹下所有F元素的样式:

后代选择器

3.E>F:子元素选择器:设置E元素包裹下的直接后代F,孙后代不能被选中:

子元素选择器

4.E+F:直接相邻选择器:该选择器匹配E元素之后的相邻同级元素F:

直接相邻选择器

5.E~F:普通相邻选择器:匹配E元素之后的同级元素F(无论相邻与否):

普通相邻选择器
  • 伪类选择器
    ★1.a标签的四种状态:
    ①:a:link(未被访问状态),②:a:visited(访问后的状态),③:a:hover(鼠标悬停状态),④:a:active(正被点击状态);
    2.顺序排列:link,visited,hover,active,
    3.顺序排列的原因:
    就近原则的原因,因为CSS加载的顺序是从上到下的,所以写在后面的优先级相同的选择器样式会覆盖前面的样式,而link是未被访问状态,visited是访问过后状态,hover鼠标悬停状态,active正在被点击状态。在鼠标未点击时,a链接是处于link状态,采用link样式,而点击后是visited和link状态,此时采用的应该是visited状态,所以link写在visited前面。同理,鼠标悬停在a链接时是hover,link和visited状态,而hover如果写在link和visited前面的话,hover的样式就会被覆盖,所以hover要写在link,visited后面。而点击时,a链接处于hover,active,link,visited状态,active写在前面就会被其它三种覆盖,所以active写在最后。

2.E:enabledE:disabled:匹配表单中可用(enabled)和禁用(disabled)的元素;
PS:禁用表单元素可以用disabled属性设定,没有这个属性的都是enabled元素,如下:

表单禁用

3.E:checked:匹配表单中的radio或者checkbox元素;

4.★E:nth-of-type(n):匹配父元素的第n个子元素,但只匹配使用同种标签的元素;

E:nth-of-type(n)

5.★E:nth-chile(n):与E:nth-of-type(n)类似;

E:nth-chile(n)

6.E:first-of-type:匹配父元素下使用同种标签的的第一个子元素;

E:first-of-type

7.E:last-of-type:匹配父元素下使用同种标签的的最后一个子元素;

E:last-of-type
  • 伪元素选择器
    1.E::first-line:匹配E元素内容的第一行;

E::first-line

2.E::first-letter:匹配E元素内容的第一个字符;

E::first-letter

3.★E::before:在E元素前插入生成的内容;

E::before

4.★E::after:在E元素后面插入生成的内容;

Paste_Image.png
  • 属性选择器(因为不常用,只在这里说一下大体语法格式)
    格式:E[abcd]:匹配所有有属性abcd的元素;
属性选择器

七,选择器优先级

  • 由高到低排列:
    1.属性后+!importangt
    2.内联样式:style='color: red';
    3.id选择器: #id
    4.类选择器: .class
    5.伪类选择器:a:link
    6.属性选择器:h1{}
    7.标签选择器:p[XXX]
    8.通用选择器:*

  • 选择器优先级的计算
    1.先设定初始值为万位数:0,0,0,0,0;
    2.加了!important,在第一位0加上1(1,0,0,0,0);
    3.内联样式在第二位0加上1(0,1,0,0,0);
    4.id选择器在第三位0加上1(0,0,1,0,0);
    5.类选择器在第四位0加上1(0,0,0,1,0);
    6.伪类和属性选择器与类选择器一样;
    7.标签选择器在第五位0加上1(0,0,0,0,1);
    PS:上述所有选择器,每有一个就给它相应位置的0加上1,也就是说当有两个时,它的权值是相应位置的0加上2

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

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,725评论 1 92
  • 引言 本人在慕课网学习HTML+CSS基础课程,记录一些文字,方便自己回忆,也希望对大家有所帮助 上次给大家带来了...
    zhaolion阅读 7,377评论 18 272
  • css 工作原理每个html元素都有一组样式属性,可以通过css来设定。当html元素的同一个样式属性有多种样式值...
    __越过山丘__阅读 226评论 0 1
  • class 和 id 的使用场景? id 指定标签的唯一标识例如 使用场景:①根据提供的唯一id号,快速获取标签...
    饥人谷_林嘉俊阅读 507评论 0 2
  • 现在很多电视剧里面的黑社会动不动就结拜,拜关二爷。其实关羽也并非那忠肝义胆。 对于关羽的篡位之心,《三国演义》中隐...
    勤耕愚读阅读 620评论 0 0