专栏首页李才哥css应知应会 第一集
原创

css应知应会 第一集

1、注意

所有的表单控件,都为 行内块(display:inline-block) 元素

特点:多个 行内块元素 与 行内元素 和 文本 是可以在一行内显示的

================================================

CSS

1、CSS概述

1、问题

1、想设置页面所有的文本的颜色为红色

2、想设置页面中所有的 p 标记的文本颜色 为 蓝色

3、想将所有的 p 标记的颜色,更改为 粉色

在 HTML 中,想实现标记的样式,只能靠属性完成

使用属性设置页面元素样式的问题:

1、相同的样式在不同的标记中用的是不同的属性

<body text="red">

<font color="red">

2、由于属性的独立性,导致相同的操作,在不同的元素中要多次实现

<p>

<font color="pink">疑是地上霜</font>

</p>

<p>

<font color="pink">低头思故乡</font>

</p>

使用HTML元素的属性设置样式的话,无法提升元素样式的 可重用性 和 可维护性

2、什么是CSS

Cascading Style Sheets : 样式表

CSS用于HTML元素的样式的定义

能够实现内容(HTML页面元素) 与 表现(CSS展示效果)相分离

能够提升代码的可重用性 和 可维护性

3、CSS 与 HTML 之间的关系

HTML 负责搭建网页结构

CSS 负责页面的样式的设置

HTML元素属性 与 CSS样式 冲突时 使用原则 :

尽量使用 CSS 样式 来取代 HTML 属性

2、使用CSS样式表

1、内联方式

又称为 行内样式 或 行内方式

2、内部样式表

将样式内容定义在网页的 <head> 中

3、外部样式表

将样式内容定义在外部的 CSS 文件中(***.css)

在HTML页面中引入 ***.css 去使用样式内容

详解:

1、内联方式

将样式定义在HTML元素的 style 属性中

允许在 style 属性中 出现若干条的 "样式声明"

语法:

<ANY style="样式声明1;样式声明2;样式声明3;">

每一个样式声明由两部分组成:

属性名称 : 值

基本的属性 及其 值

属性名称 值

color 颜色值

background-color 颜色值

font-size 以px或pt为单位的数值

ex:

<div>静夜思</div>

设置 div 的文本颜色为 红色(red),背景颜色为 黄色(yellow),文字大小为 24px

2、内部样式表

将样式内容定义在 <head> 标记中,在此定义的样式,可以被页面中的多个元素同时使用

<head>

<style>

样式规则1

样式规则2

...

样式规则n

</style>

</head>

样式规则的语法:

选择器{

样式声明1;

样式声明2;

... ...

样式声明n;

}

选择器:规范了页面中哪些元素能够使用定义好的样式

元素选择器:由元素的名称来作为选择器

div{

color:red;

background-color:yellow;

}

ex:

设置页面中所有 p 标记的样式为,背景颜色为黄色,文本颜色为 红色,文字大小为 18pt

特点:

1、有效的实现了样式 和 内容的分离

2、有效的实现了 可重用性 和 可维护性

3、外部样式表

1、创建独立的 css 文件并编写样式

在 ***.css 文件中,直接编写若干"样式规则"

2、在要使用样式表的html文件中,进行样式表的引入

<head>

<link rel="stylesheet" href="样式表文件的URL">

</head>

3、CSS样式表特征

1、继承性

大部分的样式属性是可以被继承的

即在父元素中定义好的样式 可以直接被子元素使用

2、层叠性

允许为一个元素定义多个样式规则,如果样式规则中的样式属性不冲突的时候,他们则都可以被应用到元素上

3、优先级

在层叠性基础上,如果样式属性声明冲突时,会按照不同使用方式的优先级来应用样式

低 :浏览器默认设置

中 :内部样式表 和 外部样式表

就近原则 - 后定义者优先

高 :内联样式

4、!important

显示调整 样式的优先级

属性名称:值 !important;

4、CSS基础选择器

1、选择器的作用

规范了页面中哪些元素能够使用声明好的样式

选择器是为了匹配页面上的元素的

2、选择器详解

1、通用选择器

作用:为了匹配页面中所有的元素

语法:* { ... }

ex:想设置页面中所有的文字的大小为12px

方案1:

*{

font-size:12px;

}

方案2:

body{

font-size:12px;

}

在网页中,推荐使用方案2的继承性来取代 通用选择器

2、元素选择器

作用:使用元素名称来充当选择器,目的是为了匹配页面中指定元素名称的所有标记

语法:元素名称 { ... }

ex:

div{ ... }

p{ ... }

ul{ ... }

3、类选择器(重难点)

作用:定义好之后,允许被任意元素的 class 属性进行引用的选择器

1、基本类选择器

语法:.类名{ ... }

引用类选择器:

<ANY class="类名">

类名规范:

1、字母,数字,_,-组成

2、不能以数字开头

ex:

<style>

.important{

font-size:24px;

color:red;

}

</style>

<div class="important">

引用了 important 的元素

</div>

2、多类选择器的引用方式:

允许让一个元素同时引用多个类选择器

多个类选择器之间,使用 空格 隔开即可

<ANY class="类1 类2 类3">

3、分类选择器的定义方式:

分类选择器,允许将类选择器和元素选择器结合起来使用,从而实现对某种元素中不同样式的细分控制

语法:

元素选择器.类选择器{ ... }

div.important{ color:green; }

以上选择器匹配的是页面中 class属性值为 important 的 div 元素

<div class="important"></div>

4、ID选择器

作用:为了匹配页面中指定ID值的元素

语法:#IDValue{ ... }

ex:

<div id="main"></div>

<style>

#main{ ... }

</style>

5、群组选择器

作用:选择器的声明,是一个以 , 隔开的选择器列表,为了定义多个选择器中的公共样式

语法:

选择器1,选择器2,选择器3{

... ...

}

ex:

#main,div.redColor,.important,.red{

color:red;

}

等同于

#main{color:red;}

div.redColor{color:red;}

.important{color:red;}

.red{color:red;}

6、后代选择器

后代:只要具备层级关系的元素,被嵌套的都可以被称之为 后代

语法:选择器1 选择器2{ ... }

1、div span{ }

匹配 所有div 中的 span 元素

2、#main span{ ... }

匹配 id为main的元素中的 所有 span元素

3、#main div.left-side{ ... }

匹配 id为mian 的元素中 class为left-side 的div元素

<div id="main">

<div class="left-side"></div>

</div>

7、子代选择器

子代:在层级元素中,只具备一层层级关系,被嵌套的元素称之为 子代元素

语法:选择器1>选择器2{}

<div>

<p>

<span></span>

</p>

</div>

p 是div的 子代元素

span 是p的 子代元素

span 是div的 后代元素

<div>

<span>div中的span</span>

<p>

<span>div 中的 p 中的 span</span>

</p>

</div>

8、伪类选择器

作用:为了匹配页面元素不同的"状态"

语法:

:伪类{ ... }

选择器:伪类{}

伪类选择器的分类:

1、链接伪类

1、:link , 匹配未被访问的超链接的状态

2、:visited,匹配访问过的超链接的状态

2、动态伪类

1、:hover,匹配鼠标悬停在元素上的状态

2、:active,匹配元素被激活时的状态

3、:focus,匹配元素获取焦点时的状态

3、目标伪类

4、结构伪类

5、否定伪类

5、尺寸 与 边框

1、CSS单位

1、尺寸单位

1、px (pixel)

2、% :相对单位

3、pt :磅(point)

多数用于描述 文字大小 1pt = 1/72 in

4、in :英寸(inch)

1in=2.54cm

5、cm :厘米

6、mm :毫米

7、em :字体大小,使用父元素字体大小的倍数

#main{ font-size:2em; }

8、rem :字体大小,使用html根元素字体大小的倍数

#main{ font-size:2rem; }

2、颜色单位

1、rgb(r,g,b)

r:red (0~255)

g:green (0~255)

b:blue (0~255)

ex:

color:rgb(112,76,98);

2、rgb(r%,g%,b%)

3、rgba(r,g,b,alpha);

alpha:透明度 0~1 之间的数字

0 : 完全透明

1 : 完全不透明

4、#rrggbb

由6位十六进制的数字来组成的颜色

十六进制:0~9 A~F 组成

#123456;

#654321;

#aabbcc;

#e4393c;

5、#rgb

#rgb 是 #rrggbb的缩写

#rrggbb每两位数字都相同的情况下,可以使用#rgb的方式取代

#112233 -> #123;

#ff0000 -> #f00

6、表示颜色的英文单词

red,green,blue,yellow,pink,purple,

2、尺寸属性

1、页面元素的默认尺寸

块级:

宽度:占父元素宽度的 100%

高度:以内容为准

行内:

宽度:以内容为准

高度:以内容为准

2、尺寸属性

1、宽度

width

min-width

max-width

2、高度

height

min-height

max-height

3、在HTML中,允许设置尺寸属性的元素

1、所有的块级元素 全部都可以设置

2、行内块中的大部分元素可以设置

除 radio 和 checkbox 以外的行内块元素

3、HTML元素本身就具备 width 和 height属性的可以设置尺寸,其余则不可以

<img> 可以设置尺寸

<table> 可以设置尺寸

特殊:除<img>以外的其它行内元素时不允许设置尺寸的

4、溢出

1、什么是溢出

使用尺寸属性设置元素大小时,如果内容所需要的空间大于元素空间大小时,则会产生溢出的效果

2、溢出处理属性

属性:

overflow

overflow-x

overflow-y

取值:

1、visible

默认值,溢出可见

2、hidden

隐藏

3、scroll

显示滚动条,但是溢出时可用

4、auto

3、边框属性

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • css应知应会 第六集

    作用:匹配的是,class属性值是一个由多个类选择器来组成的值列表(多类选择器),value是该列表中的一个独立选择器 的元素

    李才哥
  • HTML和CSS

    Opera:以前是presto内核,Opera现已改用Google Chrome的Blink内核

    李才哥
  • css应知应会 第四集

    3、当父元素中显示不下所有的已浮动子元素的话,那么最后一个将换行,依次类推。但有可能会被卡住

    李才哥
  • 解决wap手机百度APP中 网站img标签点击跳转图片

    今天发现手机百度客户端中普通的img标签点击动作会被跳转到图片链接,(这个问题是我们运营跟我讲的,不然我也没发现。)应该是手机百度APP抽风了。img标签也能给...

    AlexTao
  • H5 和 CSS3 新特性

    HTML5 拥有多个新的表单 Input 输入类型。这些新特性提供了更好的输入控制和验证

    Krry
  • CSS——属性列表

    Html5知典
  • css之选择器

    CSS(Cascading层叠 Style样式 sheets表),是用来为网页添加样式的代码。 css选择器的作用是用于选中元素,以便为其添加样式 1.基础选择...

    bamboo
  • CSS大部分属性汇总

    白胡杨同学
  • HTML基础知识普及

    <meta charset="utf-8"> 规定页面的字符编码 <meta name="viewport" content="width=device...

    lesM10

扫码关注云+社区

领取腾讯云代金券