css 02

Css 02

Url  ./  http://www.

Src  引入 拿取过来内容

Href 引用 连接前往 a  link

现在所有的命名 请按照下面我说的去命名

可以使用字母 数字 下划线组成  但是不能以数字开头

一、CSS常用属性

  1. 颜色属性

Color

  1. 背景属性

text-indent:21.0pt">Background-image: 背景图片

Background-repeat: 背景重复

Repeat-x(x轴方向重复) | repeat-y(y轴方向重复) |no-repeat(不重复)

Background-attachment: 背景附件 scroll(默认值)  fixed(固定)

Background-position:背景位置

Left|center|right( 横向)

Top|center|bottom(纵向)

像素

注意:background-position 两个值之间需要使用空格隔开

Background:<背景颜色>|<背景图片>|<背景重复>|<背景附件>|<背景位置>

每个属性中间都要用空格隔开

  1. 边框属性

border-style 边框样式

Border-top-style

Border-left-style

Border-bottom-style

Border-right-style

值:

dotted 点线

Dashed 虚线

Solid   实线

Double 双实线

Groove 槽状线

Ridge   脊线

Inset  内嵌效果

Outset 外凸效果

Border-width 边框宽度

单位使用像素

同上

Border-color  边框颜色

同上

Border:边框宽度 边框样式 边框颜色;

  1. 文本属性

Letter-spacing  字母间隔  值为长度  值可以是负值 可以支持中文

Word -spacing  词间距   值为长度  值可以是负值 抓取词边界  可以支持中文但是 请加上词边界

Text-decoration 文本修饰

None(默认值) 通常我们使用这个属性将a标签的默认下划线取消

Underline 定义文本下的一条线

Overline 定义文本上的一条线

Line-through  定义穿过文本中的一条线

Text-align 对齐方式

Left|center|right|justify(两端对齐)

Justify 将我们的文字贴近我们的边框 将我们的空白留给中间

Text-indent  文本缩进  2em

line-height 设置行间距离(行高)   不允许出现负值

作用:用来将文本居中显示 一般都是和设置的高度相同 让文字垂直居中显示

5. 鼠标光标属性

Cursor

Text      文本

Crosshair 十字架

Wait     等待

Help     帮助

Pointer   小手

6.列表属性

List-style-type  列表样式类型

值:

Disc                     实心点

Circle                        圆圈

Square                小方块

Decimal             数字

Lower-roman  小写罗马字

Upper-roman  大写罗马字

Lower-alpha   小写字母

Upper-alpha   大写字母

None                         没有标识

List-style-image  列表样式图片

url()

List-style-position 列表样式位置

Inside 表示在li里面

Outside 表示在li外面(默认值)

作用:就是让你来判断是否控制图片被样式表是否修改

三、无意义标签

Div

块级标签,会自动换行(独占一行)

Span

行内标签 内容显示在一行内

块级元素的特点:

1.总是独自占一行显示

2.高度、行高和内边距外边距 都可以控制

3.宽度和浏览器宽度一样 与内容无关

4.可以容纳行内元素和其他块元素

行内元素特点:

1.和其他标签在同一行内显示

2.高度 行高 内边距 外边距 部分可控

3.与内容有关 内容改变宽度改变

4.容纳文本和其他行内元素

时间: 2024-08-25 22:14:21

css 02的相关文章

web前端——CSS 02 选择器

css的选择器:1.基本选择器 2.高级选择器 基本选择器包含: 1.标签选择器标签选择器可以选中所有的标签元素,比如div,ul,li ,p等等,不管标签藏的多深,都能选中,选中的是所有的,而不是某一个,所以说 "共性" 而不是 ”特性“ body{ color:gray; font-size: 12px; } /*标签选择器*/ p{ color: red; font-size: 20px; } span{ color: yellow; } 2.id选择器# 选中id 同一个页面中

HTML5-移动开发常用技巧与弹性布局的使用

一.移动开发常用技巧 Viewport基本知识 设置布局Viewport的各种信息 1.width=device-width: 设置Viewport视口宽度等于设备宽度 2.initial-scale=1: 网页默认缩放比为1(网页在手持设备上,不会进行默认缩放 3.minimum-scale=1 网页最小缩放比为1 4.maximum-scale=1 网页最小大缩放比为1 5.user-scalable=no 禁止用户手动缩放网页(ios10+ 的设备失效) 在手机站及响应式网站的制作中,网页

非等宽图片列表的布局

各大搜索引擎的图片频道的搜索结果页,搜索出来的结果都是较零碎的图片,图片质量.尺寸都是参差不齐的,并限定了每一行的总宽度.这种非等宽的图片列表,在Google+.flickr也都有用到. 最近刚好对360搜索的图片搜索结果页进行了一次重构和改版,对于这种图片布局也花心思研究了一番,接下来说说我的一些处理思路. 非等宽的单个图片要排列到一个固定了宽度的容器中,那么这个等宽的容器就是最大的限制和障碍,开始怀念那种常见等宽瀑布流的布局(没有限制真好). 先理下基本的需求: 1.图片的宽度是不固定的:

JavaScript初探三

<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> </head> <body> <ul id

Jquery 系列(2) 选择元素

Jquery基础学习 jQuery利用css选择符的能力,能够在DOM中快捷而轻松地获取元素. 主要内容如下: 介绍DOM树 如何通过CSS选择符在页中查找元素 扩展jQuery标准的CSS选择符 选择页面元素更灵活的DOM遍历方法 理解DOM树 DOM(Document Object Model)文档对象模型,可以充当JavaScript和网页之间的接口.jQuery最强大的功能就是能轻松的处理和简化在DOM中选择元素.DOM中各元素的关系,同数据结构中的二叉树的称呼非常相近.元素之间的关系包

jQuery背景跟随鼠标移动的网页导航

首页 PSD模板 CSS模板 特效插件 源码下载 酷站欣赏 建站资源 建站教程 心境之旅 在线留言 设为首页 加入收藏 我要投稿 联系站长 Search 首页 PSD模板 CSS模板 特效插件 源码下载 酷站欣赏 建站资源 建站教程 心境之旅 在线留言 滚动图片 广告特效 选项卡特效 鼠标特效 表单按钮 表格图层 窗口特效 文字特效 色彩特效 图像特效 日期特效 导航菜单 在线客服 当前位置:模板网首页 > 特效插件 > 导航菜单 >  jQuery背景跟随鼠标移正文 jQuery背景跟

我们这里有仿百度联盟对联广告实现代码

仿百度联盟对联广告源代码展示,主要使用现代浏览器都支持的position:fixed属性,并专门针对ie6做了最大限度的兼容性处理 <style type="text/css"> 02 *{margin:0;padding:0;} 03 body{height:2000px;} 04 .floatAd{width:124px;height:299px; text-align:center; position:fixed;margin-left:0;top:109px; _p

js系列(9)js的运用(一)

    本节开始介绍javascript在html页面中的运用.     (1)link样式表的动态绑定:(http://files.cnblogs.com/files/MenAngel/text04.zip) <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content=&

jQuery ui背景色动态渐变导航菜单

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Typ