跟随我在oracle学习php(6)
CSS,主要用于控制Web页面的外观。通过使用CSS样式设置页面的风格,可将页面的内容
与表现形式分离。css 层叠样式表美化页面配合html布局。
在当前可以浏览的网站当中,都存在着CSS样式代码,可以通过谷歌等浏览器的控制
台,去除网页中的CSS代码,来查看没有CSS时代网页的显示效果。在没有css的时候网页是十分简陋的。
在哪写?
l、内嵌(行内)(不推荐优先级最高)
写在标签里面,以属性的形式表现,属性名
<b style=””></b>
2、内联(少量样式可以在里面写)
style
写在head标签里面以标签的形式表现 标签名style
3、外部引用.Css <link rel="stylesheet" type="text/css" href="mystyle.css">
写在head标签里面以标签的形式表现标签名link
推荐使用外部引用,控制性强,便于维护
样式格式:
样式名:样式值:样式名:样式值
通过引入方式,在HTML页面中放入了CSS样式,接下来要做的操作就是让相应的
标签应用定义好的CSS样式,这里会涉及“选择器”的基本知识。
选择器格式:
选择器{样式名:样式值}
选择器:用来找标签(条件)把指定的样式应用在找到的标签上
通用选择器: *所有标签(很危险)
标签选择器: 根据标签名来找
id选择器: 根据id值来找 #id值
id属性在当前文件里是唯一的
class选择器 根据class值来找 .class值 ,class可以有多个,由空格分开
其他:
并列 两个选择器用—个样式用逗号分隔
选择器1 ,选择器2{样式)
子类在选中的标签中找 空格
属性选择器: [属性名=’属性值']
优先级
就近原则(相同样式 相同选择器)
权值(越大 优先级越高)
行内 1000
Id 100
Class 10
标签 1
通用* 0
html中图片路径: 从html文件开始找
css中图片路径: 从css文件开始找
js中图片路径: 从引入该js文件的html文件开始找
CSS中长度与颜色
长度单位 说明
in 英寸
cm 公分
mm 公里
cm 以目前字体高度为单位
ex 以小写字母高度为单位(大部分不支持)
pt 1pt/72英寸
pc 1pc/12pt
px 像素(推荐使用)
颜色单位: 说明
十六进制 如:color:#ff0000
颜色名称 如:color:red
三原色单位 如:rgba(255,0,0,1)
一般最常用的是十六进制,三原色单位的原理【红(r),绿(g),蓝(b)】混合而成。。每个值域在0-255之间
CSS中的文字属性
属性名称 属性值 说明
font-style normal 正常显示
italic 斜体
font-variant normal 正常显示
small-caps 将英文大小写字母写调为同宽
font-weight normal 正常显示
bold 粗体
font-size 像素 字体大小
百分比 字体大小
12px
14px
16px
font-family 字体名称 设置字体名称
微软雅黑
font属性简化的使用方法:
font:是否斜体 是否同宽 是否粗体 大小 字体名称
例如:font:italic bold 200 隶书;
CSS中的文本属性
属性名称 属性值 说明
color 十六进制 颜色
英文名称 颜色
三原色单位 颜色
letter-spacing normal 正常显示
长度 文本间隔
word-spacing normal 正常显示
数字 单词间距
white-space normal 文本自动处理换行
pre 换行和空白受保护
nowrap 强制在同一行显示
text-align left 文字靠左
right 文字靠右
center 文字靠中
text-decoration none 正常显示
underline 加上下划线
overline 加顶线
line-through 加删除线
text-indent 长度 首行缩进
百分比 同上
line-height 像素 行高
数字/百分比 行高
text-transform none 正常显示可以包含大,小字符
capitalize 字符串第一个字符大写
uppercase 设置大写字符
lowercase 设置小写字符
vertical-align sub 设置文字为下标。
super 设置文字为上标。
top 元件往上端靠齐。
middle 设置文字是在中线位置。
bottom 元件往下端靠齐。
CSS中背景的使用
属性名称 属性值 说明
background-attachment scroll 设置背景图像会随视窗滚动
条的移动而移动。
fixed 设置背景图像不会随视窗滚动条
的移动而移动。
background-color 十六进制
英文名称 background-color:red;
三原色 background-color:rgb(255,0,0)
transparent background-color:transparent;透明
background-image URL background-image:url("bg.jpg")
背景图片
none 不设置背景图片
background-position top left 设置背景图案出现在上左方。
top center 设置背景图案出现在上方中间。
top right 设置背景图案出现在上右方。
center left 设置背景图案出现在中间左方。
center center 设置背景图案出现在IE中间。
center right 设置背景图案出现中间右方。
bottom left 设置背景图案出现在下左方。
bottom 设置背景图案出现在正下方。
bottom right 设置背景图案出现在下右方。
background-size: cover; 背景填充
background-repeat repeat 将背景图案填满整个背景。
repeat-x 将背景图案在水平方向添满。
repeat-y 将背景图案在垂直方向添满。
no-repeat 图案只出现一次。
背景图案简化方案:
background:颜色 背景图片 repeat attachment position
CSS中列表的使用
属性名称 属性值 说明
list-style-type none 无符号
disc 实体的小圆点。
circle 空心的小圆点。
square 实心的小方块。
decimal 1,2,3...
lower-roman i,ii,iii...
upper-roman I,II,III...
lower-alpha a,b,c,d,e...
upper-alpha A,B,C,D,E...
list-style-position inside 清单项目较往右移。
outside 清单项目正常显示。
list-style-image URL list-style-image:url(lmk.gif)
none 不会显示任何图象
清单的简化设置:
list-style:circle inside url("bullet.gif")
CSS中边框的使用
属性名称 属性值 说明
border-color 十六进制 可依序设置上,右,下,左线颜色
英文名称 border-color:red(四边均为红色)
三原色 border-color:red green
(上下为红色,左右为绿色)
border-color:red green blue
(上为红色、左右为绿色、下为蓝色)
border-color:red green blue yellow
(上右下左分别为红绿蓝黄)
border-style none 不显示边线
dotted 点线
dashed 虚线
solid 实线
double 双线
border-width 长度 border-width:0.2cm 0.3cm 0.4cm 0.5cm;
border-width:1 2 3 4;
简化方案:border:形态 长度 颜色
例如 border:1px solid black;
跟随我在oracle学习php(6)的更多相关文章
- 跟随我在oracle学习php(19)
Order by子句 形式: order by 排序字段1 [排序方式], 排序字段2 [排序方式], ..... 说明: 对前面取得的数据(含from子句,where子句,group子句, ...
- 跟随我在oracle学习php(18)
修改表: 一般概述 通常,创建一个表,能搞定(做到)的事情,修改表也能做到.大体来说,就可以做到: 增删改字段: 增:alter table 表名 add [column] 字段名 字段类 ...
- 跟随我在oracle学习php(17)
通用设定形式 定义一个字段的时候的类型的写法. 比如: create table tab1 (f1 数据类型 ); 数据类型: 类型名[(长度n)] [unsigned] [zerofil ...
- 跟随我在oracle学习php(16)
数据库的增删改查 增:create database [if not exists ] 数据库名 [charset 字符集] [collate 字符排序规则]: 说明: 1,if n ...
- 跟随我在oracle学习php(15)
开发环境 独立开发环境:组成 Windows/Linux php Apache MySQL 集成开发环境:phpstudy wamp xammp 关系数据库: SQL: Struct Query La ...
- 跟随我在oracle学习php(14)
CSS3的@keyframes用法详解: 此属性与animation属性是密切相关的,关于animation属性可以参阅CSS3的animation属性用法详解一章节. 一.基本知识: keyfram ...
- 跟随我在oracle学习php(13)
常用的css样式 [class~="col-6"]:选择我所有类名中包含有col-6独立单词的元素 [class*="col-"]:选择所有类名中含有" ...
- 跟随我在oracle学习php(12)
DOM 文档对象模型 body:(什么时候)找到标签 操作标签找到标签:(都会返回一个js对象)document.getElementById() 通过iddocument.getElementsBy ...
- 跟随我在oracle学习php(11)
数组专题 数组遍历: 1,普通for循环,经常用的数组遍历 var arr = [1,2,0,3,9]; for ( var i = 0; i <arr.length; i++){ consol ...
- 跟随我在oracle学习php(10)
正则表达式 做验证 做匹配 用符号来描述书写规则:/ 中间写正则表达式 /^ :匹配开头,$:匹配结尾 : /^ve/以ve开头的 /ve$/以ve结尾\d:一个任意的数字\w:一个任意的数字或字母\ ...
随机推荐
- python 中为什么不需要重载 参数*arg和**args
函数重载主要是为了解决两个问题. (1)可变参数类型. (2) 可变参数个数. 另外,一个基本的设计原则是,仅仅当两个函数除了参数类型和参数个数不同以外,其功能是完全相同的,此时才使用函数重载,如果两 ...
- C# Newtonsoft.Json JsonSerializerSettings 全局序列化设置
Newtonsoft.Json.JsonSerializerSettings setting = new Newtonsoft.Json.JsonSerializerSettings(); JsonC ...
- sublime-text3打造markdown编辑器
编辑插件 sublime自带的markdown语法高亮并不是很友好,推荐安装Markdown Editing,github主页然后在视图->语法里选择MarkdownEditing启用,支持三种 ...
- idea显示左边的树形项目结构
直接上步骤: File-->Project Structure-->Modules-->点击:中间一列框的"+"-->Import Module--> ...
- PriorityBlockingQueue 原理分析
PriorityBlockingQueue是一个支持优先级的无界阻塞队列,直到系统资源耗尽.默认情况下元素采用自然顺序升序排列.也可以自定义类实现compareTo()方法来指定元素排序规则,或者初始 ...
- 记账本微信小程序开发六
记账本微信小程序开发六 我的界面 主界面
- Json的转换
package com.utils; import java.io.IOException; import java.util.List; import org.codehaus.jackson.Js ...
- nginx 模块及运行机制 第三章
概述:nginx服务器模块.web请求处理机制及事件驱动模型.进程功能和进程间通信 一:Nginx的模块化结构设计: 1.核心模块:指的是nginx服务器运行当中必不可少的模块,这些模块提供了最基本最 ...
- 年度游戏圈2018白皮书解析手游折扣app哪个好及靠谱程度分析
2018年,随着全国暂停游戏版本的审核和发布<综合防控儿童青少年近视实施方案>(控制新的在线游戏数量),游戏行业受到的影响不小. 在游戏产业中,游戏行业2018年的收入同比增长5.2%,远 ...
- sql server 查询某个表被哪些存储过程调用
sql server 查询某个表被哪些存储过程调用 select distinct object_name(id) from syscomments where id in (select id fr ...