CSS基础知识(2)
复合选择器的优先级:如div p span < div p span.class < div p span#id,后者优先级高。复合选择器的优先级根据权重来算。
另外
div p span.class1
div p span.class2
这个后者的优先级高,谁在下面谁的高。
选择器优先级:元素选择器(权值0001)<类选择器(权值0010)<伪类选择器(权值0010)<ID选择器(权值0100)<内联样式(权值1000)
边框样式:
border:元素的外边框 border:width style color;
border=border-left+border right+...
border-left: border left:
border-left-style...
border-color
border-width
border-style只能写样式 solid dashed dotted
border-radius:边框倒角
border-radius: 5px;四个角都是5px
border-radius: 5px 10px;
border-radius: 5px 10px 15px
border-radius: 5px 10px 15px 20px顺序是从左上角开始,顺时针转一圈
box-shadow 阴影
box-shadow:h-shadow v-shadow blur spread color 这些属性是按顺序来识别的,color如果不定义,默认是黑色,但如果选择器里定义了color,shadow就是选择器定义的颜色
border-image 将素材图进行九宫格切片,四个角位置的就是border-image的四个顶点,repeat属性决定了中间位置的图形如何处理。
border-image:图片来源source 裁切大小 repeat方式
border-width决定图像边框缩放的大小
尺寸:
px 像素
em 在原来基础上进行倍数的缩放
% 百分比
pt 1pt=1/72英寸
width max-width height max-height
框模型(box model),又叫盒子模型,定义了元素框处理元素内容、内边距、边框和外边框的方式。凡是能装内容的都是盒子。
margin:40px;
margin:40px 60px;上下是40,左右是60
margin:10px 20px 30px 40px;上10,右20,下30,左40,如果不定义的,自动和对边一样
当容器的上margin遇到了另一个元素的下margin时,并不是将margin值简单相加,二者距离是取其中较大的一个值。
如果左右的margin值是auto,如margin:10px auto;则表示其中对齐,这是浏览器自动设置的,另外此处居中对齐表示的是基于父容器居中对齐。margin值可以为百分比,也可以为负的。margin-top正值向下移动,负值向上移动;margin-left正值向右,负值向左移动。
添加padding值会把容器撑大,会增加容器大小,写法和margin一样。padding值可以为像素、百分比,但不能为负数,也没有auto的说法。
1.盒子模型:宽度=内容物的宽度+border+padding+margin
margin:margin是外边距,可以为负值,也可以为auto,水平左右margin为auto,容器居中对齐。margin-left为负值,容器向左移动。上面容器的margin-bottom遇到下容器的margin-top时,取较大的值为最终的margin
padding:padding会撑开容器,计算宽度和高度时需要加上padding
内边距与外边距,内与外是相对的,外层容器的内边距,相当于子容器的外边距
内联元素,如span,是不能设置宽和高的,此时要想实现效果,可以通过设置padding和margin来实现彼此间距,但是margin-top加进去不好使。a标记也是内联元素。内联元素是可以添加border的。
在样式表中,如果是ID的话,前面就不要加别的标记了,会影响加载效率。
注意,CSS里面的注释和HTML里面是不一样的,是/*注释内容*/
背景图片:默认是none,如果需要用起始字母URL附带一个图像的url值,可以是相对url也可以是绝对url,如:background-image:url(image/gn_01.gif);
背景图的平铺属性:background-repeat,取值有repeat,repeat-x(仅在水平方向重复),repeat-y(仅在垂直方向重复),no-repeat(仅显示一次)
背景图的位置background-position:为了使背景图移动位置,如:background-position:10px 20px;定义两个值的话,第一个表示x轴的值,第二个表示y轴的值。也可以不写具体的像素值,可以写right,left,center,bottom,top,写成这样的话顺序写反了也可以识别出来。也可以写成百分比。
背景图的大小:background-size,取值可以为具体像素值,也可以为百分比,还可以取值cover(背景图扩展到足够大将背景完全覆盖),contain(将背景图扩大使其其中一边的大小和背景一样)。但是很少用,一是兼容性有问题,而是会使图像失真。
同时设置了背景色和背景图的时候,背景色不会把背景图覆盖掉,只会把背景图没覆盖的区域填充,背景图永远都是在背景色的上面。
background-attachment将背景图片固定,在默认情况下,背景图会随着页面的滚动而移动,值可以为scroll(默认,背景随文档滚动),fixed(背景图像固定,并不会随着页面的其余部分滚动,常用于实现水印的图像)
background-clip规定背景的绘制区域,可以取值为border-box(背景被裁剪到边框盒,为默认值),padding-box(背景被裁剪到内边距框),content-box(背景被裁剪到内容框)
background-origin规定背景图的定位区域,可以取值为:
boder-box:背景图像相对于边框来定位
padding-box:背景图像相对于内边距框来定位
content-box:背景图像相对于内容框来定位,就是图片的width和height
图像精灵就是将网页中所有图像拼到一起,是为了减少向服务器请求下载图片的次数
渐变语法:有浏览器不兼容问题
使用background-image属性进行设置,可以取值:
linear-gradient:线性渐变
radial-gradient:径向渐变
repeating-linear-gradient:重复线性渐变
repeating-radial-gradient:重复线性渐变
linear-gradient(angle,color-point1,color-point2,...)
angle:为第一个参数,指定渐变的方向,可以是角度值,也可以是关键词,如to top(对应0deg),to right(对应90deg),
to bottom(对应180deg),,to left(对应270deg)
color-point:表示颜色的起始点、中间点或者结束点,取值为颜色和位置的结合,如red 0%, green 50%
如:#d1{background-image:linear-gradient(to bottom,red,#fff);}
#d2{background-image:linear-gradient(90deg,red 0,#ccc 30%, #fff 100%);}
径向渐变:radial-gradient(size at position,color-point1, color-point2,...),如:
background-image:repeating-radial-gradient(50px, at center, red 0px. green 20px, orange 50x);
背景:背景包含背景图、背景颜色
背景色:background-color
背景图:background-image
background-repeat 背景图重复方式 repeat、no-repeat、repeat-x、repeat-y
background-position:x-position y-position
x-position为负值,背景图左移
y-position为负值,背景图上移
background-attachment 背景图固定 fixed
background-size 背景图缩放,一般不用
background-size:width height
background-clip 背景色裁剪
背景色默认是从border-box开始的,可以用该属性定义开始位置为padding-box或者是content-box
background-origin 背景图裁剪区域,设置背景图默认的开始位置。可以是border-box,padding-box,content-box
渐变:
background-image的属性值,可以是:
linear-gradient:线性渐变
radial-gradient:径向渐变
CSS基础知识(2)相关推荐
- css点击a标签显示下划线_好程序员HTML5培训教程-html和css基础知识
好程序员HTML5培训教程-html和css基础知识,Html是超文本标记语言(英语全称:HyperText Markup Language,简称:HTML)是一种用于创建网页的标准标记语言. Css ...
- 〖前端开发〗HTML/CSS基础知识学习笔记
经过一天的学习,把慕课网的HTML/CSS基础知识学完了,笔记整理: 1. 文件结构:HTML文件的固定结构:<html><head>...</head><b ...
- HTML/CSS基础知识(四)
WEB标准和W3C的理解与认识 Web标准是一系列标准的集合. 网页主要由三部分组成:结构(Structure).表现(Presentation)和行为(Behavior). 对应的标准也分三方面:结 ...
- html css基础知识
1 这是自己学习html时候做的一些记录,供大家参考 <!-- 2 块和内联3 块元素:独占一行的元素4 div p h ul5 div没有任何语义,就是一个纯粹的快元素6 就是为了方便布局7 ...
- HTML+CSS基础知识简单版
HTML+CSS基础知识简单版 一.HTML概述 HTML:超文本标记语言,其实就是用来开发网页的一门语言: CSS:层叠样式表,可以用于渲染网页.美化网页.做网页. 1.HTML介绍 HTML:超文 ...
- CSS基础知识(一):选择器
文章目录 前言 一.CSS基础知识 二.选择器 1.选择器 2.基础选择器 2.1 标签选择器 2.2 类选择器 2.3 id选择器 2.4 通配符选择器 2.5 基础选择器总结 3.复合选择器 3. ...
- CSS基础知识---三种选择器
CSS基础知识---三种选择器 选择器 标签选择器 id选择器 class选择器 全部代码 选择器 标签选择器 id选择器 class选择器 标签选择器 选择器优先级:id>class>标 ...
- HTML+CSS基础知识5
HTML+CSS基础知识5 30.`<strong>`.`<em>`和`<b>`.`<i>`标签的区别 31.引用标签 32.iframe嵌套页面 33 ...
- HTML+CSS基础知识3
HTML+CSS基础知识3 15.css选择器 16.css的继承 17.css优先级 18.css盒子模型 19.css标签分类 20.显示框类型 21.标签的嵌套规范 22.溢出隐藏 23.透明度 ...
- CSS基础知识(定位)
CSS基础知识 CSS布局的三种机制 普通流(标准流) 浮动 定位 定位模式 静态定位(static) 相对定位(relative) 绝对定位(absolute) 固定定位(fixed) 边偏移 定位 ...
最新文章
- 1-Swift中的Struct 和 Class
- 《因果学习周刊》第10期:ICLR2022中最新Causal Discovery相关论文介绍
- 安装npm出现Profile not found.的问题
- android热更新插件,与Android热更新方案Amigo的再次接触
- 快速寻找满足条件的两个数
- 一:(1.4)了解MVC之区域
- bzoj1715[Usaco2006 Dec]Wormholes 虫洞
- git提交过滤package.json_eclipse配置git环境以及使用git提交本地仓和远程仓
- Python链表学习
- predicate 列存储索引扫描_MySQL中IS NULL、IS NOT NULL、!=不能用索引?胡扯!
- sbit和sfr的定义
- 【GIS教程】土地利用转移矩阵
- ***HTML +CSS 总结与归纳
- 百度Apollo 2.0 车辆控制算法之LQR控制算法解读-清晰版
- 可视化h5界面编辑器_超优秀 H5可视化制作编辑器H5DS
- ff7重制版青魔法_最终幻想7重制版蒂法全服装获取攻略
- C# WPF MVVM 实战 – 2.4 单元测试
- 【读点论文】EfficientFormer: Vision Transformers at MobileNet Speed,运用纯transformer架构对比卷积模型在终端上部署的推理速度
- 宝塔 cpanel_cPanel / WHM许可更改
- large-margin softmax loss for convolutional neural networks