常用的CSS样式

font-family 设置字体名称

可以使用多个名称,用逗号分隔,浏览器则按照先后顺序依次使用可用字体

p { font-family:'宋体','黑体','Arial'; }

font-size 设置字体大小

length 用长度值指定文字大小,不允许负值

percentage 用百分比指定文字大小,其百分比取值是基于父对象中字体的尺寸,不允许负值

p { font-size:14px;}

font-weight 控制字体粗细

normal 正常的字体,相当于数字值400

bold 粗体,相当于数字值700

100~900 定义由细到粗的字符

p { font-weight:bold;}

font-style 控制字体是否倾斜

normal 指定文本字体样式为正常的字体

italic 指定文本字体样式为斜体,对于没有设计斜体的特殊字体,如果要使用斜体外观将应用oblique

oblique 指定文本字体样式为倾斜的字体,人为的使文字倾斜,而不是去选取字体中的斜体字

p { font-style: normal; }       p { font-style: italic; }       p { font-style: oblique; }

font(字体样式缩写)

立即学习“前端免费学习笔记(深入)”;

例:       p{       font-style: italic;       font-weight: bold;       font-size: 14px;       line-height: 22px;       font-family:'宋体';       }             缩写后:       p { font: italic bold 14px/22px '宋体'; }

color 文本颜色

•英文单词,比如:red,yellow,green …

•十六进制表示方式,#开头,6个十六进制的字符或数字组合,比如:#FFFFFF,#000000 …

•RGB模式,红 0-255,绿 0-255,蓝 0-255,比如:RGB(120,33,234)

•RGBA模式,比如:RGBA(255,0,0,0.5),最后的A表示透明度50%

text-decoration 文本装饰线条

none 默认。定义标准的文本

underline 定义文本下的一条线

overline 定义文本上的一条线

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

blink 定义闪烁的文本

h1 {text-decoration:overline;}       h2 {text-decoration:line-through;}       h3 {text-decoration:underline;}

text-shadow 文本阴影

h-shadow 必需。水平阴影的位置。允许负值

v-shadow 必需。垂直阴影的位置。允许负值

blur 可选。模糊的距离

color 可选。阴影的颜色

h1{ text-shadow: 2px 2px 2px #ff0000;}

宽度 width : auto | length

高度 height : auto | length

p { width:300px;}       p { width:50%;}       img { height:200px;}       p { height:100px;}

外边距 margin : auto | length

margin-top 设置上边的外边距

margin-bottom 设置下边的外边距

margin-left 设置左边的外边距

margin-right 设置右边的外边距

缩写型式:

margin: 上边距  右边距  下边距  左边距

margin: 上下边距  左右边距

margin: 上边距  左右边距  下边距

p { width:300px; height:100px; margin:10px;}       p { width:300px; height:100px; margin:0 auto;}

内边距 padding : length

padding-top 设置上边的内边距

padding-bottom 设置下边的内边距

padding-left 设置左边的内边距

padding-right 设置右边的内边距

p { width:300px; height:100px; padding:10px;}

透明度 opacity :

number值为 0.0-1.0 之间的小数

兼容全浏览器的写法:

p{ filter:alpha(opacity=50); }  /* IE6-IE8 */       p{ opacity:0.5; }  /* 现代浏览器 */

<!–

常用的CSS样式

–>

以上就是常用的CSS样式的详细内容,更多请关注创想鸟其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 chuangxiangniao@163.com 举报,一经查实,本站将立刻删除。
发布者:程序猿,转转请注明出处:https://www.chuangxiangniao.com/p/1608512.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2025年12月23日 21:54:54
下一篇 2025年12月23日 21:55:10

相关推荐

  • 对CSS继承的深度解析

      我酷爱模块化设计。长期以来我都热衷于将网站分离成组件,而不是页面,并且动态地将那些组件合并到界面上。这种做法灵活,高效并且易维护。   但是我不想我的设计看上去是由一些不相关的东西组成的。我是在创造一个界面,而不是一张超现实主义的照片。   很幸运的是,已经有一项叫做 CSS 的技术,就是特意设…

    2025年12月23日
    000
  • CSS外边距(margin)重叠及防止方法

      边界重叠是指两个或多个盒子(可能相邻也可能嵌套)的相邻边界(其间没有任何非空内容、补白、边框)重合在一起而形成一个单一边界。   两个或多个块级盒子的垂直相邻边界会重合。结果的边界宽度是相邻边界宽度中最大的值。如果出现负边界,则在最大的正边界中减去绝对值最大的负边界。如果没有正边界,则从零中减去…

    2025年12月23日
    000
  • 用css解决标题显示字数超出省略号代替的方法

    标题字数超出场景: 最左边这栏我不行让他换行,怎么办呢? 步骤一:内容超出宽度时隐藏超出部分的内容 步骤二:当对象内文本溢出时显示省略标记(…) 立即学习“前端免费学习笔记(深入)”; 下面是解决办法: table{width:100px;table-layout:fixed;/* 只有…

    2025年12月23日
    000
  • CSS选择器的简单介绍

    前言:这是笔者学习之后自己的理解与整理。如果有错误或者疑问的地方,请大家指正,我会持续更新!   选择器权重   如果以4位数表示选择符权重,那么: 元素选择器的权重是1; id 选择器的权重为100; 立即学习“前端免费学习笔记(深入)”; class类选择器的权重为10; 内联style(JS操…

    好文分享 2025年12月23日
    000
  • 浅析CSS中的浮动与清理

    作为前端写了很多页面布局,但是浮动这块一直是我似懂非懂的盲点,一方面用浮动能实现很多布局,另一方面浮动造成的影响又会破坏布局让人头疼,所以今天就特地写篇博文解决这块盲点。 本文主要讨论以下几个问题:1.浮动的原始用途2.浮动为什么会有文本环绕效果3.如何清理浮动造成的影响 浮动的原始用途 以下内容来…

    好文分享 2025年12月23日
    000
  • CSS实现Tab布局的示例代码分享(图)

    下面小编就为大家带来一篇CSS实现Tab布局的简单实例(必看)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧 一、布局方式 1、内容与tab分离 内容1 内容2 内容3 内容4 内容1 内容2 内容3 内容4 ul,li{ margin:0; padding:0; l…

    2025年12月23日
    000
  • 表格细边框的两种CSS实现方法

    在网页制作中,细边框这个制作方法是必不可少的。这里admin10000.com介绍2种常见的表格细边框制作方法,均通过XHTML验证。 表格细边框的两种CSS实现方法 /* 利用表格样式 border-collapse: collapse 实现细边框 */ .tab1 { width: 300px;…

    好文分享 2025年12月23日
    000
  • CSS命名及其书写的规范化

    CSS命名规范 一.文件命名规范 全局样式:global.css;框架布局:layout.css;字体样式:font.css;链接样式:link.css;打印样式:print.css; 二.常用类/ID命名规范 页 眉:header内 容:content容 器:container页 脚:footer…

    好文分享 2025年12月23日
    000
  • 用CSS hack技术解决浏览器兼容性问题

    什么是CSS Hack?   不同的浏览器对CSS的解析结果是不同的,因此会导致相同的CSS输出的页面效果不同,这就需要CSS Hack来解决浏览器局部的兼容性问题。而这个针对不同的浏览器写不同的CSS 代码的过程,就叫CSS Hack。 CSS Hack 形式   CSS Hack大致有3种表现形…

    好文分享 2025年12月23日
    000
  • 万能清除浮动样式

    这个是一个很流行的清除浮动的方法,在很多大项目上已经被完全采用。 这个方法来源于positioniseverything,通过after伪类:after和IEhack来实现,完全兼容当前主流浏览器。 .clearfix:after { content: “.”; clear: both; heigh…

    好文分享 2025年12月23日
    000
  • CSS初始化代码

    为什么要初始化CSS? CSS初始化是指重设浏览器的样式。不同的浏览器默认的样式可能不尽相同,所以开发时的第一件事可能就是如何把它们统一。如果没对CSS初始化往往会出现浏览器之间的页面差异。每次新开发网站或新网页时候通过初始化CSS样式的属性,为我们将用到的CSS或html标签更加方便准确,使得我们…

    好文分享 2025年12月23日
    000
  • 关于IE6下的CSS多类选择符

      多类选择符的写法。例如:   #my.c1.c2 { color:red;}  .c1.c2 { color:red;}   以上写法在IE7+/FF/Opera/Safari 等浏览器都支持。   但在IE6中,后一个类名会覆盖前一个类名,也就是说,上例被IE6理解为:   #my.c2 { …

    好文分享 2025年12月23日
    000
  • CSS实现背景透明,文字不透明(兼容各浏览器)

    在 FF/Chrome 等较新的浏览器中可以使用css属性background-color的rgba轻松实现背景透明,而文字保持不透明。而IE6/7/8浏览器不支持rgba,只有使用IE的专属滤镜filter:Alpha来实现,但是这样写法会把文字也变为透明,因此只有在透明容器的子节点(文本节点除外…

    2025年12月23日
    000
  • 教你如何用CSS创建打印页面

    用CSS创建打印页面,不必为打印而专门建立一个HTML文件,可以节省一些体力,其前提是按“WEB标准”用CSS+p布局HTML页面。 第一、在HTML页面加入为打印机设置的CSS文件 media=”screen” ,是面向屏幕的; media=”print&#82…

    好文分享 2025年12月23日
    000
  • CSS清除浮动方法总汇

    使用xhtml+css布局经常性地会使用到float,很多邪门的事儿都有可能是浮动在作怪,那么清除浮动就是必须要做的,而且随时性地对父级元素清除浮动的做法也被认为是书写CSS的良好习惯之一。 此为未清除浮动源代码,运行代码无法查看到父级元素浅黄色背景。 body { font-size:24px; …

    2025年12月23日
    000
  • 去掉超链接或按钮点击时出现的虚线边框

      在前端制作的过程中会发现,一些文字/图片链接,或者一些input控件,在点击时会在周围出现虚线边框,一般会在火狐和IE浏览器下出现虚线框,谷歌下不会有。   这些虚线边框是作为对视觉设计的一种辅助,在不使用鼠标,而用键盘Tab键进行页面浏览时,会标示出当前所在的链接或控件的位置,便于浏览。这对那…

    好文分享 2025年12月23日
    000
  • CSS命名规范及网站常用中英文对照表

    本文整理了常见的CSS文件命名规范、CSS样式ID命名规范及其网站中常用的中英文对照。 一、样式文件命名规范 主要的 master.css布局,版面 layout.css专栏 columns.css文字 font.css打印样式 print.css主题 themes.css 二、CSS注释 /*CS…

    好文分享 2025年12月23日
    000
  • CSS浮动与浮动清除(BFC)简单教程

    浮动 1. 什么是浮动 当元素的 float 属性不为 none 时就产生了浮动。 float .float { float: left; width: 100px; height: 100px; background-color: #ddd;} 2. 浮动的影响 浮动会使元素脱离文档流,具体表现为…

    2025年12月23日
    000
  • css各种实用技巧

    其它技巧和经验列表(*以下实例默认运行环境都为Standard mode): 如何让层在falsh上显示? 方法: 设置flash的wmode值为transparent或opaque 如何使用标准的方法在页面上插入flash? 方法: ![](*.jpg)至于flash的宽高可以在css里设置 如何…

    好文分享 2025年12月23日
    000
  • css之px自动转rem

    作为一名前端开发,尤其是在做移动端适配时,rem是我们经常用到的单位,它的好处大家可以自行搜索,网上已经有很多了。但是我们再将设计稿上的px转换成rem时,得手动的去计算,这是一个很耗时、费力的过程,有没有什么办法可以“解放”我们呢?(原谅我的懒~) 1.CSS处理器 Sass、LESS以及Post…

    2025年12月23日
    000

发表回复

登录后才能评论
关注微信