前端基础学习之CSS样式
来源:互联网 发布:java 设置时区 编辑:程序博客网 时间:2024/06/05 23:04
CSS样式
CSS背景
background-color
为元素设置背景色,该值接受任意一个合法的颜色值,如果不设置,则默认为transparent
透明色background-image
为元素设置背景图片,属性的默认值为none,表示元素上不放置任何图片backgroung-repeat
可以为元素的背景图片实行平铺,属性值repeat
表示在水平和竖直方向上进行平铺操作,属性repeat-x
表示在水平方向上进行平铺,repeat-y
表示在竖直方向上进行平铺background-position
为元素的背景图片进行定位,- 关键字属性值包括
center
,表示背景图片居中显示,其中还包括top
,right
,left
,bottom
,其中,如果属性值指定为top的话,其真实表示位置为上方中部,也就是说,如果只指定一个属性值,则另一个都是默认为center,如果想要表示为左上角,则需要设置属性值为top left
- 百分比,background-position : 50% 50%; 百分比数值用来表示图片在整个布局中的具体位置所占百分比,上面的例子就是表示位置居中显示
- 数值:background-position : 50px 50px; 其中的数值表示背景距离左边和上边的距离大小,上面的例子表示背景图片距离左边 50像素,距离上边50像素
- 关键字属性值包括
background-attachment
表示背景关联:如果文档很长,在滚动的时候,背景会随着屏幕的滚动而滚动,如果需要固定住背景的话,设置属性值为fixed
就不会随着屏幕的滚动而滚动了
CSS文本
text-indent
表示文本缩进,可以为所有元素的第一行文本进行给定数值的缩进,该值可以为负值,代码示例:
p {text-indent: 5em;}
表示文本缩进5个相对单位,其中
em
表示相对单位,如果一个字体大小为16px,那个5em就表示 5 * 16 px个像素值- 百分比缩进
p {text-indent: 20%;}
表示缩进值为父文本的20%,
- 百分比缩进
text-align
设置文本行之间的相互对齐方式,属性值分别包括left,right,center,其中justfy是设置两端对其,系统会自动调整单词里面的间距来保证每行文字的两端对其word-spacing
改变字(单词)之间的标准间隔letter-spacing
改变字符或字母之间的间隔text-transform
字符转换,用来处理文本的大小写,属性值包括uppercase
:大写、lowercase
:小写、capitalize
:每个单词的首字母大写text-decoration
文本装饰,属性值包括underline
:下划线、overline
:上划线、line-through
:删除线、blink
:文本闪烁white-space
处理空白字符,对源文档中的空白符,空格,tab键进行处理- direction 设置文本的文字方向
注释:对于行内元素,只有当 unicode-bidi 属性设置为 embed 或 bidi-override 时才会应用 direction 属性。
direction 属性有两个值:ltr 和 rtl。大多数情况下,默认值是 ltr,显示从左到右的文本。如果显示从右到左的文本,应使用值 rtl。
CSS字体
font-family
定义文本的字体font-style
定义字体风格normal
:正常 、italic
:文本斜体显示、oblique
:文本倾斜显示font-variant
定义字体变形 可以设定小型的大写字母,font-weight
定义字体加粗font-size
定义文字大小
CSS链接
链接共有四种样式分别为
a:link
普通的,未被访问的链接a:visted
用户已访问的链接a:hover
用户鼠标悬停在连接上方a:active
用户鼠标被点击的时刻
注意:当为链接设置不同的样式的时候,一定要遵循如下的顺序
a:hover必须要在a:link和a:visited之后
a:active必须要在a:hover后面
代码示例:
a:link {color:#FF0000;} /* 未被访问的链接 */a:visited {color:#00FF00;} /* 已被访问的链接 */a:hover {color:#FF00FF;} /* 鼠标指针移动到链接上 */a:active {color:#0000FF;} /* 正在被点击的链接 */
CSS轮廓
outline
:设置所有的轮廓属性outline-color
:设置轮廓颜色outline-style
:设置轮廓样式outline-width
:设置轮廓宽度
阅读全文
0 0
- 前端基础学习之CSS样式
- 前端学习笔记之2 CSS样式
- 从零开始,学习web前端之css基础
- 系统学习前端之CSS 基础
- iOS转前端之CSS基础学习
- 前端基础学习之CSS选择器
- css样式基础学习
- CSS样式基础学习
- Css基础样式学习
- CSS基础之样式
- 前端基础之CSS
- 前端基础之CSS
- CSS之基础CSS样式
- 蓝鸥零基础学习HTML5之CSS的基础样式一
- 蓝鸥零基础学习HTML5之CSS的基础样式二
- 前端基础——CSS常见样式
- CSS样式基础知识(前端基础篇)
- 前端零基础入门(六):基础css样式之border
- 学习笔记
- C
- 更改Tomcat日志路径
- 2017全国大学生信安赛 easyheap
- 影响关键词排名稳定的因素有哪些?
- 前端基础学习之CSS样式
- 【bzoj1334】[Baltic2008]Elect
- OpenWrt移植Apache2 apr 到MT7620N
- 【ETL】拉链表算法
- mysql binlog日志及mysqlbinlog操作详解
- 三栏布局
- 为什么有时候使用迭代函数得到的都是undefined
- ExtJs 常用方法(alert confirm prompt show wait)
- 数据挖掘(1):关联规则挖掘基本概念与Aprior算法