CSS三天合集

1.CSS的定义

CSS指层叠样式表(Cascading Style Sheets),CSS就是控制页面布局和样式。

CSS通常称为CSS样式表或层叠样式表(级联样式表),主要用于设置HTML页面中的文本内容(字体、大小、对齐方式等)、图片的外形(宽高、边框样式、边距等)以及版面的布局等外观显示样式。

CSS以HTML为基础,提供了丰富的功能,如字体、颜色、背景的控制及整体排版等,而且还可以针对不同的浏览器设置不同的样式。

2.引入CSS样式

a.嵌入样式:在head标签中,嵌套一个style标签,在style标签中可以书写CSS的样式内容。

b.行内样式(浏览器样式,默认样式):通过在标签中设置style属性来控制标签的样式和效果。

c.外部样式:用link标签引入,CSS文件为单独的文件。

d.导入样式:@import ,导入样式会导致CSS文件不能并行下载,不推荐使用;同时,导入样                                   式必须写在所有CSS规划之前。

3.CSS注释

CSS的注释语法:/*注释的内容*/

快捷键:ctrl+/

注意:注释不能嵌套使用

a.多行注释:

/*

放多行的注释内容1

放多行的注释内容2

*/

一般用于模块的注释

b.文件头注释

4. CSS选择器

a. 标签选择器:标签选择器就是选择当前页面中相同名字的标签。

b. 通配符选择器:通配符*代表所有的标签。通过通配符选择器可以选择页面中的所有的标签。                                          穿透力很强。*{   }

c. ID选择器:

A. HTML标签中ID的属性值在一个页面中必须是唯一的。

B. ID选择器是可以帮助我们选择当前页面中唯一id值的标签,也就是根据标签的id属性值进                     行选取设置样式。

C. ID选择器的的符号是#号。

d. 类选择器:

A. 类选择器就是选取页面中所有标签的class属性值相同的一类标签。

B. 类选择器的符号是:.  (点)

e. 层级选择器,分组选择器,属性选择器,子元素选择器,相邻兄弟选择器,伪类选择器,伪               元素选择器;

注意:ID选择器和class(类)选择器的区别

1、相同的Class属性值,可以在HTML中出现多次。ID属性值在页面中只能出现一次。

2、一个class的属性可以有多个值,也就是说一个标签可以有多个类。

5. 复合选择器

a. 标签指定选择器:标签指定式复合选择器,要求必须是标签开头然后其他选择器。eg: p.left{ }

b. 后代选择器:后代选择器用来选择元素或元素组的后代,其写法就是把外层标记写在前面,

内层标记写在后面,中间用空格分隔。当标记发生嵌套时,内层标记就成为外

层标记的后代。后代不仅仅包括儿子,还包括子子孙孙。

c. 子代选择器:子代选择器,是让CSS选择器智能选择儿子辈的元素。

eg:p> em {color:red;}

解读为:选择器p > em可以解释为“选择作为p元素子元素的所有em元素”。

尖括号和选择器之间可以有空格也可以没有,没有限制。

建议:选择器和尖括号间有空格。

e. 属性选择器:属性选择器就是根据html标签的属性进行过滤选择。

f. 伪类选择器:

:link  伪类将应用于未被访问过的链接。IE6不兼容,解决此问题,直接使用a标签。

:hover   伪类将应用于有鼠标指针悬停于其上的元素。在IE6只能应用于a连接,IE7+所有元素都兼                    容。

:active    伪类将应用于被激活的元素,如被点击的链接、被按下的按钮等。

:visited   伪类将应用于已经被访问过的链接

:focus     伪类将应用于拥有键盘输入焦点的元素。

顺序问题:LoVe  HAte原则。

g.伪元素选择器:伪元素是控制内容

:first-line伪元素

:first-letter伪元素

注释:以上两个伪元素只能用于块级元素

:first-child伪元素,选择属于第一个子元素的元素。

例如:span:first-child{}  /*选择属于第一个子元素的所有span标签。*/

:before与:after伪元素,可以设置元素之前后之后的 内容,并且配合content设置相关内容。

6.CSS的特点

a.css的层叠性

   CSS的层叠性,也就是说后来设置的样式会层叠(覆盖)之前的样式,层叠性的前提示CSS的选择器的优先级相同。

b.css的继承性

   CSS的继承性是指,子容器的样式会继承父容器的样式。但并不是所有的样式都能继承。只有部分样式能继承,比如:文字相关字体大小、颜色、字体样式、行高、鼠标样式等。盒子相关的样式都不能继承,比如:宽高、背景色、边距、浮动、绝对定位等。

c.css的特殊性(优先级)

  1、首先比较行内样式,行内样式优先级最高。如果嵌入样式和行内样式同时设置样式时,行内样式优先级最高。

2、其次是内嵌样式的优先级比较:

内嵌样式的,ID选择器对应的样式优先级最高。

其次是Class样式

再次是标签选择器样式,

再次是通配符选择器设置的样式

后面是继承的样式,

最后是浏览器默认的样式。

7.css的display属性

display可以控制标签的显示模式。

display:none | inline | block | inline-block

继承性:无

display值的解释:

none:此元素不被显示,在文档中被移除。

block:此元素按块级元素显示:前后带换行符,自己占一行。内联元素 → 块元素

inline:此元素按内联元素显示:1个挨着1个。块元素 → 内联元素

inline-block:按行内标签进行排版,但是可以设置宽高,而且高度可以影响行高

8.css的颜色表示

RGB:red,green,blue三元素叠加组成不同颜色。

语法:color: rgb(33,33,33);

取值:0-255,也可以用百分比:0% - 100%

十六进制是另外一种写法:

Color:#3333333;

十六进制也是rgb的表示方法另外一种写法而已。

9.文字排版

a.font-size属性

       用于设置字号,该属性的值可以使用相对长度单位,也可以使用绝对长度单位。

其中,相对长度单位比较常用,推荐使用像素单位px,绝对长度单位使用较少。

可选参数值:xx-small | x-small | small | medium | large | x-large | xx-large|smaller | larger

b.设置字体font-family

使用font-family设置字体时,需要注意以下几点:

Ø各种字体之间必须使用英文状态下的逗号隔开。

Ø中文字体需要加英文状态下的引号,英文字体一般不需要加引号。当需要设置英文字体时,英文字体名必须位于中文字体名之前。

Ø如果字体名中包含空格、#、$等符号,则该字体必须加英文状态下的单引号或双引号,例如font-family: "Times New Roman";。

尽量使用系统默认字体,保证在任何用户的浏览器中都能正确显示。

**例如:font-famliy:  tahoma,arial,'Hiragino Sans GB',\5b8b\4f53,sans-serif;

   前面的字体都查找失败后,在系统中找一种sans-serif字体作为默认字体。

  注意顺序,如果把sans-serif放前面去,后面的都失效了。

b设置字符的间距

letter-spacing属性用于定义字间距,所谓字间距就是字符与字符之间的空白。其属性值可为不同单位的数值,允许使用负值,默认为normal。

可以设置连续汉字(汉字间没有空格)的间距,也可以设置英文字母之间的间距。

c.设置单词间距

word-spacing属性用于定义英文单词之间的间距。也可以设置汉字中出现断字的距离(比如:文字间出现空格等)。

d.text-decoration:文本装饰

text-decoration属性用于设置文本的下划线,上划线,删除线等装饰效果,其可用属性值如下:

<s>删除线</s>

none:没有装饰(正常文本默认值)。

underline:下划线。

overline:上划线。

line-through:删除线。

e.text-align:水平对齐方式

text-align属性用于设置文本内容的水平对齐,相当于html中的align对齐属性。其可用属性值如下:

left:左对齐(默认值)

right:右对齐

center:居中对齐

f.text-indent:首行缩进

text-indent属性用于设置段落首行文本的缩进,只能设置于块级标签。其属性值可为不同单位的数值、em字符宽度的倍数、或相对于浏览器窗口宽度的百分比%,允许使用负值,建议使用em作为设置单位。

g.white-space:空白符的处理

属性值:

Normal:正常的显示,如果宽度不够进行折行显示。

Nowrap:即使超过盒子的宽度,文本也不进行换行显示。

Pre:写html代码的时候是什么样式的,显示就显示成什么样的。

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

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,722评论 1 92
  • 本文主要是起笔记的作用,内容来自慕课网. 认识CSS样式 CSS全称为“层叠样式表 (Cascading Styl...
    0o冻僵的企鹅o0阅读 2,613评论 0 30
  • CSS基础 本文包括CSS基础知识选择器(重要!!!)继承、特殊性、层叠、重要性CSS格式化排版单位和值盒模型浮动...
    廖少少阅读 3,053评论 0 40
  • 谈到社交能力,我们希望向高人来学习社交能力。做为女性,很自然在脑袋中搜索成功的女性:杨惠妍、杨澜、柳青、谢丽尔桑德...
    一心小茶馆阅读 1,004评论 18 28
  • 有时候发一条朋友圈只是为了收到某个人的评论。 不清理空间留言板只是为了想保留某个人的留言。 和同学回忆过往的生活只...
    Autistic女帝丶阅读 209评论 0 0