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)的更多相关文章

  1. 跟随我在oracle学习php(19)

    Order by子句 形式: order  by  排序字段1  [排序方式],  排序字段2  [排序方式], ..... 说明: 对前面取得的数据(含from子句,where子句,group子句, ...

  2. 跟随我在oracle学习php(18)

    修改表: 一般概述 通常,创建一个表,能搞定(做到)的事情,修改表也能做到.大体来说,就可以做到: 增删改字段: 增:alter  table  表名  add  [column]  字段名  字段类 ...

  3. 跟随我在oracle学习php(17)

    通用设定形式 定义一个字段的时候的类型的写法. 比如: create  table  tab1  (f1  数据类型 ); 数据类型: 类型名[(长度n)]  [unsigned]  [zerofil ...

  4. 跟随我在oracle学习php(16)

    数据库的增删改查 增:create  database  [if  not  exists ] 数据库名  [charset  字符集]  [collate  字符排序规则]: 说明: 1,if  n ...

  5. 跟随我在oracle学习php(15)

    开发环境 独立开发环境:组成 Windows/Linux php Apache MySQL 集成开发环境:phpstudy wamp xammp 关系数据库: SQL: Struct Query La ...

  6. 跟随我在oracle学习php(14)

    CSS3的@keyframes用法详解: 此属性与animation属性是密切相关的,关于animation属性可以参阅CSS3的animation属性用法详解一章节. 一.基本知识: keyfram ...

  7. 跟随我在oracle学习php(13)

    常用的css样式 [class~="col-6"]:选择我所有类名中包含有col-6独立单词的元素 [class*="col-"]:选择所有类名中含有" ...

  8. 跟随我在oracle学习php(12)

    DOM 文档对象模型 body:(什么时候)找到标签 操作标签找到标签:(都会返回一个js对象)document.getElementById() 通过iddocument.getElementsBy ...

  9. 跟随我在oracle学习php(11)

    数组专题 数组遍历: 1,普通for循环,经常用的数组遍历 var arr = [1,2,0,3,9]; for ( var i = 0; i <arr.length; i++){ consol ...

  10. 跟随我在oracle学习php(10)

    正则表达式 做验证 做匹配 用符号来描述书写规则:/ 中间写正则表达式 /^ :匹配开头,$:匹配结尾 : /^ve/以ve开头的 /ve$/以ve结尾\d:一个任意的数字\w:一个任意的数字或字母\ ...

随机推荐

  1. python 中为什么不需要重载 参数*arg和**args

    函数重载主要是为了解决两个问题. (1)可变参数类型. (2) 可变参数个数. 另外,一个基本的设计原则是,仅仅当两个函数除了参数类型和参数个数不同以外,其功能是完全相同的,此时才使用函数重载,如果两 ...

  2. C# Newtonsoft.Json JsonSerializerSettings 全局序列化设置

    Newtonsoft.Json.JsonSerializerSettings setting = new Newtonsoft.Json.JsonSerializerSettings(); JsonC ...

  3. sublime-text3打造markdown编辑器

    编辑插件 sublime自带的markdown语法高亮并不是很友好,推荐安装Markdown Editing,github主页然后在视图->语法里选择MarkdownEditing启用,支持三种 ...

  4. idea显示左边的树形项目结构

    直接上步骤: File-->Project Structure-->Modules-->点击:中间一列框的"+"-->Import Module--> ...

  5. PriorityBlockingQueue 原理分析

    PriorityBlockingQueue是一个支持优先级的无界阻塞队列,直到系统资源耗尽.默认情况下元素采用自然顺序升序排列.也可以自定义类实现compareTo()方法来指定元素排序规则,或者初始 ...

  6. 记账本微信小程序开发六

    记账本微信小程序开发六 我的界面 主界面

  7. Json的转换

    package com.utils; import java.io.IOException; import java.util.List; import org.codehaus.jackson.Js ...

  8. nginx 模块及运行机制 第三章

    概述:nginx服务器模块.web请求处理机制及事件驱动模型.进程功能和进程间通信 一:Nginx的模块化结构设计: 1.核心模块:指的是nginx服务器运行当中必不可少的模块,这些模块提供了最基本最 ...

  9. 年度游戏圈2018白皮书解析手游折扣app哪个好及靠谱程度分析

    2018年,随着全国暂停游戏版本的审核和发布<综合防控儿童青少年近视实施方案>(控制新的在线游戏数量),游戏行业受到的影响不小. 在游戏产业中,游戏行业2018年的收入同比增长5.2%,远 ...

  10. sql server 查询某个表被哪些存储过程调用

    sql server 查询某个表被哪些存储过程调用 select distinct object_name(id) from syscomments where id in (select id fr ...