前端基础学习之CSS样式

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：设置轮廓宽度

前端基础学习之CSS样式相关推荐

前端基础学习html部分小结
前端基础学习html部分小结 1 了解知识 1.1 网页的组成 html(Hyper Text Markup Language)指的是超文本标记语言,可以加入图片.声音.动画.多媒体等内容.还可以从一 ...
前端基础学习——JavaScript之BOM模型与DOM模型
前面还有JavaScript基础介绍,有兴趣的朋友可以前往查看前端基础学习--带你夯实JavaScript基础目录一. BOM模型 1.1 BOM模型与DOM模型示意图: 1.2 浏览器窗口中的B ...
iframe跨域调用js_郑州Web前端基础学习之JS跨域知识梳理
JS是Web前端开发三要素之一,是郑州Web前端基础学习中非常重要的知识点.JS涉及的知识点多且杂,很多同学反映不知如何下手,事实上,只要你认真记.多练习,就可以慢慢掌握它.今天千锋郑州Web前端培训 ...
【前端基础】12.CSS 基础知识学习——基本语法结构
视频目录一,css基本规则规范 1.快捷方式 2.css注释 3.css命名规范 4.css书写规范 (1)空格规范 (2)选择器规范 (3)属性规范 5.css样式规则二,字体样式 1.fon ...
前端基础HTML和css总结
HTML[Hyper Text Markup Language] 超文本标记语言,不是编程语言软件架构: 1. C/S: Client/Server 客户端/服务器端 * 在用户本地有一个客户端 ...
前端基础知识总结---CSS篇
本部分主要是笔者在复习 CSS 相关知识和一些相关面试题时所做的笔记,如果出现错误,希望大家指出! 目录 1.介绍一下标准的 CSS 的盒子模型?低版本 IE 的盒子模型有什么不同的? 2.CSS 选 ...
前端学习笔记01---HTML5、CSS3、移动端前端基础学习知识点合集
文章目录 HTML结构一.标签(标记.元素) 二.列表,表格,表单 1.列表 2.图片 3.超链接--实现不同页面的跳转 4.table表格 5.表单1 --收集用户信息给后端input CSS表现 ...
Web前端开发北京林业大学 CSS样式-单元作业
Web前端开发北京林业大学通关攻略 Web前端开发客观题编程题概论单元测试1 HTML基础单元测试2 单元作业1 CSS样式单元测试3 单元作业2 CSS布局与定位单元测试4 单元作 ...
WEB前端基础（HTML+CSS+JavaScript）（上）最好看最详细的笔记~
WEB前端基础当前部分是基于HTML与CSS总结,后续有JavaScript更新~ 文章目录 WEB前端基础一.HTML概述(阶段1 入门概述) 1.HTML 二.第一个HTML页面 1.HTML ...
前端基础学习——带你全面掌握HTML语言
目录一. 认识HTML 1.1 HTML简介 1.2.常用主流浏览器 1.3.前端常用开发工具 1.4 HBuilder或HBuilderX的快捷输入 1.4.1 嵌套 > 1.4.2 并列 ...

前端基础学习之CSS样式

CSS样式

CSS背景

CSS文本

CSS字体

CSS链接

CSS轮廓

前端基础学习之CSS样式相关推荐

最新文章

热门文章