css基础总结

不念不忘少年蓝@ 2022-08-20 14:21 164阅读 0赞

1.使用css(层叠样式表)的好处：

1． 提高页面的浏览速度，节约文件尺寸

2． 缩短了改版的时间，只要将表现和内容分离，通过修改css可以修改很多页面

3． 降低网站流量的费用。带宽的要求降低，成本降低。

4． 更容易被搜索引擎搜索到，提高网站的排名

5． 内容被更广泛的设备访问。

2.web标准主要由三部分组成：结构(html)，表现(css)和行为(javascript)

3.语法结构 选择符\{属性：值\}   所有的属性值后边加上分号

文字在垂直方向上居中，将行高设置为元素的高度。

4.网页加在css的4种方式

1.内联式样式表

直接写在现有的标记中。<pstyle=”color:red”>红色的文字</p>

2.嵌入式样式表  使用<style>…<style>嵌入到html的头部中

<!—body\{background:white;\}-->

</style>

表示当浏览器不支持样式表时，不会将样式表显示出来

3.外部链接式 将样式表写在一个独立的.css文件中 然后link

4.导入式样式表 与链接式样式表基本相同

总结：行内样式主要应用于一个，嵌入样式应用于一类标签。

导入式会占用html的空间，有些浏览器的解析会有问题

优先权：行内样式>嵌入式>外部链接式>导入式作用范围越小，优先权越高。离修饰目标越近，优先权越高。

5.选择符的类型

1.标签类型的选择符：p  div

2.id选择符 针对某一个id，以\#开头

3. 类选择符 以.开头的

行内>id>class>标签选择符

4.通配选择符 \* 用于定义所有的html元素，范围很广，效率很低

5.包含选择符 如table td \{属性：值\} 直接进行潜逃，不必再定义id

6.组合选择符 将多个选择符进行组合使用  h1.p1,\#contnet h1 \{\}

6.css的特点

1.继承 网页中子元素将会继承父元素的样式

2.层叠 子元素中与父元素中定义了相同的样式，则子元素中的样式将会覆盖掉父元素的样式，后面的样式将会覆盖前边的样式。

7. 字符间距 letter-spacing：汉字和英文单词都支持

单词间距word-spacing：控制字符和字符之间的空格

元素的垂直对齐方式：vertical-align   sub sup  top  bottom

8.伪类

元素名称：伪类名称\{属性：值\}     a:link \{color：red\}

a:link\{\}   a:visited\{\} a:hover \{\}   a:active \{\}  顺序 l v h a

9.盒子模型  内容 content 边框 border 盒子的边框与内容之间的距离padding 盒子与盒子之间 margin

内填充参数的顺序是：上，右，下，左 。如果只有一个参数，代表四个值。2个参数。第一个是上下，第二个是左右。如果有3个参数，第一个为上，第二个为左右，第三个为下。

10.布局的三种方式：默认文档流，浮动布局方式，定位布局方式

Float:浮动，从原来的文档流中分离出来。

常用的布局效果，一行中显示几个块的元素。即取消块元素占一行的属性，允许一行多块。Div ul li 都是块元素

清除浮动(clear),默认值是none.去掉前边的浮动对象对后边的影响。

11.  清除浮动的几种方法：

1.额外标签法，单独增加一个div，用于清除浮动，这样会增加代码。

<div class=”clear”></div>增加一个空的div

</div>

2.父元素使用overflow的方法

通过设置父元素overflow值设置为hidden,是最简单的清除浮动的方法。但是如果子元素使用了定位布局，就会很难实现。

3.使用伪对象after的方法

定义一个类，使用伪对象after,控制浮动元素的影响。

12.定位布局

属性：position

值：static 静态定位，页面中每一个对象的默认值。

Absolute 绝对定位 将对象从文档流中分离出来，通过设置上下左右四个方向的值相对于父级对象进行绝对定位。

Relative 相对定位 不从文档流中分离出来，通过四个方向相对于自身的位置进项相对定位。

\*\*\*\*\*当我们使用绝对定位时，必须有两个条件：

1.必须给父元素加定位属性，一般建议使用position：relative

2.给子元素加绝对定位position：absolute，同时要加方向属性。

\*\*\*\*相对定位与绝对定位

绝对定位是以父元素为基准点，进行定位。------会脱离文档流

相对定位是根据自身为基准点进行定位。----离开原位置，但还占着原位置。

13.溢出

Overflow:默认值 visible 不剪切也不加滚动条

Auto 必需时才会剪切或者显示滚动条

Hidden 不显示超出的内容

14.块与内联元素

块：可容纳内联元素和其他块元素，排斥与其他元素为一行，宽度和高度起作用。

常见的块元素：div  p body  h1-h6

内联元素：只能容纳文本或者其他内联元素，允许和其他内联元素为一行，宽度和高度不起作用。

常见的内联元素是：a  em span

**将a又内联元素变为块状元素：a \{display:block;\}**

15.div+css的优势

1.table 网页设计 内容和样式混合

2.table+css    table布局，css指定外观

3.div+css     div放内容  css指定样式  内容和样式的彻底分离

优势

1.     符合w3c的标准，微软等公司均为w3c的支持者

2.     搜索引擎更加友好

3.     样式调整更加方便，内容和样式的分离，使页面和样式的调整变的更加方便

4.     Css的极大优势便现在见解答代码，节省带宽

5.     表现和结构的分离，更容易分工减少互相的关联性

16.当css中引用多个类选择器是，用空格隔开。当选择器发生冲突时，以最后出现的class选择器的样式为准。

css基础总结

发表评论取消回复

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

相关阅读

相关 Css基础知识点总结

相关 css基础知识总结

相关 HTML & CSS 基础语法总结

相关前端基础知识总结---CSS篇

相关 css样本基础,CSS基础

相关 css基础总结

相关 CSS基础学习总结（2）

相关 CSS基础学习总结（1）

相关 CSS基础学习总结

相关前端总结·基础篇·CSS