CSS属性操作

一、css文本颜色的表示方式

  1、十六进制值 - 如: FF0000

  2、一个RGB值 - 如: RGB(255,0,0,0)     (红,绿,蓝,透明度)

  3、颜色的名称 - 如:  red     (建议使用)

  4、之前的属性操作方式:

    colour:调整字体颜色;background-colour:调整字体背景颜色;font-size:调整字体大小;border:调整字体边框厚度,样式,颜色;

    width:调整框架宽度;height:调整框架高度

二、文本水平对齐方式(text-align属性

  1、left      把文本排列到左边。默认值:由浏览器决定。

  2、right    把文本排列到右边。

  3、center 把文本排列到中间。

  4、justify 实现两端对齐文本效果。

三、文本其他属性

  1、font-size: 10px;设置文本中文字大小

  2、 font-family: ‘Lucida Bright‘ 设置字体类型

  3、font-weight: lighter/bold/border/ 设置字体粗细(细中粗),也可用数字调节

  4、font-style: oblique 设置字体为斜体

  5、 line-height: 200px; 文本垂直居中,但是必须和文本框高度一致。

  6、 vertical-align:-4px 设置元素内容的垂直对齐方式 ,只对行内元素有效,对块级元素无效

  7、 text-decoration:none text-decoration 属性用来设置或删除文本的装饰。主要是用来删除链接的下划线

  8、text-indent: 150px; 首行缩进150px

  9、letter-spacing: 10px; 字母直接的间距

  10、word-spacing: 20px; 单词直接的间距

  11、text-transform: capitalize/uppercase/lowercase ; 文本转换,用于所有字句变成大写或小写字母,或每个单词的首字母大写

  12、默认图片是按照基线对齐,可以通过vertical-align:的方法改变图片的对齐方式。

    

四、css背景属性

  1、background-color 设置背景颜色

  2、background-image 以图片设置背景颜色,横纵都填,不够图片补全

  3、background-repeat:repea-x横向填充图片

  4、background-repeat:repea-x纵向填充图片

  5、background-repeat:no-repea不会填充图片,只有一张图片

  6、background-position:100px 100px 上左,可center center 居中

  7、简写:

    

五、边框属性

  1、border-width 边框的宽度

  2、border-style (required) 边框的类型,即以什么线把边框包起来,实线,虚线等

  3、border-color 边框的颜色

  4、简写:

    border:宽度 颜色 类型  (不区分顺序,浏览器默认会识别)

  5、border-right:宽度 颜色 类型  这只是给边框的最右边的一条线设置属性。

  6、border-radius: 80% 边框圆润度

六、列表属性

  1、list-style-type         设置列表项标志的类型。

  2、list-style-image   将图象设置为列表项标志。

  3、list-style-position 设置列表中列表项标志的位置。

  4、list-style      简写属性。用于把所有用于列表的属性设置于一个声明中

  5、list-style:none     设置列表项标志类型为空

七、外边距和内边距属性

  1、盒子模型

    

    1.1、margin: 用于控制元素与元素之间的距离;

    1.2、padding:  用于控制内容与边框之间的距离;

    1.3、Border(边框):  围绕在内边距和内容外的边框。

    1.4、Content(内容):   盒子的内容,显示文本和图像。

  2、eg:

    

时间: 2024-11-03 22:41:32

CSS属性操作的相关文章

Day49:CSS属性操作(文本、背景、边框、列表、display、边距)

一.CSS属性操作 1.CSS text 文本颜色:color 颜色属性被用来设置文字的颜色. 颜色是通过CSS最经常的指定: 十六进制值 - 如: #FF0000 一个RGB值 - 如: RGB(255,0,0) 颜色的名称 - 如:  red p { color: rebeccapurple; } 水平对齐方式 text-align 属性规定元素中的文本的水平对齐方式. left       把文本排列到左边.默认值:由浏览器决定. right     把文本排列到右边. center 把文

web前端【第四篇】CSS属性操作

一.文本属性 1.text-align:cnter 文本居中2.line heigth 垂直居中 :行高,和高度对应3.设置图片与文本的距离:vertical-align4.text-decoration:none 去掉超链接下划线5.要是给a标签修改颜色的时候,就定到a标签上,用继承有时候是搞不定的因为继承的级别是很低的,如果a标签设置了样式,是不会继承父亲的6.首行缩进:text-indent:30px7.font-style:oblique 或者italic....(设置字体的样式为斜体)

CSS/属性操作

(1)css text 文本 文本颜色:color 颜色属性被用来设置文字的颜色 颜色是通过css最经常的指定: *十六进制值-如:#FF0000 *一个RGB值---如:RGB(255,0,0) *颜色的名称---如:red line-height: 200px;   文本行高 通俗的讲,文字高度加上文字上下的空白区域的高度 50%:基于字体大小的百分比 vertical-align:-4px  设置元素内容的垂直对齐方式 ,只对行内元素有效,对块级元素无效 text-decoration:n

css属性操作2(外边距与内边距<盒子模型>)

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>外边距与内边距</title> <!--margin:用于控制元素与元素之间的距离:margin的最基本用途就是控制元素周围空间的间隔,从视觉角度上达到相互隔开的目的.--> <!--padding:用于控制内容与边框之间的距离: -->

css样式之属性操作

css样式之属性操作 一.文本属性 1.text-align:cnter 文本居中 2.line heigth 垂直居中 :行高,和高度对应 3.设置图片与文本的距离:vertical-align 4.text-decoration:none 去掉超链接下划线 5.要是给a标签修改颜色的时候,就定到a标签上,用继承有时候是搞不定的 因为继承的级别是很低的,如果a标签设置了样式,是不会继承父亲的 6.首行缩进:text-indent:30px 7.font-style:oblique 或者ital

python--CSS属性操作/下

CSS属性操作/下 1.伪类 anchor伪类 跟<a>/</a>有关:专用于控制链接的显示效果 a:link(没有接触过的链接),用于定义了链接的常规状态. a:hover(鼠标放在链接上的状态),用于产生视觉效果. a:active(在链接上按下鼠标时的状态),用于表现鼠标按下时的链接状态. 伪类选择器:伪类值得是标签的不同状态: a ===>点过状态 没有点过的状态 鼠标悬浮状态 激活状态 <style> a:link{ #未访问的链接 color: #24

css属性中常见的操作方法

css样式之属性操作 一.文本属性 1.text-align:cnter 文本居中2.line heigth 垂直居中 :行高,和高度对应3.设置图片与文本的距离:vertical-align4.text-decoration:none 去掉超链接下划线5.要是给a标签修改颜色的时候,就定到a标签上,用继承有时候是搞不定的因为继承的级别是很低的,如果a标签设置了样式,是不会继承父亲的6.首行缩进:text-indent:30px7.font-style:oblique 或者italic....(

javascript操作html元素CSS属性

下面先记录一下JS控制CSS所使用的方法. 1.使用javascript更改某个css class的属性... <style type="text/css"> .orig { display: none; } </style> 你想要改变把他的display属性由none改为inline. 解决办法: 在IE里: document.styleSheets[0].rules[0].style.display = "inline"; 在firef

jQuery操作CSS属性的相关方法

1.前言 jQuery提供了以下几种操作DOM元素CSS样式的方法,包括直接访问.修改DOM元素的class属性值,还提供了访问.修改DOM元素内联CSS属性值的方法,除此之外还提供了大量直接访问.修改DOM元素大小和位置的方法. jQuery提供的操作CSS属性的相关方法如下. 1)        addClass(class):将指定的CSS定义添加到jQuery对象包含的所有DOM对象上. 2)        hasClass(class):判断该jQuery对象是否包含至少一个具有指定C