常用CSS样式设置
文字
我们以div
标签举例,来设置常见的文字样式
<div>今天天气真晴朗!</div>
div {
/* 文字大小为14像素 */
font-size: 14px;
/* 文字颜色是黄色的 */
color: yellow;
/* 段落首行缩进两个字的宽度 */
text-indent: 2em;
text-indent: 1cm;
text-indent:-9999px; 隐藏文字
/* 设置对齐方式,center:居中对齐; left:左对齐; right:右对齐*/
text-align: center;
/* 设置字体为sans-serif */
font-family: sans-serif;
/* 文字斜体显示,normal:文本正常显示; italic:文本斜体显示; oblique:文本倾斜显示 */
font-style:italic;
/* 文字加粗显示, bold:加粗; normal:正常大小; 数字值(100-900);100对应最细的;900对应最粗的;400 等同于 normal,而 700 等同于 bold,*/
font-weight: bold;
font-weight: 100;
}
/*规定字符间距*/
letter-spacing: 30px;
letter-spacing: -0.5em;
/*规定行高间距;在大多数浏览器中默认行高大约是 110% 到 120%;*/
line-height: 90%
line-height: 200%
背景
div {
/* 设置背景色为灰色 */
background-color: gray;
/* 设置背景图片 */
background-image: url("logo.gif");
/* 设置背景图片尺寸 ;第一个值设置宽度,第二个值设置高度;如果只设置一个值,则第二个值会被设置为 "auto";cover:完全覆盖背景区域;contain:宽度和高度完全适应内容区域 */
background-size: 80px 60px;
background-size: 50% 50%;
background-size: cover;
background-size: contain;
/* 背景图片不重复:no-repeat; 水平重复:repeat-x; 垂直重复:repeat-y; */
background-repeat:no-repeat;
/* 背景图片位置 top:上; left:左; right:右; bottom:底部; center:中间; */
/* 也可以设置百分比例如 66% 33% ,第一个数是水平方向,第二个数是垂直方向*/
/* 也可以设置像素 例如 0px 22px ,第一个数是水平方向,第二个数是垂直方向*/
background-position:top right;
background-position:66% 33%;
background-position:0px 22px;
/* 如果文档较长,那么当文档向下滚动时,背景图像会固定在文档中不滚动*/
background-attachment:fixed;
}
宽度和高度
div {
/* 设置宽度为200像素 */
width: 200px;
width: 100%;
/* 设置高度为100像素 */
height:100px;
height:100%;
}
边框
div {
/* 设置div的边框为1px的线条*/
border:1px solid;
/* 分别设置div四个边的边框 */
border-top: 1px solid #08c;
border-left: 1px dashed red;
border-right: 1px solid;
border-bottom: 1px solid red;
}
常用CSS样式设置的更多相关文章
- 获取jQuery对象的第N个DOM元素 && table常用css样式
获取jQuery对象的第N个DOM元素 1.$(selector).get(N-1) 2.$(selector)[N-1] 注意:.index()方法返回的是一个数,相当于C#中的IndexOf() ...
- 11种常用css样式学习大结局滚动条与显示隐藏
滚动条展示 overflow-x: hidden;/*是否对内容的左/右边缘进行裁剪*/overflow-y: hidden;/*是否对内容的上/下边缘进行裁剪*/overflow:scroll;/* ...
- Day 31:CSS选择器、常用CSS样式、盒子模型
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- TERSUS无代码开发(笔记04)-CSS样式设置
CSS样式设置 1.常用显示样式 大小尺寸 说明 间距边距 说明 各类颜色 说明 width 宽 margin 外边距 color 颜色 height 高 pad ...
- HTML+CSS样式设置——CSS一学就会
HTML+CSS样式设置 CSS:(Cascading Style Sheets)层叠样式设置表. 网页的展示效果跟其排版有非常大的关系.排版则主要依靠CSS来设置.调节. 以下说CSS与HTML的联 ...
- CSS样式设置语法全解,样式优先级、值和单位、字体、文本、块级元素,行内元素,替换元素、非替换元素、display、float、position、table、li、光标、边距边框、轮廓、颜色背景
全栈工程师开发手册 (作者:栾鹏) 一个demo学会css css选择器全解 css操作语法全解 CSS样式设置语法全解: 样式优先级 1. !important标记的样式 > 内联样式(sty ...
- 每天一个JavaScript实例-展示设置和获取CSS样式设置
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
- 11种常用css样式之表格和定位样式学习
table表格中border-collapse: collapse;/*表格边框是否合并*/border-spacing: 10px;/*表格边框之间的距离*/定位详情可以阅读position属性值4 ...
- 11种常用css样式之鼠标、列表和尺寸样式学习
鼠标cursor常见样式crosshair;/*十字形状*/cursor:pointer;/*小手形状*/cursor:wait;/*等待形状*/cursor:text;/*默认 文本形状*/curs ...
随机推荐
- angular知识点总结
angularjs angular支持的运算 逻辑运算 比较运算 三目运算 调用字符串对象的成员方法 使用直接变量表示法创建对象 使用数组 (不可以)new var (不可以)调用全局es javas ...
- RouteSelector的初始化
继前面的几篇OKhttp的拦截器简单分析之后,对于后续Okhttp之间的分析自己也着实琢磨了一段时间,是分析RealConnection?还是ConnectionPool,随着对Okhttp源码的深入 ...
- 本地化ASP.NET core模型绑定错误消息
默认错误消息: MissingBindRequiredValueAccessor A value for the '{0}' property was not provided. MissingKey ...
- C++使用using namespace std报错分析与解决方案
一句话概括,不能同时使用using 和include ***.h: 详细传送门:https://blog.csdn.net/m0_37876745/article/details/78565315
- ubuntu下中文乱码解决
这个方法只对该用户有效. 方法二:修改/etc/environment,增加以下内容: LANGUAGE=”zh_CN:zh:en_US:en” LANG=zh_CN.GBK
- my.ini /etc/my.cnf jdbc url
[client] default-character-set = utf8mb4 [mysql]# 设置mysql客户端默认字符集default-character-set=utf8mb4 [mysq ...
- 自动截取sql并合并,生成执行HQL
### 提取SQL语句 FILE_PATH="/data/SCRIPT" cat tables | while read file do echo "-----> ...
- jgroups-raft
要求 Java 8 支持 实现服务器的动态添加和删除 文档的编写 基于复制计数器的共识算法实现 https://github.com/belaban/jgroups-raft
- 6-----selenuim和phantonJs处理网页动态加载数据的爬取
动态数据加载处理 一.图片懒加载 什么是图片懒加载? 案例分析:抓取站长素材http://sc.chinaz.com/中的图片数据 #!/usr/bin/env python # -*- coding ...
- RTT学习之BSP
---恢复内容开始--- 一 根据相近型号的demo BSP进行修改制作自己的BSP https://github.com/RT-Thread/rt-thread/blob/master/bsp/st ...