css属性大全(基础篇)
CSS全称为Cascading Style Sheets,中文翻译为“层叠样式表”,简称CSS样式表,所以称之为层叠样式表(Cascading Stylesheet)简称CSS。在网页制作时采用CSS技术,可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。只要对相应的代码做一些简单的修改,就可以改变同一页面的不同部分,或者页数不同的网页的外观和格式。
CSS作用:
CSS具有对网页的布局、颜色、背景、宽度、高度、字体进行控制,让网页按您的美工设计布局的更加美观漂亮。
在初级学CSS样式的觉得好多,记不了那么多,现在我也整合了一份经常用上的CSS属性。方便大家一起学习,与交流
样式开始最常见的是*号,
这里的“*”号是通配符,即指,网页html中所有标签意思。在*定义的属性,一般是设置页面一些固定的属性,比喻,字体大小,也字体样式这种。
从边框说起:
1.border:边框
边框样式的参数:
solid;/*边框为实线实线边框(常用)*/
none; /*无边框*/
dotted; /*边框为点线*/
dashed;/*边框为长短线*/
double;/*边框为双线*/
groove ;/*根据border-color的值画3D凹槽*/
ridge;/*根据border-color的值画菱形边框*/
inset; /*根据border-color的值画3D凹边*/
outset ;/*根据border-color的值画3D凸边*/
1.1、border四个边框
border-left 设置左边框,一般单独设置左边框样式使用
border-right 设置右边框,一般单独设置右边框样式使用
border-top 设置上边框,一般单独设置上边框样式使用
border-bottom 设置下边框
在开发中我们一般这样写CSS 边框,优化简写,常见对对象设置使用属性代码:border:1px solid #blue;。
2.背景属性: (background)
background /*颜色*/
background-image: url();/*背景图片*/
在开发中我们经常看到一些小图标,那样做法就是页面的减少请求,
css sprites直译过来就是CSS精灵。通常被解释为“CSS图像拼合”或“CSS贴图定位”。其实就是通过将多个图片融合到一张图里面。
在线合并网站:https://www.toptal.com/developers/css/sprite-generator
background-repeat: no-repeat;/*不重复平铺背景图片*/
repeat-x;/*使图片只在水平方向上平铺*/
repeat-y;/*使图片只在垂直方向上平铺*/
/*如果不指定背景图片重复属性,浏览器默认的是背景图片向水平、垂直两个方向上平铺。*/
/*背景图片固定,背景图片固定控制背景图片是否随网页的滚动而滚动。如果不设置背景图片固定属性,浏览
器默认背景图片随网页的滚动而滚动。为了避免过于花哨的背景图片在滚动时转移浏览者的注意力,一般都设为固定*/
background-attachment: 参数
参数取值范围:
background-attachment: fixed;(固定)
scroll;(滚动)
background-position: left;(水平)
top(垂直);位置
fixed:网页滚动时,背景图片相对于浏览器的窗口而言,固定不动
scroll:网页滚动时,背景图片相对于浏览器的窗口而言,一起滚动
3、超链接设置 text-decoration: 参数 主要用途是改变浏览器显示文字链接时的下划线。
参数取值范围: underline:为文字加下划线
overline:为文字加上划线
line-through:为文字加删除线
blink:使文字闪烁
none:不显示上述任何效果
CSS连接属性:
a /*所有超链接*/
a:link /*超链接文字格式*/
a:visited /*浏览过的链接文字格式*/
a:active /*按下链接的格式*/
a:hover /*鼠标转到链接*/
鼠标
cursor:鼠标形状参
CSS鼠标形状参数表:
cursor:hand手
cursor:crosshair十字形
cursor:text" 文本形
cursor:wait沙漏形
cursor:move"十字箭头形:
cursor:help问号形
cursor:e-resize右箭头形
cursor:n-resize上箭头形
cursor:nw-resize左上箭头形
cursor:w-resize左箭头形
cursor:s-resize下箭头形
cursor:se-resize右下箭头形
cursor:sw-resize"左下箭头形
4.Float常跟属性值left、right、none
Float:none 不使用浮动
Float:left 靠左浮动
Float:right 靠右浮动
清除浮动 :clear:none|left|right|both
6.padding内补白(内边距)left right top bottom
padding-top:10px; /*上边框留空白*/
padding-right:10px; /*右边框留空白*/
padding-bottom:10px; /*下边框留空白*/
padding-left:10px; /*左边框留空白*/
7.position绝对定位absolute relative 固定 fixed 还有一个z-index
absolute : 将对象从文档流中拖出,使用left,right,top,bottom等属性进行绝对定位。此时对象不具有边距,但仍有补白和边框
relative : 对象不可层叠,但将依据left,right,top,bottom等属性在正常文档流中偏移位置
fixed left,right,top,bottom 对象固定一个位置
Z-index在使用绝对定位 position:absolute属性条件下使用才能使用。通常我们让不同的对象盒子以不同顺序重叠排列,我们就是要z-index样式属性
div{z-index:10}
注意:z-index的数值不跟单位。不用加上px.
z-index的数字越高越靠前,并且值必须为整数和正数(正数的整数)。就显示谁。如果二个div一起重叠,这个时候设置你想看到的div,那就可以把那个div的z-index设置大一点,这样就可以覆盖之前那个。
8.字体属性
1.color:加上颜色
2.font-size:20px;/*每个浏览器默认的字体不一样的 谷歌的默认字体大小是16或者18*/
x-small:较小
small:小x-small:较小
small:小xx-small:最小
medium:正常(默认值)
large:大
x-large:较大
xx-large:最大
2.font-style: oblique;(偏斜体) italic;(斜体) normal;(正常)
3.line-height: normal;(正常)
4.line-height:50px;/*div的高度也是五十,这样你的内容结束平行居中*/
5.font-weight: bold;(粗体) , lighter;(细体) normal;(正常),设置数字也是可以的 (100px,200px)
6.font-variant: small-caps;(小型大写字母) normal;(正常)
7.text-transform: capitalize;}(首字母大写) uppercase;(大写) lowercase;(小写) none;(无)
8.text-shadow:none:无阴影<length>①:
第1个长度值用来设置对象的阴影水平偏移值。可以为负值<length>②:
第2个长度值用来设置对象的阴影垂直偏移值。可以为负值<length>
③:如果提供了第3个长度值则用来设置对象的阴影模糊值。不允许负值<color>:设置对象的阴影的颜色。
举例:p{text-shadow:3px 10px rgba(0,0,0,.3);}
9.ul里面的属性:默认是实心圆,下面的就可以更改。
list-style-type:none; /*不编号*/
list-style-type:decimal; /*阿拉伯数字*/
list-style-type:lower-roman; /*小写罗马数字*/
list-style-type:upper-roman; /*大写罗马数字*/
list-style-type:lower-alpha; /*小写英文字母*/
list-style-type:upper-alpha; /*大写英文字母*/
list-style-type:disc; /*实心圆形符号*/
list-style-type:circle; /*空心圆形符号*/
list-style-type:square; /*实心方形符号*/
list-style-image:url(/dot.gif); /*图片式符号*/
list-style-position: outside; /*凸排*/
list-style-position:inside; /*缩进*/
10.随便举例几种字体:
font-family:"Courier New", Courier, monospace, "Times New Roman", Times, serif, Arial, Helvetica, sans-serif, Verdana
font-family: "Times New Roman", Times, serif; font-size: 14px;
font-family:Arial,Helvetica,sans-serif;font-size:100%;
font-family:"微软雅黑","黑体","宋体";
font-family:arial, sans-serif; font-size:12px;
区块
单词间距
1.word-spacing:
间隔距离
2.字母间距
letter-spacing:
字母间距
3.文本对齐
text-align:
参数的取值:
left:左对齐
right:右对齐
center:居中对齐
justify:相对左右对齐
4、垂直对齐
vertical-align:
参数
top:顶对齐
bottom:底对齐
text-top:相对文本顶对齐
text-bottom:相对文本底对齐
baseline:基准线对齐
middle:中心对齐
sub:以下标的形式显示
super:以上标的形式显示
5、文本缩进
text-indent: 缩进距离
12px相当于一个文字距离
6、空格
white-space:
参数
normal 正常
pre 保留
nowrap 不换行
7、显示样式
display:
参数
参数取值范围:
block:块级元素,在对象前后都换行
inline:在对象前后都不换行
list-item:在对象前后都换行,增加了项目符号
none:无显示
8.text-overflow超出范围显示...
text-overflow参数值和解释:
clip : 不显示省略标记(...),而是简单的裁切
ellipsis : 当对象内文本溢出时显示省略标记(...)
white-space:同一行内显示所有文本文字,让所有文字内容中一排显示不换行。
white-space: nowrap;
overflow:hidden;
auto : 此为body对象和textarea的默认值。在需要时剪切内容并添加滚动条,DIV默认情况也是这个值,但需要设置时候设置即可
hidden : 不显示超过对象尺寸的内容
scroll : 总是显示滚动条
1.CSS属性的缩写
缩写的好处:
1、简化代码。一些CSS属性简写可以减少CSS代码从而减少CSS文件的占用字节,加快网页下载速度和网页加载打开速度。
我们开发中,简写代码量是必要的。
如:font-size:12px; font-weight:bold; font-family:Arial, Helvetica, sans-serif; line-height:30px;
我们可以简写缩写为font:12px/22px bold Arial, Helvetica, sans-serif;
前面说的margin,padding,都可以简写。我就不全部写出来了
2.div和span的区别:
二者都是用来划分区间的。它们差别就在于div是块级元素,不会其他元素在同一行;span是内联元素,可以与其他元素位于同一行。
1.1:span标签是不能改大小的。span占用的是内容有多宽就占用多宽的空间距离,如果你把span标签的大小想改掉就必须把它变成块级元素。display:inline-block;
块级元素有:div p form ul ol li ......
行内元素有:span img a......
3.盒子模型(Box Model)
盒子模型也有人称为框模型,HTML中的多数元素都会在浏览器中生成一个矩形的区域,每个区域包含四个组成部分,从外向内依次是:外边距(Margin)、边框(Border)、内边距(Padding)和内容(Content)。
待续更新。。。。。。。。。。。。。。
css属性大全(基础篇)的更多相关文章
- HTML CSS 属性大全
CSS 属性大全 文字属性 「字体族科」(font-family),设定时,需考虑浏览器中有无该字体. 「字体大小」(font-size),注意度量单位.<绝对大小>|<相对大小&g ...
- CSS属性大全
字体属性:(font)大小 font-size:x-large;(特大) xx-small;(极小) 一般中文用不到,只要用数值就可以,单位:PX.PD样式 font-style:oblique;(偏 ...
- 前端中CSS属性大全
css属性 布局常用样式属性: width 设置元素(标签)的宽度,如:width:100px; height 设置元素(标签)的高度,如:height:200px; background 设置元素背 ...
- PHP面试大全 基础篇100道问题
2017年3月7日14:23:21 其实计划很久但是移植没时间去收集和处理弄成一个完整的文件 SVN地址: https://git.oschina.net/zxadmin/live_z 目前基础部分更 ...
- CSS快速入门基础篇,让你快速上手(附带代码案例)
1.什么是CSS 学习思路 CSS是什么 怎么去用CSS(快速上手) CSS选择器(难点也是重点) 网页美化(文字,阴影,超链接,列表,渐变等) 盒子模型 浮动 定位 网页动画(特效效果) 项目格式: ...
- 2天驾驭DIV+CSS (基础篇)(转)
这是去年看到的一片文章,感觉在我的学习中,有不少的影响.于是把它分享给想很快了解css的兄弟们. 基础篇[知识一] “DIV+CSS” 的叫法是不准确的[知识二] “DIV+CSS” 将你引入两大误区 ...
- 前端总结·基础篇·CSS(一)布局
目录 这是<前端总结·基础篇·CSS>系列的第一篇,主要总结一下布局的基础知识. 一.显示(display) 1.1 盒模型(box-model) 1.2 行内元素(inline) &am ...
- 前端总结·基础篇·CSS(二)视觉
前端总结系列 前端总结·基础篇·CSS(一)布局 前端总结·基础篇·CSS(二)视觉 前端总结·基础篇·CSS(三)补充 前端总结·基础篇·CSS(四)兼容 目录 一.动画(animation)(IE ...
- 前端总结·基础篇·CSS(三)补充
前端总结系列 前端总结·基础篇·CSS(一)布局 前端总结·基础篇·CSS(二)视觉 前端总结·基础篇·CSS(三)补充 目录 一.移动端 1.1 视口(viewport) 1.2 媒体查询(medi ...
随机推荐
- poj 2752 kmp的next数组
题目大意: 求一个字符串中某一个既是前缀又是后缀的前缀的结尾下标: 基本思路: 从_next[len]开始找_next[_next[len]],再找_next[_next[_next[len]]],一 ...
- 统计所有小于非负整数 n 的质数的数量,埃拉托斯特尼筛法
素数的定义:质数又称素数.一个大于1的自然数,除了1和它自身外,不能被其他自然数整除的数叫做质数. 1.暴力算法: 令i=2; 当i<n的时候,我们循环找出2-i的质数,即让i%(2~i-1), ...
- window.navigator.userAgent
只读属性 Window.navigator 会返回一个 Navigator 对象的引用,可以用于请求运行当前代码的应用程序的相关信息.window可以省略.来自navigator对象的信息具有误导性, ...
- 半途而废的Java爬虫学习经历
最近在面试,发现Java爬虫对于小数据量数据的爬取的应用还是比较广,抽空周末学习一手,留下学习笔记 Java网络爬虫 简单介绍 爬虫我相信大家都应该知道什么,有什么用,主要的用途就是通过程序自动的去获 ...
- SP7258 SUBLEX - Lexicographical Substring Search(后缀自动机)
传送门 解题思路 首先建\(sam\),然后在拓扑序上\(dp\)一下,把每个点的路径数算出来,然后统计答案时就在自动机上\(dfs\)一下,仿照平衡树那样找第\(k\)小. 代码 #include& ...
- 微软引入了两种新的网络过滤系统,WFP和NDISfilter
Windows 8是微软公司推出的最新的客户端OS,内部名称Windows NT 80.相对于Windows NT 5.x,其网络结构变化非常大,原有的TDI,NDIS系统挂接方法不再适用.在Wind ...
- C++的ofstream与ifstream使用
基本理解: ofstream是从内存到硬盘,ifstream是从硬盘到内存,其实所谓的流缓冲就是内存空间; 在C++中,有一个stream这个类,所有的I/O都以这个“流”类为基础的,包括我们要认识的 ...
- 解决Python报错:local variable 'xxx' referenced before assignment(引)
解决Python报错:local variable 'xxx' referenced before assignment(引) 解决Python报错:local variable 'xxx' refe ...
- dubbo使用multicast注册方式消费者无法发现服务的一种情况(我遇到的情况)
今天做dubbo测试的时候,翻出以前的代码,使用multicast广播地址的方式消费者居然无法发现服务.我的情况是因为启用了vmware虚拟机的网卡,导致了消费者无法发现服务,禁用vmware网卡后可 ...
- 1.1 React 介绍
1.1.1 React 是什么 React IS A JAVASCRIPT LIBRARY FOR BUILDING USER INTERFACES 来自:React 官方网站 狭义来讲 React ...