• css 高度(height)

• css 宽度(width)   ·

• css 边框(border)   ·

• css 背景(background)   ·

• css 浮动(float)   ·

• css 字体(font)   ·

• css 加粗   ·

• css 下划线   ·

• css 注解   ·

• css padding   ·

• css margin   ·

• css 文本   ·

• css 颜色

• css 超链接   ·

• css 优化   ·

• css id   ·

• css class   ·

• css 列表   ·

• css 圆边   ·

• css 父级子级  ·

• css 指针   ·

• css 单位   ·

• css 定位

• css 图片   ·  

用CSS控制超链接文字样式

本文将讲解通过css样式或通过css来控制超链接样式。这里主要讲文字类型的超链接，超链接的样式包括通过CSS来控制设置超链接有无下划线、超链接文字颜色等样式。

什么是超链接？超链接通俗地指从一个网页指向一个目标的连接关系,这个目标可以是另一个网页,也可以是相同网页上的不同位置，还可以是一个图片，一个电子邮件地址，一个文件，甚至是一个应用程序。而在一个网页中用来超链接的对象，可以是一段文本或者是一个图片。当浏览者单击已经链接的文字或图片后,链接目标将显示在浏览器上，并且根据目标的类型来打开或运行。

超链接的代码 <a href="http://www.okcom.cn/" target="_blank" title="关于div css的网站">DIV+CSS</a>

解析如下： href 后跟被链接地址目标网站地址这里是http://www.okcom.cn/

target  _blank -- 在新窗口中打开链接

_parent -- 在父窗体中打开链接

_self -- 在当前窗体打开链接,此为默认值

_top -- 在当前窗体打开链接，并替换当前的整个窗体(框架页)

title 后跟链接目标说明，也就是超链接被链接网址情况简要说明，或标题  CSS可控制超链接样式-css链接样式如下

a:active是超级链接的初始状态

a:hover是把鼠标放上去时的状况

a:link 是鼠标点击时

a:visited是访问过后的情况

超链接样式案例 1、通常对全站超链接样式化方法 a{color:#333;text-decoration:none; } //对全站有链接的文字颜色样式为color:#333;并立即无下划线text-decoration:none; a:hover {color:#CC3300;text-decoration:underline;}//对鼠标放到超链接上文字颜色样式变为color:#CC3300;并文字链接加下划线text-decoration:underline;  2、通过链接内设置类控制超链接样式css方法 案例超链接代码<a href="http://www.okcom.cn/" class="yangshi">CSS</a> 对应CSS代码 a.yangshi{color:#333;text-decoration:none; } a.yangshi:hover {color:#CC3300;text-decoration:underline;} 通过这样的设置可以控制链接内的css类名为“yangshi”超链接的样式  3、通过对应超链接外的父级的css类的css样式来控制超链接的样式 案例超链接代码<div class="yangshi"><a href="http://www.okcom.cn/">CSS</a></a> 对应CSS代码 .yangshi a{color:#333;text-decoration:none; } .yangshi a:hover {color:#CC3300;text-decoration:underline;}  这里值得注意的是a.yangshi与.yangshi a的样式css代码区别,这里就是常见的通过div css来对超链接样式设置案例及分析。  css li讲解 Css li是使用css来控制li的样式-css列表，如li列表的以点为开头，或图片开头的列表形式。  Li的基础知识 Li是html的基本元素标签。 <li> 标签是用于定义列表项目。 <li> 标签可用在有序列表 (<ol>) 和无序列表 (<ul>) 中。 在W3C标准下li不能单独使用，需要与<ol>或<ul>配合使用，使用范例： <ol> <li>div+css范例</li> <li>div+css范例之li</li> </ol>  <ul> <li>div+css范例</li> <li>div+css范例之li</li> </ul> Css li实例,li，ol li，ul li的用法  经过实例演示知道了li的默认有序和无序的css样式，有序ol的样式是以阿拉伯数字1、2、3为递增列表，而无序的ul的CSS样式是以一个圆黑点的列表形式。  <li>兼容：所有的浏览器都支持兼容  Css li的样式引导 无论是有序还是无序的li列表，在div+css开发的时候都需要对li进行设置css样式。 一般对其设置代码如：设置li的list-style样式。

DIV+CSS中让布局居中     在DIV CSS布局的页面里，从布局内容到页面里文章文字居中都是非常重要的，而css来设置居中也是非常简单的。  1、首先介绍使用css属性让整体布局的居中： 设置对象的父级内容居中，这里一个页面的为父级是什么呢？我们可以想象整个页面的内容是由<html></html>和<body></body>这两个包含，那根据较近父级我们就设置body的CSS来实现居中问题，可以向在内容里居中有text-aligh:center;具体css的居中代码为： body{text-aligh:center; }  但是即使这样也会出现问题，因为你没有设置布局有多宽“width  ”，一旦你内容布局中在最外层css控制中，设置了float:属性，那布局将会向你设置的float:方向靠，解决方法，除了设置body的居中的css属性外，还需对布局对象设置居中 ，而且或定义宽度是多少，假如网页宽度为700px，最外层css样式为的class="weicheng"，那设置应该这样“.weicheng{margin:0 auto; width:700px;}  ”即可而这个元素在IE下有用，经过试验在火狐等浏览器下只除了此父级（body）设置text-aligh:center;居中 是无法让布局居中，那我们还需要对该对象设置个“margin:0  auto ; ”这个是什么意思呢，意思是内容上下为0距离，而左右为“auto  ”自动，这样就可以设置实现网页布局居中。完整实例为（可将代码拷贝新建html文件浏览观看效果）：  以下为引用的内容： <!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-Type" content="text/html; charset=gb2312" />  <title>www.okcom.cn的CSS div的布局居中实例</title>

<style type="text/css">  <!--  body{ text-align:center; }   .waicheng {color: #0066CC; margin:5px auto; width:700px; height:200px; border:1px solid #000000;}  -->  </style>  </head>  <body>  <div class="waicheng">我是css中的居中的实验;我的布局外层有一个边为1px黑色边，我宽700px，高为200px,设置了与顶部内容距离为5PX</div>  </body>  </html>  2、介绍使用css属性让网页的背景居中： 这里居中就包括了左右居中与上下居中，居中代码如下： body{BACKGROUND:  #FFF url(http://www.okcom.cn/img/css-logo.gif） no-repeat center;}  //这段话意思就是让css-logo.gif这个图片设置背景不重复（no-repeat ），并将居中（center）这个居中是左右居中，而垂直不需要设置，自动会居中。   3、css让介绍文字、图片内容左右上下居中方法教程： 我们知道左右就中好办，直接用text-align:center; 即可让文字与图片内容居中，但是垂直呢，假如我们在高度为120px的高度下垂直居中，图片居中是vertical-align:middle;css属性，文字居中就要靠设置行高方法居中文字内容，这里我们设置为120px的高度这需要设置个line-height:120px;这样就通过css属性类样式来实现文字与图片的上下左右居中。 整个网站居中的代码如下：

以下为引用的内容：

<!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-Type" content="text/html; charset=gb2312" />

<title>www.okcom.cn的CSS div的完整居中实例</title>

<style type="text/css">

<!--

body{ text-align:center; margin:0 auto; background: url(http://www.okcom.cn/img/css-logo.gif) no-repeat center;}

.waicheng {color: #0066CC; margin:5px auto; width:700px; height:120px; line-height:120px; border:1px solid #000000; }

.waicheng img {vertical-align:middle;}

-->

</style>

</head>

<body>

<div class="waicheng">

我是css中的居中的完整居中实例;我的布局外层有一个边为1px

<img src="http://www.okcom.cn/img/css-logo.gif" alt="图片内容居中" />

</div>

<dd>科技控www.8080it.com</dd>

</body>

</html>

css padding用法详解、 padding_css padding用法详解

padding 属性是css用于在一个声明中设置所有 padding 属性的简写属性。

Padding属性包含了padding left ：左补距离（设置距左内边距） ；padding top：头顶补距离（设置距顶部内边距）；padding right ：右补距离（设置距右内边距） ；padding  bottom ：底补距离（设置距低内边距）。 padding left用法：padding-left:10px;  这个意思距离左边补距10像素，可跟百分比如（padding-left:10%;   距离左边补10%的距离）； padding right用法：padding-right:10px; 这个意思距离右边补距10像素，可跟百分比如（padding-right:10%; 距离右边补10%的距离）； padding top用法：padding-top:10px; 这个意思距离顶边补距10像素，可跟百分比如（padding-top:10%; 距离顶边补10%的距离）； padding bottom用法：padding-bottom:10px; 这个意思距离低边补距10像素，可跟百分比如（padding-bottom:10%; 距离底边补10%的距离）；

注意padding中间的链接“ - ”号，设置距离值时用“ ： ”并赋予值，并以“ ； ”结束，并且全部用小写半角字母。

如果是左右上下都需要设置padding的值时可以简写来实现，以优化css 。

如简写方式有： padding:10px; 意思就是上下左右补丁距离就是10px（10像素）等于padding-top:10px; padding-bottom:10px; padding-left:10px; padding-right:10px; 一样效果简写； padding:5px 10px; 意思上下补丁距离为5px，左右的补丁距离为10px，等于padding-top:5px; padding-bottom:5px; padding-left:10px; padding-right:10px; 一样效果简写；padding:5px 6px 7px; 意思上补丁距离5px，下补丁距离为7PX，左右补丁距离为6px，等于padding-top:5px; padding-bottom:7px; padding-left:6px; padding-right:6px; 一样效果简写；padding:5px 6px 7px 8px;  意思上补丁为5px，右补丁距离为6px ，下补丁距离为7px，左补丁距离8px，等于等于padding-top:5px; padding-right:6px; padding-bottom:7px; padding-right:8px; 一样效果简写； 其中padding:5px 6px 7px 8px; 的转法为顺时针即图：上 右 下 左  

css margin属性与用法教程、margin _ css margin属性与用法教程

margin 属性是css用于在一个声明中设置所有 margin 属性的简写属性，margin是css控制块级元素之间的距离, 它们之间是透明不可见的。margin属性包含了margin left ：距左元素块距离（设置距左内边距） ；margin top：距头顶(上)元素块距离（设置距顶部元素块距离）；margin right ：距右元素块距离（设  置距右元素块距） ；margin bottom ：底元素块距离（设置距低（下）元素块距）。margin left用法：margin-left:10px;  这个意思距离左元素块距10像素，可跟百分比如（margin-left:10%;   距离左元素块10%的距离）；margin right用法：margin-right:10px; 这个意思距离右边元素块距10像素，可跟百分比如（margin-right:10%; 距离右边元素块10%的距离）；margin top用法：margin-top:10px; 这个意思距离顶边元素块距10像素，可跟百分比如（margin-top:10%; 距离顶边元素块10%的距离）；margin bottom用法：margin-bottom:10px; 这个意思距离低边元素块距10像素，可跟百分比如（margin-bottom:10%; 距离底边元素块10%的距离）；

注意margin中间的链接“ - ”号，设置距离值时用“ ： ”并赋予值，并以“ ； ”结束，并且全部用小写半角字母。如果是左右上下都需要设置margin的值时可以简写来实现，以优化css 。 如简写方式有： margin:10px; 意思就是上下左右元素块距离就是10px（10像素）等于margin-top:10px; margin-bottom:10px; margin-left:10px; margin-right:10px; 一样效果简写；margin:5px 10px; 意思上下元素块距离为5px，左右的元素块距离为10px，等于margin-top:5px; margin-bottom:5px; margin-left:10px; margin-right:10px; 一样效果简写；margin:5px 6px 7px; 意思上元素块距离5px，下元素块距离为7PX，左右元素块距离为6px，等于margin-top:5px; margin-bottom:7px; margin-left:6px; margin-right:6px; 一样效果简写；margin:5px 6px 7px 8px;  意思上元素块为5px，右元素块距离为6px ，下元素块距离为7px，左元素块距离8px，等于等于margin-top:5px; margin-right:6px; margin-bottom:7px;margin-right:8px; 一样效果简写；其中margin:5px 6px 7px 8px; 的转法为顺时针即图：上 右 下 左

div+css CSS基本的更多相关文章

  1. 用div和css样式控制页面布局

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...

  2. DIV实现CSS 的placeholder效果

    placeholder是HTML5中input的属性,但该属性并不支持除input以外的元素   但我们可以使用Css before选择器来实现完全相同的效果 <!DOCTYPE html> ...

  3. div垂直居中 css div盒子上下垂直居中

    div垂直居中 css div盒子上下垂直居中,让DIV盒子在任何浏览器中任何分辨率的显示屏浏览器中处于水平居中和上下垂直居中. div垂直居中常用于单个盒子,如一个页面里只有一个登录布局,使用div ...

  4. 基于单个 div 的 CSS 画图

    原文: Single Div Drawings with CSS 译文: 基于单个 div 的 CSS 画图 译者: 前端外刊评论 译注:通读本文,强烈地感受到了技术与艺术的结合.赞作者的这句话:Re ...

  5. 利用扩展双屏技术及Chrome浏览器,高速剖析优秀网页Div及CSS构成,并高效实现原型创作

    作为一个Web前台设计人员,应该充分利用可利用的硬件条件及专业的软件工具,迅速进入到高效氛围其中.实践中,我们能够利用扩展桌面双屏技术及Chrome浏览器高速剖析优秀网页Div及CSS构成,并高速实现 ...

  6. 典型的DIV＋CSS布局——左中右版式

    [效果] [HTML] <%@ Page Language="C#" AutoEventWireup="true"  CodeFile="Def ...

  7. HTML&CSS——使用DIV和CSS完成网站首页重构

    1.DIV 相关的技术 Div 它是一个 html 标签,一个块级元素(单独显示一行).它单独使用没有任何意义,必须结合CSS来使用.它主要用于页面的布局. Span 它是一个 html 标签,一个内 ...

  8. Bulma CSS - CSS类

    Bulma CSS框架教程 Bulma CSS – 简介 Bulma CSS – 开始 Bulma CSS – CSS类 Bulma CSS – 模块化 Bulma CSS – 响应式 Bulma是一 ...

  9. 用div加css做表格去掉外围边框

    通过div做表格时想加上边框,并且想取点外围边框: <div class="cont"> <div class="row"> <a ...

  10. 通过原生js添加div和css

    function createStyle(){ return"*{padding:0;margin:0;border:0}.loading{width:640px;height:1024px ...

随机推荐

  1. react 02 组件state click

    一,组件 import React from 'react'; import ReactDOM from 'react-dom'; import './index.css'; // 函数式组件 ret ...

  2. 2021.09 ccf csp 第四题 收集卡牌

    2021.09 ccf csp 第四题 收集卡牌 思路 这题如果直接计算,因为不同的分类种数太多,枚举所有的分类情况是一个几乎不可能的复杂任务. 但不同摸牌次数,不同已摸出牌种类的子问题的答案之间,具 ...

  3. uniapp 开发遇到的问题

    1. App平台IOS端软键盘上方横条去除方案(禁用键盘上的^) 在 pages.json 中配置 style配置 "app-plus": { "softinputNav ...

  4. WDA学习（28）：Drag &Drop使用

    1.21 Drag Drop使用 本实例测试Drag Drop; 运行结果: Drag图标Drop到添加Icon,会将一条记录添加到Table; Drag Table记录Drop到垃圾桶Icon,会将 ...

  5. spring boot创建多线程定时任务

    @Component@EnableScheduling // 1.开启定时任务@EnableAsync // 2.开启多线程public class MultithreadScheduleTask { ...

  6. @Target:注解的作用目标

    @Target:注解的作用目标 @Target(ElementType.TYPE)--接口.类.枚举.注解 @Target(ElementType.FIELD)--字段.枚举的常量 @Target(E ...

  7. ggplot2绘制饼图

    # 加载 ggplot2 包 library(ggplot2) # 加载数据 data <- data.frame(category = c("A", "B&quo ...

  8. Leaflet加载GeoServer发布的WMTS地图服务

    leaflet本身并不支持WMTS服务,需要借助leaflet-tilelayer-wmts插件实现,但是插件是为通用WMTS服务实现的.在使用的过程中出现了无法调用的问题,这里进行了稍微修改. 加载 ...

  9. wireguard 在openwrt中的配置

    按照网上教程正常配置,防火墙通信规则中,选择打开监听端口,目标设备:设备(输入),目标端口:监听端口. 客户端设置:注意路由器的IP地址(段)要填0.0.0.0/0.

  10. Windows Terminal 中 WSL2 默认打开路径

    打开Windows Terminal.鼠标点击进入设置,或者同时按ctrl和逗号.找到如下内容: { "guid": "{07b52e3e-de2c-5db4-bd2d- ...