CSS样式学习-2
一、大小
①width宽;height高。
!注释:<a><span>无法使用该方法调整大小
控制元素的大小:宽高。下例是宽高分别100像素的div标签。
<div style="width:100px; height:200px;">
</div>
二背景
background-color背景色
background-image背景图
background-size大小(auto自动。在repeat-no情况下over宽高比不变,超出部分隐藏。contain宽高比不变,缩小至容器放下,可能留有空白)
background-repeat图片平铺方式(x轴平铺repeat-x;y轴平铺repeat-y;repeat-no不平铺。)
background-position图片位置(上top右right下bottom左left居中center)
background-attachment设置图片是否滚动
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style type="text/css">
#a{ height: 1000px;
width: 1000px;
background-image:url(1.jpg);
background-repeat: no-repeat;
background-size:contain;
background-position:center;}
</style>
</head>
<body>
<div id="a"></div>
</body>
</html>
三、字体
font-family设置字体
font-size字体大小12px;16px;
font-style(normal正常的,italic斜体,oblique倾斜)
font-weight:bold加粗
text-decoration(underline下划线,overline上划线,line-through删除线,none没有,作用删除超链接线)
color颜色
四、对齐方式
text-align水平对齐(center把文本排到中间,left靠左对齐,right靠右对齐)
line-height行高
vertiacl-align垂直对齐方式(需要配合行高使用)
text-indent缩进(单位像素,默认情况下15px为一个汉字字符大小,需按照字体大小设置)
五、边界边框
margin外边距
padding内边距
border边框。属性:大小、实虚线、颜色。例如border: 1px solid #fff;
可以使用单独方向,例如maigin-top:0;
六、列表方块
list-style:none不使用前面的点,inside点在里面,outside点在外面。
list-style-image将序号变更为图片。
七、格式布局
①position位置定位
fixed固定位置,相对浏览器
absolute绝对定位,相对父级
relative相对定位,对于原来的位置
②top、right、bottom、left距离上右下左的位置
③float流、流动,left向左流动,right向右流动
④clear:both清流、
⑤z-index分层
八、其他
①display隐藏属性。none隐藏、block显示。不占位置。可以使用display:inline-block改变span、a标签的大小
②visibility隐藏hidden。隐藏后占位置
③overflow超出隐藏hidden。
④透明opacity:0.5;-moz-opacity:0.5;filter:alpha(opcaity=50)
⑤圆角border-radius:5px;
⑥box-shadow:20px 20px 10px white;(左、下、隐约的大小、颜色)
⑦box-reflect:文字图片倒影
1、方向above上方,below下方,left左侧,right右侧
2、offset偏移距离,百分比定义。默认值为0
3、mask-box-image定义遮罩图像,该图像将覆盖投影区域。如果省略该参数值,则默认为无遮罩图像。
CSS样式学习-2的更多相关文章
- 11种常用css样式学习大结局滚动条与显示隐藏
滚动条展示 overflow-x: hidden;/*是否对内容的左/右边缘进行裁剪*/overflow-y: hidden;/*是否对内容的上/下边缘进行裁剪*/overflow:scroll;/* ...
- bootstrap全局CSS样式学习
参考http://v3.bootcss.com/css/,根据自己的记忆进行的复述,加深记忆. 首先介绍bootstrap全局CSS样式 只通过使用bootstrap.css,即可获得统一的样式设置. ...
- Boostrap入门级css样式学习
1. 自适应网页设计 首先,在网页代码的头部,加入一行 viewport元标签.viewport是网页默认的宽度和高度, <meta name="viewport" cont ...
- 2019-02-15 CSS样式学习——(内容来自mooc北京林业大学web前端开发授课ppt)
CSS样式的添加方法 行内样式 e.x. 内嵌样式 e.x. 注意内嵌样式写在head标签内: 单独文件(外部式样式表文件) 也是在head标签内插入超链接,sublime+emmet可以用link: ...
- css样式学习笔记
视频参见php中文网玉女心经视频教程 讲解的相当的清楚和明白 第1章 :css快速入门 1.1 什么是css 改变html框架的样式. 1.2 css的三种引入形式 第一种形式 ...
- html之CSS样式学习笔记
本文内容: 字体样式 文本样式 背景样式 尺寸样式 盒子模型 边框样式 边距样式 浮动布局 定位布局 [CSS3]伸缩布局 标签显示方式 列表样式 [CSS3]过渡样式 [CSS3]变换样式之2D变形 ...
- CSS样式学习-3、轮廓、伪类/元素、display-flex布局
一.轮廓 outline绘制于元素周围的一条线,位于边框边缘外围. 属性规定元素轮廓的样式.颜色.宽度. outline-width轮廓宽度,属性:thin细轮廓.medium中等(默认值).thic ...
- CSS样式学习-1
一.分类 ①内联,写在标签中,写法是style="样式属性".优先级最高. 优点:控制精确.缺点:代码重用性差,范围小. 例如: <div style="font- ...
- css样式学习小知识
1. 使用百分比设置宽高 自适用宽高的,有分割的区域,可以适用百分比:30% 70% 如果有一部分是固定的宽度或者高度,可以使用:height: calc( 100% - 36px ); 2. inp ...
- bootstrap 学习 ---css样式学习
bootstrap 适用于响应式布局,移动设备优先的web项目 1.学习bootstrap需要引入bootstrap的css,jquery,bootstrap的js,注意:jquery文件必须在boo ...
随机推荐
- java高并发编程(四)高并发的一些容器
摘抄自马士兵java并发视频课程: 一.需求背景: 有N张火车票,每张票都有一个编号,同时有10个窗口对外售票, 请写一个模拟程序. 分析下面的程序可能会产生哪些问题?重复销售?超量销售? /** * ...
- 峰Redis学习(7)Redis 持久化RDB方式
第一节:Redis 持久化介绍 redis所有的数据都存在内存中,所以速度非常快,但是一旦断电等情况,数据就没了.从内存当中同步到硬盘上,这个过程叫做持久化过程. 持久化操作,两种方式:rdb方式.a ...
- docker安装testlink
testlink 镜像 https://hub.docker.com/r/bitnami/testlink ```#shell 下载镜像 docker pull bitnami/testlink
- VS2008--VS2013 各种版本官方下载地址
很多刚入门的学生都不知道从哪里下载Visual studio 编译器 , 我特闲的纯手工整理了下 Visual Studio 2005 Professional 官方90天试用版 英文版:http:/ ...
- delphi版本对应
delphi 7 delphi 8delphi 2005 ----- 9delphi 2006 ----- 10 delphi 2007 ----- 11delphi 2009 ----- 12 de ...
- Linux性能优化 第五章 性能工具:特定进程内存
5.1 Linux内存子系统 在诊断内存性能问题的时候,也许有必要观察应用程序在内存子系统的不同层次上是怎样执行的.在顶层,操作系统决定如何利用交换内存和物理内存.它决定应用程序的哪一块地址空间将被放 ...
- Linux安装vsftpd组件
1 安装vsftpd组件 安装完后,有/etc/vsftpd/vsftpd.conf 文件,是vsftp的配置文件. [root@hadoop1 ~]# yum -y install vsftpd 2 ...
- mybatis 设置新增数据后返回自增主键
主要是注解@Options起作用,语句如下: @Insert({ "INSERT INTO application_open_up ( " + "app_open_hos ...
- TreeSet多字段排序
package st; public class PersonBean implements Comparable<Object>{ private String name; privat ...
- JVM总结-Java 虚拟机是怎么识别目标方法(上)
重载与重写 在 Java 程序里,如果同一个类中出现多个名字相同,并且参数类型相同的方法,那么它无法通过编译.也就是说,在正常情况下,如果我们想要在同一个类中定义名字相同的方法,那么它们的参数类型必须 ...