CCS学习(三)
边框样式
边框线 dorder-style (top 上; bottom 下; left 左; right 右) 样式:none | hidden | dotted | dashed | solid | double | groove |ridge | inset | outset
不显示上边框 例如:<style type="text/css">
div{border-top-style: none;}
</style>
边框宽 border-width (top 上; bottom 下; left 左; right 右) 样式:medium | thin | thick | length
上边框宽度 例如:<style type="text/css">
div{border-top-width: 100px;}
</style>
边框颜色 border-color (top 上; bottom 下; left 左; right 右)
上边框为红色 例如:<style type="text/css">
div{widows: 100px; height: 100px; border-style: solid; border-top-color: red;}
</style>
边框缩写 border:1px solid #FF0000; 1px为边距 solid为风格 后面是颜色
圆角效果 border-radius 例如:{ border-radius:1px;}所有边角都以半径为1px的圆角, {border-radius: 1px 2px 3px 4px;}以顺时针方向设置, {border-radius:50%}圆
边框图片 border-image 样式:source, slice,width,outset,repeat 注意:在设置了border-image后则border-style不显示
盒子阴影(背景图片颜色阴影) box-shadow 设置的样式: box-shadow: X轴偏移量 Y轴偏移量 [阴影模糊半径] [阴影扩展半径] [阴影颜色 rgba(0,0,0,.5)这里的.5是透明度 ] [投影方式 inset;] (字体阴影 text-shadow )
段落样式
行高 line-height 可用单位:px % (内容到边框border的高度叫行高)
段落首行缩进 text-indent 可用单位:em (一般文章第一行的第一个字都会后退两格 2em)
段落对齐 text-align 样式:left right center justify自动调整不齐的地方
文字间距 letter-spacing 文字与文字的空隙
文字溢出 text-overflow 样式:cilp 把溢出框外的文字剪掉, elliptical 把溢出框外的文字改成.... (如要改成...必须强制定义文本【white-space:nowrap】和隐藏溢出【overflow-hidden】才会实现elliptical的效果)
例如:<style type="text/css">
.p{
width: 100px;
height: 30px;
border:1px solid red;
overflow:hidden;
word-spacing: nowrap;
text-overflow: ellipsis;
}
</style>
段落换行 word-wrap 样式:normal 允许内容顶开或溢出指定的容器边界, breap-word 内容将在边界内换行,如果需要,单词内部允许断行。
背景样式
定位 position: static:无特殊定位,对象遵循正常文档流。top,right,bottom,left等属性不会被应用。
( 定位用于让多个border重叠效果) relative:对象遵循正常文档流,但将依据top,right,bottom,left等属性在正常文档流中偏移位置。
absolute:对象脱离正常文档流,使用top,right,bottom,left等属性进行绝对定位。而其层叠通过z-index属性定义。
fixed:对象脱离正常文档流,使用top,right,bottom,left等属性以窗口为参考点进行定位,当出现滚动条时,对象不会随着滚动。
背景颜色 background-color:颜色; 还有一种 rgba red 红色 green 绿色 blue 蓝色 a 代表的是透明度 (a的取值范围为0-1) 语法是:color:ragb(0,0,0,.1) border-color:rgba background-color:rgba
渐变色 background-image:linear-gradient( to top,red 10%,blue)
背景图片 background-image:none / URL(图片地址)
背景平铺方式 background-repeat:repeat默认多重图片 / no-repeat 一张图片/ repeat-X X轴多重图片 / repeat-Y Y轴多重图片
背景图片对齐方式 background-position:左右对齐 上下对齐; 还可以用 :% px;
背景原点
CCS学习(三)的更多相关文章
- HTTP学习三:HTTPS
HTTP学习三:HTTPS 1 HTTP安全问题 HTTP1.0/1.1在网络中是明文传输的,因此会被黑客进行攻击. 1.1 窃取数据 因为HTTP1.0/1.1是明文的,黑客很容易获得用户的重要数据 ...
- TweenMax动画库学习(三)
目录 TweenMax动画库学习(一) TweenMax动画库学习(二) TweenMax动画库学习(三) ...
- Struts2框架学习(三) 数据处理
Struts2框架学习(三) 数据处理 Struts2框架框架使用OGNL语言和值栈技术实现数据的流转处理. 值栈就相当于一个容器,用来存放数据,而OGNL是一种快速查询数据的语言. 值栈:Value ...
- 4.机器学习——统计学习三要素与最大似然估计、最大后验概率估计及L1、L2正则化
1.前言 之前我一直对于“最大似然估计”犯迷糊,今天在看了陶轻松.忆臻.nebulaf91等人的博客以及李航老师的<统计学习方法>后,豁然开朗,于是在此记下一些心得体会. “最大似然估计” ...
- DjangoRestFramework学习三之认证组件、权限组件、频率组件、url注册器、响应器、分页组件
DjangoRestFramework学习三之认证组件.权限组件.频率组件.url注册器.响应器.分页组件 本节目录 一 认证组件 二 权限组件 三 频率组件 四 URL注册器 五 响应器 六 分 ...
- [ZZ] 深度学习三巨头之一来清华演讲了,你只需要知道这7点
深度学习三巨头之一来清华演讲了,你只需要知道这7点 http://wemedia.ifeng.com/10939074/wemedia.shtml Yann LeCun还提到了一项FAIR开发的,用于 ...
- SVG 学习<三>渐变
目录 SVG 学习<一>基础图形及线段 SVG 学习<二>进阶 SVG世界,视野,视窗 stroke属性 svg分组 SVG 学习<三>渐变 SVG 学习<四 ...
- Android JNI学习(三)——Java与Native相互调用
本系列文章如下: Android JNI(一)——NDK与JNI基础 Android JNI学习(二)——实战JNI之“hello world” Android JNI学习(三)——Java与Nati ...
- day91 DjangoRestFramework学习三之认证组件、权限组件、频率组件、url注册器、响应器、分页组件
DjangoRestFramework学习三之认证组件.权限组件.频率组件.url注册器.响应器.分页组件 本节目录 一 认证组件 二 权限组件 三 频率组件 四 URL注册器 五 响应器 六 分 ...
- Django基础学习三_路由系统
今天主要来学习一下Django的路由系统,视频中只学了一些皮毛,但是也做下总结,主要分为静态路由.动态路由.二级路由 一.先来看下静态路由 1.需要在project中的urls文件中做配置,然后将匹配 ...
随机推荐
- R与并行计算(转)
文章摘要 本文首先介绍了并行计算的基本概念,然后简要阐述了R和并行计算的关系.之后作者从R用户的使用角度讨论了隐式和显示两种并行计算模式,并给出了相应的案例.隐式并行计算模式不仅提供了简单清晰的使用方 ...
- TCP--telnet为何在127s后返回?
背景 近期编写了监控业务服务器的脚本,主要原理是用shell脚本(运行shell的机器称之为监控机)调用项目组专用的接口测试工具,对指定的业务服务器进行业务操作,根据接口测试工具的返回结果判断业务服务 ...
- Vulkan Tutorial 05 逻辑设备与队列
操作系统:Windows8.1 显卡:Nivida GTX965M 开发工具:Visual Studio 2017 Introduction 在选择要使用的物理设备之后,我们需要设置一个逻辑设备用于交 ...
- 【转载】C/C++中的char,wchar,TCHAR
点击这里查看原文章 总体简介:由于字符编码的不同,在C++中有三种对于字符类型:char, wchar_t , TCHAR.其实TCHAR不能算作一种类型,他紧紧是一个宏.我们都知道,宏在预编译的时候 ...
- Git基础-打标签
打标签 同大多数 VCS 一样,Git 也可以对某一时间点上的版本打上标签.人们在发布某个软件版本(比如 v1.0 等等)的时候,经常这么做.本节我们一起来学习如何列出所有可用的标签,如何新建标签,以 ...
- 用WebStorm创建Express项目时出现:express version is unavailable
那是因为在npm的配置文件中使用了代理: 方式一:查看配置:npm config list如果有:registry = "https://registry.npm.taobao.org/&q ...
- Elasticsearch 与 Kafka 整合剖析
1.概述 目前,随着大数据的浪潮,Kafka 被越来越多的企业所认可,如今的Kafka已发展到0.10.x,其优秀的特性也带给我们解决实际业务的方案.对于数据分流来说,既可以分流到离线存储平台(HDF ...
- awk内引用shell变量【自己手动加精】
题目 [root@localhost ~]# cat 1.txt iii sss ddd 执行命令 [root@localhost ~]# A=0 [root@localhost ~]# awk '{ ...
- 9个常用iptables配置实例
iptables命令可用于配置Linux的包过滤规则,常用于实现防火墙.NAT.咋一看iptables的配置很复杂,掌握规律后,其实用iptables完成指定任务并不难,下面我们通过具体实例,学习ip ...
- Mybatis学习(二) - CRUD操作(增删改查操作)
直接上例子: 1.项目结构: 2.具体代码及配置 User.java package com.mybatis.bean; public class User { private int id; pri ...