css常用或不熟悉的
css优先级:
!important 〉 行内样式 > id选择器 > 类选择器|伪类选择器 > 标签选择器 > 通用选择器 > 继承属性
综合优先级(只讨论选择器):
则下列选择器的优先级如何呢?
.a1 div{}
.a1 .a2{}
.a1 div .a2 span{}
#d1 div {}
#d1 .a1 {}
则他们比较优先级的原则是:
1, 比较最高的优先级选择器的多少,多者胜;
2, 最高的数量相等的时候,比较次高,多者胜;
3, 依次类推
css背景:
background-color: 背景颜色
background-image: url(背景图的路径);
background-repeat: 设置背景图的重复特性,有:repeat(默认值),no-repeat,repeat-x, repeat-y
background-position: 需要两个值:水平位置 垂直位置。
è background:综合属性可以设置背景的所有特性,包括上述所有。
一个常见错误:
background-image: url( images/abc.gif ) no-repeat center center;
——background-image是独立属性,只能设置背景图,不能设置其他值了。
列表样式
list-style-type: 设置列表符号,可以是我们之前学的无序列表符或有序列表符。
list-style-image:设置列表的图片(此时list-style-type自动就无效了,被代替了)
list-style-position: 指将列表符放在li的里面还是外面:outside(外面,默认值),inside(里面)
list-style: 这是综合属性,可以设置上述几个。
border样式:
线有3个方面的特性:线型,线宽,线色,每个特性都可以单独控制。边框也有4个方向,每个方向都可以单独控制。
border-top-style: 顶部边框的线型。常见线型:solid , dashed, dotted
border-top-width: 顶部边框的线宽;
border-top-color: 顶部边框的线色;
border-right-style, border-right-width, border-right-color, ......就是12个
除此之外,我们还有3个设置线的某方面特性的综合属性:
border-style: 可以使用1-4个值,用来设置4个方向的线的线型,比如:border-style:solid dashed; 表示上下边框为实线,左右边框为虚线;
border-width: 同理,可以设置1-4个值,表示4个方向的线宽。
border-color:同理。
还有:4个设置每个方向边框的所有特性的综合属性:
border-top: 线型 线宽 线颜色;
border-right: 线型 线宽 线颜色;
border-bottom: 线型 线宽 线颜色;
border-left: 线型 线宽 线颜色;
最后,一个最大的综合属性:一次性设置4个方向的3个特性:
border: 线型 线宽 线颜色;
定位属性:position
1, position:static ——静态定位(默认)
2, position:relative; ——相对定位(相对正常文档流定位,不会脱离文档流,占原来布局空间大小)。
3, position:absolute; ——绝对定位(相对整个网页主体,脱离文档流,不占布局空间)。
4, position:fixed; ——固定定位(相对于浏览器窗口,脱离文档流,不占布局空间)。
块盒子和行内盒子相互转换
块盒子,其display属性的值默认是block
行内盒子,其display属性的值默认是inline;
div{ display: inline;} ——此时div就跟span一样。
span{ display: block;} ——此时span就跟div一样。
display: none 不显示
转载于:https://www.cnblogs.com/zixueit/p/3868013.html
css常用或不熟悉的相关推荐
- div css 常用技巧
div css 常用技巧 1.给图片加上alt属性: <img src="logo.gif" alt="我的公司logo,点击返回首页" /> 2 ...
- css规则中区块block,css常用属性总结:背景background下篇
前言:这段时间天天加班到10:30之后,简直是x了. 在上一篇文章中,分别解析了background各个属性的用法和注意细节.如果我们在项目上使用背景效果,如果使用下面的写法,你可能抓狂. body{ ...
- css文字向右对齐_web前端入门到实战:css常用样式对文本的处理演练
CSS文本属性可定义文本的外观,这是毫无疑问的,其次css可以通过以下属性改变文字的排版,比方说letter-spacing实现字符间距text-indent: 2em;完成首行缩进2字符word-s ...
- CSS常用样式及示例
CSS常用样式及示例 一.简介 层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式 ...
- [css] css常用的布局方式有哪些?
[css] css常用的布局方式有哪些? 1:圣杯布局 2:双飞翼 3:flex 个人简介 我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但坚持一定很酷.欢迎大家一起讨论 主目录 与歌谣一起通 ...
- CSS常用的元素居中方法
参考:CSS: 常用的元素居中方法 CSS居中布局总结 1.水平居中 (1)文本水平居中 text-align: center; (2)块级元素水平居中 ①设置margin margin: auto; ...
- html双箭头菜单,CSS常用样式之绘制双箭头的示例代码
一.多次调用单箭头 实现了单箭头–就很容易实现双箭头了,上文已经介绍2种实现单箭头的原理: 边框旋转方式.双三角覆盖方式.这次以边框旋转为例多次调用实现双箭头. 1.边框旋转单箭头实现 .arrow- ...
- [Web 前端] 010 css 常用的边框设置
css 常用边框属性 概览 参数 释义 border u设置边框属性(可以多个) border-color 边框颜色 border-style 边框样式 solid 实线,dotted 点状线,das ...
- css图片菜鸟教程,css 常用样式(分享)
font-family设置字体名称 可以使用多个名称,用逗号分隔,浏览器则按照先后顺序依次使用可用字体 p { font-family:'宋体','黑体','Arial'; } font-size 设 ...
最新文章
- java面向对象-------静态初始化块
- Swagger 入门使用
- python 图形界面库对比
- 每天60秒读懂世界20211127
- java itextsharp_使用 c#中的 itextsharp 以 pdf 格式填充 xml
- ObjectInputStream和ObejctOutputStream
- 搭建一个简单的Spring boot+maven项目
- 或者是修改服务器时间,修改云服务器时间设置
- 自定义异常和经验小结
- 机器学习中常见的距离公式
- oracle数据库关联查询
- java修改excel图表数据源,导出excel图表文件
- [PDDL人工智能] 01.PDDL规划器安装及入门详解(规划领域定义语言)
- 设置Centos7时区
- Kotlin基础知识5
- 转载:信号与系统的简介
- iOS 获取屏幕尺寸
- c语言循环程序模板,循环结构程序设计C语言程序
- Noble - Window平台NodeJs蓝牙BLE开发库
- 华为手机usb计算机连接在哪里设置密码,简单十步设置Huawei Share,手机与电脑传输从此告别数据线...
热门文章
- Oracle数据库块的物理损坏与逻辑损坏
- 二维数组传入函数_C++二维动态数组memset()函数初始化
- 打牢Python基础,看看这10语法如何
- 知识总结和记录——递归
- WordPress 安装插件导致 HTTP 500 内部服务器错误的问题
- 搞懂 Java equals 和 hashCode 方法
- 标量、向量、矩阵、张量
- springboot应用启动原理(一) 将启动脚本嵌入jar
- 大数据发展火爆,云计算平台主打安全至上
- Glusterfs(distribute) + DRBD + heartbeat + mon 实现分布式文件系统1