CSS总结

CSS概述

1、用于HTML文档中元素的样式定义
2、尽量用CSS样式取代html属性
3、使用CSS样式的方式:

内联方式:定义在html元素中,不利于重用;
内部样式:html页面的头元素中,放在一对style标记里;
外部样式:将样式定义在外部CSS文件中,由html页面引用样式表文件;
	样式规则由选择器和样式声明组成。
		选择器:决定哪些元素使用这些规则;
		样式声明:一对大括号,包含一个或多个属性/值对

CSS特征
继承性、层叠性(多个样式层叠为一个)、优先级

CSS样式优先级

1、由低到高:浏览器缺省设置-》外部、内部样式(子元素高于父元素)-》内联样式;最后一次定义为准。
2、改变最高优先级:属性值后增加 !important
3、html自带样式的优先级最低

CSS选择器

一、基础选择器
1、通用选择器,与任何元素匹配,慎用,会降低效率 *{}
2、元素选择器 html{} h1{}等
3、类选择器 .className{color:red;},不能以数字开头;
- 配合元素选择器实现对元素的细分设置。red类型对h1元素生效 h1.red{}
- 多类选择器:可将多个类应用于同一个元素,类之间用空格分开 class=“class1 class2”
4、id选择器 #idName{},唯一性,一个元素只能有一个id,一个id名称只能出现一次。
优先级:由低到高 元素-》class选择器-》id选择器

二、复合选择器

1、群组选择器:以逗号隔开的选择器列表,相同规则作用于多个元素

例:h1,h2,.red{color:red;}

2、后代选择器(包含选择器):对父元素的所有该后代元素起作用

例:h1 span{}

3、子代选择器:对父元素中的直接子元素起作用

例;h1>span{}

三、伪类选择器
用于向某些选择器添加特殊效果,(-选择器:伪类选择器)
1、链接伪类,用户定义链接-一般项目中不使用,直接定义a标记样式
-:link,适用于尚未访问的链接
-:visited,适用于访问过的链接,不支持定义字体大小

2、动态伪类,用于呈现用户操作
-:hover,适用于鼠标悬停在html元素时【低版本下不支持a以外的hover】
-:active,适用于html元素被激活时
-:focus,适用于html元素获得焦点时,只适用于表单元素

3、选择器优先级:
元素选择器:0,0,0,1
类选择器: 0,0,1,0
伪类选择器:0,0,1,1
ID选择器: 0,1,0,0
内联样式: 1,0,0,0
权值大的优先,权值相同,靠后的优先。
【样式不生效,考虑代码拼写和优先级】

CSS优化(高级):了解浏览器对CSS代码解释规则,能不用后代就不用,元素加类效率低

CSS尺寸与边框

单位

1、尺寸单位 %:百分比 ; pt:磅 9pt=12px ;px:像素;em:2em当前字体尺寸的两倍;

2、颜色单位:屏幕显示的颜色都是RGB:red、green、blue,色光三原色。
表达方式:rgb(X,X,X);rgb(X%,X%,X%);十六进制rgb颜色值:#rrggbb 如#f2f2f2,如;#rgb;
英文关键字

属性

1、尺寸属性:

长宽可变时,最大最小尺寸起作用。

width:80%;min-width:600px;max-width:600px;
		height:300px;min-height:max-height: 

【注意:宽和高只对块元素生效,行内元素是不生效的,比如a i 标签】
溢出:内容所需空间大于框本身
overflow:visible; 溢出可见
overflow:hidden; 溢出隐藏
overflow:scroll;始终显示滚动条
overflow:auto; 自动判断
overflow-x overflow-y 两个需要同时设置,如果只设置其中一个为auto,另一个会跟随这个。
哪些元素可以设置尺寸属性:块级元素:-p,-div,-h1-h6,ul,ol,li,dl,dt,dd等,存在weith,height的html元素如img,
table,input

2、边框属性:

边框线:
简单写法:border:width style color;
单边定义:border-left/right/top/bottom:width style color;
单独定义

相关推荐

  1. CSS总结

    2024-04-03 08:52:01       21 阅读
  2. <span style='color:red;'>CSS</span><span style='color:red;'>总结</span>

    CSS总结

    2024-04-03 08:52:01      17 阅读
  3. CSS总结

    2024-04-03 08:52:01       6 阅读
  4. css知识总结

    2024-04-03 08:52:01       7 阅读
  5. CSS日常总结--CSS伪类

    2024-04-03 08:52:01       25 阅读

最近更新

  1. leetcode705-Design HashSet

    2024-04-03 08:52:01       8 阅读
  2. Unity发布webgl之后打开streamingAssets中的html文件

    2024-04-03 08:52:01       8 阅读
  3. vue3、vue2中nextTick源码解析

    2024-04-03 08:52:01       8 阅读
  4. 高级IO——React服务器简单实现

    2024-04-03 08:52:01       8 阅读
  5. 将图片数据转换为张量(Go并发处理)

    2024-04-03 08:52:01       7 阅读
  6. go第三方库go.uber.org介绍

    2024-04-03 08:52:01       8 阅读
  7. 前后端AES对称加密 前端TS 后端Go

    2024-04-03 08:52:01       9 阅读

热门阅读

  1. 拒绝服务攻击(Dos)与Tomcat的解决方法

    2024-04-03 08:52:01       6 阅读
  2. 读《C Primer Plus》

    2024-04-03 08:52:01       5 阅读
  3. Vue-前端应用开发平时作业第二章作业2

    2024-04-03 08:52:01       4 阅读
  4. Android 11 init进程对Selinux的处理

    2024-04-03 08:52:01       5 阅读
  5. 读《Spring实战》第二章:装配bean

    2024-04-03 08:52:01       1 阅读
  6. oracle杀外部连接会话

    2024-04-03 08:52:01       3 阅读