热门标签 | HotTags
当前位置:  开发笔记 > 前端 > 正文

css前端知识点总结

css前端知识点总结
1、css的概念:(CascadingStyleSheet级联样式表)

优点:1.内容与表现分离。(用网页的内容xhtml就可以与表象分开)

2.表象统一

3.丰富的样式

4.减少网页代码

5.运用独立于网页的css

2.选择器

1.标签选择器

标签名{属性:属性值;}

2.类选择器

.类名{属性:属性值;}

<标签名 class=”类名”>标签内容

3、id选择器

#ID名称{属性:属性值;}

4.并集选择器

标签名,.类名,#ID名称{属性:属性值;}

5.后代选择器

后代选择器的写法是把外层的标签写在前面,内层的标签写在后面,之间用空格分开。当标签发生嵌套时,内层的标签就成为外层标签的后代。

P span{ 属性:属性值;}

标签内嵌套标签。

标签的后代,两者之间用空格隔开

6.交集选择器(注意:交集选择器之间没有空格)这种可以确定是某一个标签

标签名.类名{}

7.全局选择器

*{样式;}

Css中的注释只能是 /* 注释 */形式;

3.在HTML中引入css样式的方法

1.行内式,

2.嵌入式,

将样式写在head中

3.导入式与链接式,(外部css样式)

链接式:

导入式:

两者的区别是:链接是先加载样式后加载页面,导入是反之

4.样式的优先级

基本选择器之间:ID选择器>类选择器>标签选择器

样式表之间:行内样式>内嵌样式>外部样式

Css样式之间:在同一个选择器中,两条相同的声明,后一条声明会覆盖前一条声明,

5、盒子模型

盒子模型总尺寸=border-width-padding+margin+内容尺寸(宽度或高度)

6、浮动属性

Float:值(left,right,none,inherit(IE不支持不推荐使用))

与float属性结合使用的另一个属性clear,用于确定元素的那一侧不允许其他浮动元素,clear属性的值有5个,如下所示:

Left在左侧不允许浮动元素

Right:在右侧不允许浮动元素

Both:在左右侧均不允许浮动元素

None默认值,允许浮动元素出现在两侧

Inherit:规定应该从父元素继承clear属性的值,IE浏览器不支持,不推推荐使用。一般用于清除浮动时,使用both属性值的情况较多,即:

Clear:both;

7、定位属性:

1.绝对定位

position:absolute; z-index:2;(堆叠次序)

background-color:背景色。Transparent表示透明的背景色

background-attachment:确定背景图片是否跟随类容滚动,设置为fixed为固定的,scroll为滚动;

2.相对定位:position:relative;

8、控制元素显示方式

1.显示方式 display:值

2.处理盒子中的溢出:overflow:值

3.设置光标的形状:cursor:pointer(小手)

4.超链接样式:

a:link{color:#ff0000;} //未访问的链接

a:visited{color:#00CC00}//已访问的链接

a:hover{color:#000FF}//鼠标指针移动到链接上

a:active{color:#FF00FF}//选定的链接

定义样式必须是:linkàvisitedàhoveràactive

经验:内联标签可以包含于块级标签中,成为它的子元素,而反过来则不成立。

display:block;转换为块级元素;


推荐阅读
  • 本文介绍了lua语言中闭包的特性及其在模式匹配、日期处理、编译和模块化等方面的应用。lua中的闭包是严格遵循词法定界的第一类值,函数可以作为变量自由传递,也可以作为参数传递给其他函数。这些特性使得lua语言具有极大的灵活性,为程序开发带来了便利。 ... [详细]
  • VScode格式化文档换行或不换行的设置方法
    本文介绍了在VScode中设置格式化文档换行或不换行的方法,包括使用插件和修改settings.json文件的内容。详细步骤为:找到settings.json文件,将其中的代码替换为指定的代码。 ... [详细]
  • 基于layUI的图片上传前预览功能的2种实现方式
    本文介绍了基于layUI的图片上传前预览功能的两种实现方式:一种是使用blob+FileReader,另一种是使用layUI自带的参数。通过选择文件后点击文件名,在页面中间弹窗内预览图片。其中,layUI自带的参数实现了图片预览功能。该功能依赖于layUI的上传模块,并使用了blob和FileReader来读取本地文件并获取图像的base64编码。点击文件名时会执行See()函数。摘要长度为169字。 ... [详细]
  • Java实战之电影在线观看系统的实现
    本文介绍了Java实战之电影在线观看系统的实现过程。首先对项目进行了简述,然后展示了系统的效果图。接着介绍了系统的核心代码,包括后台用户管理控制器、电影管理控制器和前台电影控制器。最后对项目的环境配置和使用的技术进行了说明,包括JSP、Spring、SpringMVC、MyBatis、html、css、JavaScript、JQuery、Ajax、layui和maven等。 ... [详细]
  • 本文介绍了使用Java实现大数乘法的分治算法,包括输入数据的处理、普通大数乘法的结果和Karatsuba大数乘法的结果。通过改变long类型可以适应不同范围的大数乘法计算。 ... [详细]
  • Webpack5内置处理图片资源的配置方法
    本文介绍了在Webpack5中处理图片资源的配置方法。在Webpack4中,我们需要使用file-loader和url-loader来处理图片资源,但是在Webpack5中,这两个Loader的功能已经被内置到Webpack中,我们只需要简单配置即可实现图片资源的处理。本文还介绍了一些常用的配置方法,如匹配不同类型的图片文件、设置输出路径等。通过本文的学习,读者可以快速掌握Webpack5处理图片资源的方法。 ... [详细]
  • HDU 2372 El Dorado(DP)的最长上升子序列长度求解方法
    本文介绍了解决HDU 2372 El Dorado问题的一种动态规划方法,通过循环k的方式求解最长上升子序列的长度。具体实现过程包括初始化dp数组、读取数列、计算最长上升子序列长度等步骤。 ... [详细]
  • CSS3选择器的使用方法详解,提高Web开发效率和精准度
    本文详细介绍了CSS3新增的选择器方法,包括属性选择器的使用。通过CSS3选择器,可以提高Web开发的效率和精准度,使得查找元素更加方便和快捷。同时,本文还对属性选择器的各种用法进行了详细解释,并给出了相应的代码示例。通过学习本文,读者可以更好地掌握CSS3选择器的使用方法,提升自己的Web开发能力。 ... [详细]
  • 本文介绍了C#中数据集DataSet对象的使用及相关方法详解,包括DataSet对象的概述、与数据关系对象的互联、Rows集合和Columns集合的组成,以及DataSet对象常用的方法之一——Merge方法的使用。通过本文的阅读,读者可以了解到DataSet对象在C#中的重要性和使用方法。 ... [详细]
  • 本文讲述了作者通过点火测试男友的性格和承受能力,以考验婚姻问题。作者故意不安慰男友并再次点火,观察他的反应。这个行为是善意的玩人,旨在了解男友的性格和避免婚姻问题。 ... [详细]
  • 本文详细介绍了Linux中进程控制块PCBtask_struct结构体的结构和作用,包括进程状态、进程号、待处理信号、进程地址空间、调度标志、锁深度、基本时间片、调度策略以及内存管理信息等方面的内容。阅读本文可以更加深入地了解Linux进程管理的原理和机制。 ... [详细]
  • Voicewo在线语音识别转换jQuery插件的特点和示例
    本文介绍了一款名为Voicewo的在线语音识别转换jQuery插件,该插件具有快速、架构、风格、扩展和兼容等特点,适合在互联网应用中使用。同时还提供了一个快速示例供开发人员参考。 ... [详细]
  • 1,关于死锁的理解死锁,我们可以简单的理解为是两个线程同时使用同一资源,两个线程又得不到相应的资源而造成永无相互等待的情况。 2,模拟死锁背景介绍:我们创建一个朋友 ... [详细]
  • 后台获取视图对应的字符串
    1.帮助类后台获取视图对应的字符串publicclassViewHelper{将View输出为字符串(注:不会执行对应的ac ... [详细]
  • 《数据结构》学习笔记3——串匹配算法性能评估
    本文主要讨论串匹配算法的性能评估,包括模式匹配、字符种类数量、算法复杂度等内容。通过借助C++中的头文件和库,可以实现对串的匹配操作。其中蛮力算法的复杂度为O(m*n),通过随机取出长度为m的子串作为模式P,在文本T中进行匹配,统计平均复杂度。对于成功和失败的匹配分别进行测试,分析其平均复杂度。详情请参考相关学习资源。 ... [详细]
author-avatar
霞慧水灵灵_973
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有