CSS常用属性

大家好我是爱编程的小白，废话不多说这篇文章主要介绍了CSS的大部分常用属性

那什么是CSS呢？

1. CSS 是层叠样式表 ( Cascading Style Sheets ) 的简称。
2. CSS 是一种标记语言，属于浏览器解释型语言，可以直接由浏览器执行，不需要编译。
3. CSS 是用来表现HTML或XML的标记语言。
4. CSS 是由W3C的CSS工作组发布推荐和维护的.
5. CSS 是编程入门人员的必修课，运用CSS样式可以让页面变得美观。
6. CSS语法由三部分构成：选择器、属性和值： selector {property: value}
   使用CSS的优势
   内容与表现分离，有了CSS，网页的内容(XHMTL)与表现就可以分开了。
   使用CSS可以减少网页的代码量，增加网页的浏览速度。
   如何使用CSS？
   有三种方法可以在站点网页上使用样式表：
7. 外联式Linking（也叫外部样式）：将网页链接到外部样式表。
8. 嵌入式Embedding（也叫内页样式）：在网页上创建嵌入的样式表。
9. 内联式Inline（也叫行内样式）：应用内嵌样式到各个网页元素。
   其中，优先级：内联式 > 嵌入式 > 外联式
   CSS选择器有
   id选择器 
   class选择器
   属性选择器
   层次选择器

一.文本设置

1、font-size: 字号参数

2、font-style: 字体格式

3、font-weight: 字体粗细

4、颜色属性

color: 参数

注意使用网页安全色

二、超链接设置

text-decoration: 参数

主要用途是改变浏览器显示文字链接时的下划线。

参数取值范围：

underline：为文字加下划线

overline：为文字加上划线

line-through：为文字加删除线

blink：使文字闪烁

none：不显示上述任何效果

三、背景

1、背景颜色

padding: 0px 0px 0px 10px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); color: rgb(61, 70, 77); font-size: 16px; border-left: 1px solid rgb(128, 128, 128); background: rgb(238, 238, 238); box-shadow: rgba(7, 17, 27, 0.05) 0px 4px 8px 0px; box-sizing: border-box; border-radius: 8px; font-family: "Helvetica Neue", Helvetica, "PingFang SC", 微软雅黑, Tahoma, Arial, sans-serif;">2、背景图片

background-image: url(URL)

URL就是背景图片的存放路径，none表示无。

3、背景图片重复

background-repeat: 参数

参数取值范围 ：

no-repeat：不重复平铺背景图片

repeat-x：使图片只在水平方向上平铺

repeat-y：使图片只在垂直方向上平铺

如果不指定背景图片重复属性，浏览器默认的是背景图片向水平、垂直两个方向上平铺。

4、背景图片固定

背景图片固定控制背景图片是否随网页的滚动而滚动。如果不设置背景图片固定属性，浏览器默认背景图片随网页的滚动而滚动。为了避免过于花哨的背景图片在滚动时转移浏览者的注意力，一般都设为固定

background-attachment: 参数

参数取值范围：

fixed：网页滚动时，背景图片相对于浏览器的窗口而言，固定不动

scroll：网页滚动时，背景图片相对于浏览器的窗口而言，一起滚动

四、区块

1、单词间距

word-spacing: 间隔距离

2、字母间距

letter-spacing: 字母间距

3、文本对齐

text-align: 参数

参数的取值：

left：左对齐

right：右对齐

center：居中对齐

justify：相对左右对齐

4、垂直对齐

vertical-align: 参数

top：顶对齐

bottom：底对齐

text-top：相对文本顶对齐

text-bottom：相对文本底对齐

baseline：基准线对齐

middle：中心对齐

sub：以下标的形式显示

super：以上标的形式显示

5、文本缩进

text-indent: 缩进距离

12px相当于一个文字距离

6、空格

white-space: 参数

normal 正常

pre 保留

nowrap 不换行

7、显示样式

display: 参数

参数取值范围：

block：块级元素，在对象前后都换行

inline：在对象前后都不换行

list-item：在对象前后都换行，增加了项目符号

none：无显示

五、方框

1、height 高度

2、width 宽度

3、padding 内边距

4、margin 外边距

5、float（浮动）：可以让块级元素在一行中排列，例如横向菜单。

6、clear 清除浮动

六、边框

1、样式
border style 参数

边框样式的参数：

none：无边框

dotted：边框为点线

dashed：边框为长短线

solid：边框为实线

double：边框为双线

2、宽度
border width 参数
3、颜色
border color 参数

七、列表

list-style-type 列表样式

不同浏览器的列表符可能不相同，可能会影响到网页，所以网页中的列表大多都是由背景图片显示。

控制用户界面的样式

八、鼠标

cursor：鼠标形状参数

CSS鼠标形状参数表：

鼠标形状：CSS代码

style="cursor:hand" 　　　　　手形

style="cursor:crosshair" 　　十字形

style="cursor:text" 　　　　　文本形

style="cursor:wait" 　　　　　沙漏形

style="cursor:move" 　　　　十字箭头形：

style="cursor:help" 　　　　　问号形

style="cursor:e-resize" 　　　右箭头形

style="cursor:n-resize" 　　　上箭头形

style="cursor:nw-resize" 　　左上箭头形

style="cursor:w-resize" 　　　左箭头形

style="cursor:s-resize" 　　　下箭头形

style="cursor:se-resize" 　　右下箭头形

style="cursor:sw-resize" 　　左下箭头形

本人小白，本文为个人总结资料。
文章如有问题请大神指出，如有看不懂的地方可以评论私信交流。欢迎大家讨论交流。
本章对大家有帮助的话可以点点赞加个关注。