CSS 样式二

CSS文本样式

  • text-align:设置文本的对齐方式

取值:

left 向左对齐

right:向右对齐

center:居中对齐

  • text-indent:设置文本的首行缩进

????例如,字体设为12px,首行缩进另个字,24px。

  • text-decoration:设置文本的装饰线

????????取值:

????????none 不设置文本装饰线

????????underline:设置下划线

????????overline:上划线

????????line-through:中划线

  • text-transform:(主要应用于英文文本)

????取值:

capitalize:将首字母转换大写

uppercase:将所有的字母转换大写

lowercase:将所有的字母转化小写

  • letter-spacing:如果是汉字,设置字与字之间的间距

????????????????如果是英文文本,设置,字母与字母的间距

  • word-spacing:设置词间距(主要应用英文)
  • line-height:设置文本的行高

结构代码:

示例2:

样式代码:

结构代码:

CSS列表样式

list-style:设置列表的符号类型

取值:

不设置符号

none

无序列表的项目符号:

square:实心方块

circle:空心原点

disc 实心原点

有序列表的项目符号

decimal????????????????阿拉伯数字

lower-alpha????????????小写字母

upper-alpha????????????大写字母

lower-roman????????小写罗马数字

upper-roman????????大写罗马数字

?

list-style-position:项目符号的位置

????????inside(在li标签的内部)

????????outside(在li标签的外部)

?

list-style-image:将项目符号用背景图片表示

????????书写规则:list-style-image:url(背景图片的路径URL)

简写形式:list-style:square inside url(arrow.gif);

?

示例1:

样式代码:

结构代码:

CSS背景样式

background-color:设置背景颜色:red #ff0000,rgb(100,120,200)

background-image:url(背景图片的路径url)

background-repeat:

no-repeat:不平铺

repeat:x轴和y轴平铺

repeat-x:在x轴上平铺

repeat-y:在y轴上平铺

background-position:设置图片的位置;

????数值表示法,x px,ypx 只写其中一种,表示另外一个方向上未设置的值,跟这已经设置的这个相同。

单词表示法:

????x方向:left center right,

????y轴方向:top(顶部对齐) center(居中) bottom(底部)

????百分比表示法:50%,50%

background-position:left center;

设置图片x轴向左对齐

设置图片y轴向居中对齐

代码:

?

时间: 2024-10-21 16:04:51

CSS 样式二的相关文章

博客园博客css样式二

样式二    1.页面定制css代码 博客背景可以在body{}中修改background:#205424 url('http://mat1.gtimg.com/www/mb/theme/qqfs/one_lhj/wrapBg.jpg') no-repeat top center fixed;   1 /*公用*/ 2 body { 3 font-size:15px; 4 padding:0; 5 margin:0; 6 font-family:"微软雅黑","宋体"

如何在普清的屏上调试CSS样式二倍图背景

吐槽: 随着现在越来越多人装B,特别是一些产品经理. 现在也在换新的笔记本电脑,苹果的笔记本又是装B利器(特别是retina的pro). 最近就遇到一个同事的项目,还是像平常一样小心切图,认真对像素. 一切测试都没有问题,顺利上线. 但是,上线之后,产品经理跑过来说,有BUG. BUG描述:(不认为是BUG) 前端页面上的图标是虚的. 环境:mackbook pro retina屏 现象: 给了一个截图 图标是虚的 BUG修复要求: 对图标进行修正,使在retina屏上图标依旧是清晰的. 分析:

css扁平化博客学习总结(二)css样式重置

css样式重置 方法一:不推荐使用,这么写会让网页解析速度变慢. *{ margin: 0; padding: 0;} 方法二:大家常用的写法,比较流行. body, html, div, blockquote, img, label, p, h1, h2, h3, h4, h5, h6, pre, ul, ol,li, dl, dt, dd, form, a, fieldset, input, th, td{margin: 0; padding: 0; border: 0; outline:

轻松学习JavaScript二十四:DOM编程学习之操作CSS样式(一)

CSS样式作为HTML的辅助,可以增强页面的显示效果.前面学了DOM操作HTML,因此也要学DOM操作CSS 样式的方法.在学习CSS的时候,已经知道了CSS插入到HTML文档有三种情况,分别为:行内式,内嵌式和外联式 (这是我们最常用的).下面就来看怎么操作这三种情况: 一操作行内式 先来写一个HTML文档: <span style="font-size:18px;"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0

html基础二:css样式1

h't'm'l中用到css样式有三种方式: 1.在header中增加style标签,在style标签中写 2.用link标签引用css样式文件 3.在需要使用css样式的标签添加style属性 一.在header中的style定义 header中定义标签样式,是通过选择器来和对应的标签关联的 1.id选择器 一个html页面中,id是不能重复的. 效果如下: 2.class选择器 class选择器以.定位,一个html文件中可以有相同的class.定义了css样式以后,该class对应的所有标签

CSS基础学习十二:CSS样式

CSS样式包括:CSS背景,CSS文本,CSS字体,CSS列表,CSS表格,CSS轮廓等样式.我们就目前用到的 CSS样式简单地介绍一下. 下面只是总结性的一些东西,具体的可以参考:CSS样式教程 (1)背景色 background-color 设置背景颜色 可能的值: 颜色名称:如red,yellow,blue 十六进制颜色值:如#ffffff rgb颜色值:如rgb(255,255,255(十六进制为ff)) transparent:默认的,背景颜色透明 inherit:继承父元素的背景色

前端笔记七,级联样式单与CSS选择器(二)

只插入部分元素: 在:after,:before前使用更严格的CSS选择器 配合quotes属性执行插入 首先定义quotes,然后再指定content使用open-quote或者close-quote 配合counter-increment属性添加编号 该属性指定的字符就是计算器名称,然后通过counter属性引用计数器即可 使用自定义编号:通过counter(name,list-style-type)实现 其中,list-style-type: decimal:阿拉伯数字,默认值. disc

用JS改变的元素CSS样式

CSS样式的引用有3种方式:style引用.class引用.id引用,所以js改变元素的样式我们也分3种来说. 1.js改变由style方式引用的样式:方法一:document.divs.style.cssText="border:1px solid #000000;color:#FF0000";方法二:document.divs.setAttribute("style","border:1px solid #000000;color:#FF0000&qu

HTML基础(三)——css样式表

CSS(Cascading Style Sheet,叠层样式表),作用是美化HTML网页. /*注释区域*/此为注释语法 一.样式表 (一)样式表的分类 1.内联样式表 和HTML联合显示,控制精确,但是可重用性差,冗余较多. 例:<p style="font-size:14px;">内联样式表</p> 2.内嵌样式表 作为一个独立区域内嵌在网页里,必须写在head标签里面. <style type="text/css"> p