CSS(二)

一、CSS常用属性

1. 颜色属性    Color

2. 背景属性

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:<背景颜色>|<背景图片>|<背景重复>|<背景附件>|<背景位置>

3. 边框属性

(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 边框宽度

(2)单位使用像素

   同上

(3)Border-color  边框颜色

  同上

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

4. 文本属性

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 表示在里面

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

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

三、无意义标签

Div

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

Span

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

块级元素的特点:

1.总是独自占一行显示

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

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

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

行内元素特点:

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

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

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

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

实例:

参考资料:https://www.w3cschool.cn/css/

时间: 2024-08-05 11:13:29

CSS(二)的相关文章

CSS二之调节样式

CSS二之调节样式 一.补充 选择器优先级补充 mycss1.css /*p {*/ /* color: green;*/ /*}*/ #d1 { color: red; } 选择器优先级 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!-- <style>

重修课程day48(前端三之css二)

一 伪类选择器 伪类选择器就是在查找的后面加上冒号和状态 hover:悬浮到上面就会变化一种状态 link:没有接触的状态 active:点击是触发的状态 visited:点击后的状态 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> a:link{

前端学习之css二

首先我们说一下各种属性: 1.水平对齐方式属性: left:把文本排列在左边.默认值:由浏览器决定 right:把文本排列在右边 center:把文本排在中间  justify:实现两端对齐文本效果 2.用于调图标的属性 font family:调节字体  font weight:调节粗细  font size:调节字体大小 lighter/bold/border/  text indent:首行缩进   font-stye:italic 文字样式   lettrt-spacing:字母间距  

CSS(二):CSS选择器

1.关系选择器 关系选择符可以分为: 选择器 名称 描述 E  F 包含选择器 选择所有被E元素包含的F元素. E > F 子选择器 选择所有作为E元素的子元素F. E + F 相邻选择器 选择紧贴在E元素之后F元素. E ~ F 兄弟选择器 选择E元素所有兄弟元素F. 包含选择器: div p{ color:red; } <div> <p>红色</p> </div> 子选择器: div > p{ color:red; } <div>

css 二

1.font合写 font: font-style font-variant font-weight font-size/line-height font-family font: 风格 变形 加粗 字号/行高 字体系列 风格 变形 加粗 可以按照任意顺序书写 如果是normal可以不写 变形 font-variant 三个值 small-caps normal inherit small-caps是一种小型大写字母  风格 font-style 四个值 italic oblique norma

css(二) block,inline和inline-block概念和区别

转: http://www.cnblogs.com/KeithWang/p/3139517.html 总体概念 block和inline这两个概念是简略的说法,完整确切的说应该是 block-level elements (块级元素) 和 inline elements (内联元素).block元素通常被现实为独立的一块,会单独换一行:inline元素则前后不会产生换行,一系列inline元素都在一行内显示,直到该行排满. 大体来说HTML元素各有其自身的布局级别(block元素还是inline

Bootstrap Css(二)

一.按钮 <!--标准的按钮--> <button type="button" class="btn btn-default">默认按钮</button> <br><br> <!--原始的按钮--> <button type="button" class="btn btn-primary">原始按钮</button> <br&

css选择器权重值计算规则

一.样式类型 1.行间 <h1 style="font-size:12px;color:#000;">我的行间CSS样式.</h1> 2.内联 <style type="text/css"> h1{font-size:12px; color:#000; } </style> 3.外部 <link rel="stylesheet" href="css/style.css"&g

整理推荐的CSS属性书写顺序

一. Mozilla 建议CSS规则 <span style="font-family:Microsoft YaHei;">/* Suggested order:    * display    * list-style    * position    * float    * clear    * width    * height    * margin    * padding    * border    * background    * color    * 

CSS命名规范参考及书写注意事项

CSS书写顺序 *{ /*显示属性*/ display position float clear cursor - /*盒模型*/ margin padding width height /*排版*/ vertical-align white-space text-decoration text-align - /*文字*/ color font content /*边框背景 为什么要把 boder和background放在最后的原因是修改的频率会较之前的频繁,放在最后查看起来方便,哈哈.*/