CSS样式表及常用属性

最新推荐文章于 2024-02-16 10:17:34 发布

谁是蜗壳儿

最新推荐文章于 2024-02-16 10:17:34 发布

阅读量1.8k

点赞数 2

分类专栏： html5 文章标签： css html css样式 css属性

本文链接：https://blog.csdn.net/yxyq1210/article/details/76572245

版权

html5 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

CSS常用属性

一、样式表的应用：

行内样式表、内部样式表、外部样式表、导入样式表

行内样式表：就是将样式表写在元素的开始标签中，格式<开始标签 style=”属性:属性值;”></结束标签>
内部样式表：就是将样式表写在网页的头部，格式

<head>

       <style type=”text/css”>

              选择器{样式声明}

       </style>

</head>

3.外部样式表：将CSS样式写在独立的CSS文件中通过link标签加载到HTML文档上，格式：（用的最多）

   <link rel=”stylesheet” type=”text/css”  href=”CSS文件的路径”>

新建.css页面然后输入 @charset “utf-8”;页面采用utf-8的编码

4. 导入样式表，格式

   <style type=”text/css”>

          @import   “路径”;

   </style>

二、样式表的优先级：

相同权值情况下，CSS样式的优先级总结来说，就是——就近原则（离被设置元素越近优先级别越高）：

内联样式表（标签内部）> 嵌入样式表（当前文件中）> 外部样式表（外部文件中）

权值不同时，浏览器是根据权值来判断使用哪种css样式的，哪种样式权值高就使用哪种样式。下面是权值的规则：

三、CSS样式表特性：

继承：：子元素可以继承父元素的样式text-，font-，line-这些元素开头的都可以继承，以及color属性
覆盖:是浏览器处理冲突的一个能力如果一个属性通过两个选择器设置到同一个元素上，那么这个时候一个属性就会将另一个属性层叠掉

四、CSS中常用的文本属性

1.color：设置字体颜色，属性值为颜色名称、十六进制代码、rgb值、rgba值

1) 常见的十六进制代码

红色：#ff0000，#f00
绿色：#00ff00，#0f0
蓝色：#0000ff，#00f
黑色：#000000,#000
白色：#ffffff,#fff

2) rgb值使用格式：rgb(值1，值2，值3)

3) rgba值使用格式：rgb(红色，绿色，蓝色，透明度)，透明度的范围为0-1，0表示完全透明，1表示不透明

2.font-size：设置字体大小，默认16px，通常标题设置为14px，正文设置为12px，属性值为像素值（如果值不是0则必须加单位，否则不起作用）、em、百分比

3.font-weight：设置字体加粗效果，属性值为normal（正常）和bold（加粗）

4.font-style：设置字体倾斜效果，属性值为normal和italic或oblique

5.font-family：设置字体类型，格式font-family：字体1，字体2，字体3…，注意事项

1) 如果字体为中文字体或字体中有空格，那么字体必须用双引号包起来

6.font的复合属性，格式font：加粗倾斜大小类型；使用时的注意事项为

1) 值得顺序固定

2) 值可以有省略，如果省略则采用默认值，但是要注意到小和类型不可以省略

3) 如果既有单一属性，又有符合属性，那么单一属性应该写在下面，否则会被覆盖掉

text-decoration：文本修饰，下划线属性值为underline、overline、line-through、none
text-shadow：设置文本阴影效果，格式text-shadow：水平位移值垂直位移值阴影半径阴影颜色；
word-spacing：设置英文单词间的距离，属性值为像素值
letter-spacing：设置单词内部字符间的距离，也可以设置汉字间的距离
text-transform:设置英文字母的大小写，属性值为

1) capitalize：单词首字母大写

2) uppercase：所有字母大写

3) lowercase：所有字母小写

white-space：作用是调节文本中的空白元素是否合并，另外也可以用来设置是否换行

1) normal：默认，合并空白符，换行

2) pre：不换行、不合并空白符

3) nowrap：合并空白、不换行

4) pre-wrap：不合并空白、换行

5) pre-line：合并空白，换行
overflow：设置溢出文本的处理方式，属性值为visible、hidden、scroll、auto

1) visible：默认，可见

2) hidden：隐藏

3) scroll：当文本溢出时有滚动条，文本没有溢出时有滚动条所在边框

4) auto：当文本溢出时有滚动条，没有溢出时正常显示，body的overflow值为auto
text-overflow：设置溢出文本的显示方式，属性值为ellipsis（省略号）
溢出文本以省略号形式显示的方式

1) white-space:nowrap

2) overflow：hidden

3) text-overflow：ellipsis
overflow-x：处理横向溢出文本，属性值有visible、hidden、scroll、auto
overflow-y：处理纵向溢出文本，属性值有visible、hidden、scroll、auto
line-height：设置行高，属性值为像素值、em、百分比，使用技巧

1) height=line-height，文本垂直居中（单行文本）

2) line-height

五、CSS中常用的修饰列表的属性

1.list-style-type：作用是用来修饰列表符号的类型，属性值有disc、circle、square、none

none为除去list列表的符号圆点，方便后期插入list的图像

2.list-style-position：作用是用来修饰列表符号的位置，属性值有inside（列表符号右移）、outside（默认值）

3.list-style-image：作用是用图像当做列表符号，格式为list-style-image：url(路径)

4.list-style的复合形式list-style：值1 值2 值3

六、CSS中常用的修饰背景的属性

background-color：设置背景色，属性值为颜色名称、十六进制代码、rgb值、rgba值
background-image：设置背景图，格式为background-image：URL（路径）
background-repeat：设置背景平铺方式，属性值为repeat、no-repeat、repeat-x、repeat-y

1) repeat：默认，平铺

2) no-repeat：不平铺

3) repeat-x：横向平铺

4) repeat-y：纵向平铺
background-position：设置背景位置，格式background-position：水平的值垂直的值，值的表示方式有两种，一种为英文单词（left、center、right、top、center、bottom），一种为像素值
background-attachment：设置背景依附方式，属性值为fixed、scrollk
background的复合形式：background：值1 值2 值3 值4 值5;

七、精灵图：

所谓精灵图就是利用PS等图像处理软件将多个背景图拼接在一张图像，然后利用background-position属性进而调节该背景图显示的位置

1.好处：

1) 将图像整合后有利用图像的管理

2) 会降低向服务器请求的次数，减少服务器的压力

3) 减小里图片的总体积，有利于提升页面加载速度

2.不足：

1) 精灵图不利于维护

2) 精灵图属于精细活

谁是蜗壳儿

关注

2
点赞
踩
15

收藏

觉得还不错? 一键收藏
0
评论
CSS样式表及常用属性

CSS常用属性一、样式表的应用：行内样式表、内部样式表、外部样式表、导入样式表行内样式表：就是将样式表写在元素的开始标签中，格式<开始标签 style=”属性:属性值;”></结束标签>内部样式表：就是将样式表写在网页的头部，格式<head> <style type=”text/css”> 选择器{样式声明} </style></he
复制链接

扫一扫