Web前端——CSS复习1（3.25）

你的名字 2022-10-01 02:47 163阅读 0赞

1、什么是CSS?

CSS是层叠样式表，又称级联样式表，简称样式表。

作用：CSS实现了html文档中元素的样式定义，

（1）实现了将内容与表现的分离；

（2）提高了地代码的可重用性和可维护性。

2、CSS与HTML之间的关系

首先，HTML用于构建网页的结构，CSS用于创建HTML元素的样式；

其次，HTML是页面的内容组成，CSS是页面的表现。

上述解决了“结构与样式相分离，内容与页面表现相分离”的问题。

3、使用CSS的方法

（1）内联样式：在html页面的内容中写样式

<h1 style="color:red">新世纪英语</h1>

优点：易于对内容各个部分进行设置样式

缺点：不利于样式的重用性

（2）内部样式：将css样式定义在网页的head里，放在一对style标记里

（3）外部样式：将css样式定义在一个独立的css样式里，然后链接在html文档里。

4、CSS语法

（1）CSS语法规范

a、css语法规范总结

内联样式：由样式声明组成

b、css样式表特征

aa：继承性——大多数css样式规则可以被继承

bb：层叠性——首先，可以定义多个样式；其次，在不冲突时，多个样式表中的样式可层叠为一个

cc：优先级——在样式定义冲突时，按照不同样式规则的优先级来应用样式

c、样式优先级高低（aa < bb < cc）

aa：浏览器缺省设置

bb：外部样式表或内部样式表——就近优先

cc：内联样式

优先级案例——

basic.css样式为：

body{
    color:red;
    }
    h1{
    color:pink;
    }
    p{
    color:yellow;
    }

结果：标题1显示“pink”，正文1显示“yellow”，标题2显示“black”

d、!important规则

aa：采用!important可以**调整样式规则的优先级**

bb：将!important添加在样式规则之后，中间用空格隔开

——选择器\{属性：属性值 !important\}

cc：谨慎使用

（2）CSS选择器

A：基础选择器

a、通用选择器（\*）

b、元素选择器（p、span、h1）

c、类选择器（."class名"）

d、id选择器（\#"id名"）

总结：优先级——通用 <元素 <类 <id

B：复合选择器

a、群组选择器（用“，”隔开）

选择器声明以逗号隔开的选择器列表

将一些相同的规则作用于多个元素。

（“元素选择器”与“类选择器”混合，“类选择器”与“id选择器”，“元素选择器”与“id选择器”）

b、后代选择器（“儿子或孙子”）

指的是某父元素中的所有后代子元素（儿子辈+孙子辈）

依据元素在其位置的上下文关系来定义样式；

作用：用于选择某一元素的后代元素。

案例如下——

样式为：

h1{color:green}
    h1 span{color:red;}

c、子代选择器（“儿子”）

指的是某父元素中的直接子选择器

div >span\{...\}

C.伪类选择器

伪类用于向某些选择器添加特殊的效果

使用方法：采用冒号（:）作为结合符，结合符左边的是其他选择器，右边是伪类

“选择器:伪类”

CSS伪类选择器可以分为

（1）链接伪类——:link（尚未访问的链接）

:visited（访问过的链接）

注意：该链接伪类仅适用类似于“<a></a>”文字链接属性中，对于div并不适合。

（2）动态伪类，用于呈现用户操作

:hover（当鼠标悬停在所指定的元素上所使用的样式）

:active（当所指定的元素处于激活状态，鼠标在元素上按下还没有松开）

:focus（适用于html元素获得焦点时）

例如“input:focus\{color:red;\}”表示点进去时的样式

总结：

a、选择器优先级——

根据比较选择器权值的大小，进而判断优先级的高低。

元素选择器（权值为1）< 类选择器（权值为10）< 伪类选择器（）

< id选择器（权值为100）< 内联选择器（权值为1000）

b、选择器效率——

根据出现的频率，进而判断效率高低

id选择器 > 类选择器

（3）CSS规则

A.尺寸与边框

a、尺寸单位——%(百分比)：子元素占父元素的百分比

pt(磅)：1pt等于1/72英寸

px(像素)：计算机屏幕上的一个点

em(字体尺寸)：1em等于当前的字体尺寸，2em等于当前尺寸的两倍

（注意：屏幕一般为9pt，字体一般设置为14px）

b、颜色单位——RGB(R—red G—green B—blue)

表示色光三原色（红绿蓝）

2进制：0,1,10,11,100...

16进制：0,1,2，...,9,a,b,...f

（注意：若r=g=b，全为0为“黑”，全为f为“白”，越接近f越浅，越接近0越深）

c、尺寸——

尺寸属性是用于设置元素的宽度和高度

aa：width——max-width/min-width

bb：height——max-height/min-height

d、溢出

使用尺寸属性控制框的大小时，如果内容所需空间>框本身的空间，会导致溢出。

（1）overflow：当元素溢出框时如何处理

aa——overflow:visible  溢出的内容可见

bb——overflow:hidden  溢出的内容被隐藏

cc——overflow:scroll  无论任何情况均显示滚动条

dd——overflow:auto  浏览器自动判断，需要滚动条即显示，不需要即不显示

此外，还有两种分为水平方向、垂直方向

（2）overflow-x：水平方向元素溢出框

（3）overflow-y：垂直方向元素溢出框

设置其css样式，

#chuchuang{
     width:400px;
     height:300px;
     border:1px solid #000;
     overflow-x:auto;
     overflow-y:hidden;
    }
    #chuchuang p{
     width:500px;
    }
    img{
     width:100px;
    }

e、边框

简写方式——border:width style  color

若要隐藏边框，可以设置

border-right:none;

border-bottom:transparent;

（border-right:none表示效率最高）

扩展——

aa：边框圆角border-radius

bb：边框阴影

box-shadow：h-shadow v-shadow blur spread color inset

例如：box-shadow:0px 0px 5px 1px red;

cc：图片边框

border-image：source width repeat/round/stretch

表示将图片规定为包围div元素的边框

dd：轮廓

它是绘制元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。

简写方式——

outline：color style width

可以去掉chrome默认的表单元素的蓝边——outline:0/none

5、框模型、背景、渐变

（1）框模型

框模型容器container包括：margin（外边距）、padding（内边距）、border（边框）、width/height

其中，width、height指内容区域的宽度和高度；

增加内边距、边框、外边距不会影响内容区域的尺寸，但是会增加元素框的总尺寸。

计算公式——

对象实际宽度=（左右）侧外边距+（左右）侧边框+（左右）侧内边距+宽度

Web前端——CSS复习1（3.25）

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关 Web前端——CSS复习1（3.25）

相关 Web前端复习——Javascript复习（2）

相关 Web前端复习——Javascript（1）

相关 Web前端——CSS复习(3.27-3.31)

相关 Web前端复习——Javascript（字符串）

相关 Web前端——Javascript复习（数组）

相关 Web前端复习——Javascript复习（函数+分支结构）

相关 Web前端复习——Javascript复习（数值转换+运算符）

相关 Web前端复习——JavaScript复习（DOM）

相关 Web前端复习——Javasvript学习（面向对象）