css的其他相关样式属性

素颜马尾好姑娘i 2022-01-07 00:51 347阅读 0赞

一、颜色

1、预定义的表示颜色的单词

red,black.gray,pink......

2、16进制表示

\# + 6位16进制的数字0 1 2 3 4 5 6 7 8 9 a b c d e f

如果两两一样可以合并成3个数字

\#fff;

3、rgb

rgb(,,)0-255的数

4、rgba

rgba(,,,)前三个是0-255的数，最后一个是0-1的数

有时候a不起作用，我们会用透明度来调节0是全透明1是不透明

二、一些其他的相关属性

line-height:20px;//指定每行的高度

text-align:center;//文本对齐方式

text-indent:2em;//缩进2倍的汉子宽度 控制文本首行的缩进，px或%都可；

letter-spacing:2px;//汉字间距为2px（针对中文）控制字母之间的距离；

word-spacing:8px;//单词间距为8px（针对英文）

width:100px;//内容宽度

height:299px;//内容高度

font-size:18px;//字体大小

font-family:"微软雅黑";//字体

font-weight:700;//字体加粗

text-decorarion:none;//文字的点缀none(无)underline(下划线)overline(上划线)line-through(中划线)

font-style:设置字体倾斜，可能的属性有normal、italic、oblique;  
　　text-overflow:当文本溢出包含元素时发生的事情；可能的值有  
　　　　　　clip  修剪文本。  
　　　　　　ellipsis  显示省略符号来代表被修剪的文本。  
　　　　　　string  使用给定的字符串来代表被修剪的文本。  
　　text-transform :控制英文的大小,可能的值有  
　　　　capitalize  文本中的每个单词以大写字母开头。  
　　　　uppercase  定义仅有大写字母。  
　　　　lowercase  定义无大写字母，仅有小写字母。  
　　white-space:控制文本与文档源代码的关系，可能值有  
　　　　normal 默认，空白会被浏览器忽略。  
　　　　pre 空白会被浏览器保留。其行为方式类似 HTML 中的 <pre> 标签。  
　　　　nowrap 文本不会换行，文本会在在同一行上继续，直到遇到 <br> 标签为止。  
　　　　pre-wrap 保留空白符序列，但是正常地进行换行。  
　　　　pre-line 合并空白符序列，但是保留换行符。  
　　　　inherit 规定应该从父元素继承 white-space 属性的值。

三、文字阴影（css3的一些新增属性）

text-shadow:　水平位置 垂直位置 模糊距离 模糊颜色

1》突出的字体

text-shadow: 1px 1px 1px \#000,-1px -1px 1px \#fff;

2》凹陷的字体

text-shadow:-1px -1px 1px \#000,1px 1px 1px \#fff;

四、z-index

当多个元素设置定位时，重叠的定位元素可以通过z-index来调整堆叠的顺序。默认为0；数值越大，越在上层，可正可负

注意：1、只有定位元素才有该属性，其他的元素没有（porition:absolute;relative;fixed）

五、鼠标的形状

cursor:default;箭头pointer;指针text;文本move;移动箭头help;帮助wait;等候

六、元素的显示隐藏

1》display:none;这个是隐藏元素，但是会向后台传递值，只是看不见了，位置也不复存在了而已

2》visibility:hidden;这个是和上述类似，但是还是占据原来的位置。

3》还有一种方式是搞透明

七、文字超出

1、　overflow:wisible;超出部分显示hidden;超出隐藏auto;超出就显示滚动条scroll;超不超出都有滚动条

2、文本溢出处理

text-overflow:clip;溢出裁剪ellipse;省略号（需要和white-space:nowrap;overflow:hidden;搭配使用才能产生省略号）

3、强制一行显示

white-space:nowrap;强制一行显示normal;正常

4、关于单词换问题

word-break:浏览器默认break-all;允许在单词内换行keep-all;只在半角或者连字符处换行

八、针对表单元素的轮廓

1、一般设置为outline:0;    outline:4px solid red;

2、textarea resize:none;不允许手动调整文本框的大小

九、使文字与图片对齐的方式

1、img\{vertical-align:middle;\}默认是基线对齐，top顶部对齐bottom底部对齐middle中部对齐

2、一般图片默认底部会有3px的缝隙（下面说一下解决的方式）

1》vertical-align:top;2》display:block;

十、关于精灵图

CSS精灵图是处理网页背景图的方式，它将网页涉及的所有零星的背景图集中到一张大图上，然后把大图放到网页作为背景，根据backgroun-position进行调整

优势：提高网页的加载速度

十一、字体图标

1、优点：1》可以做出和图片一样的事情2》本质是文字，所以可以修改各种样式，不至于失真3》本身的体积小，携带信息完整4》几乎所有的浏览器都支持，是移动设备的必备良药

2、使用（阿里巴巴）

1》声明字体

@font-face\{font-family:....;.....\}

2》使用字体

xxx\{font-family:,,,,;\}

转载于:https://www.cnblogs.com/dhrwawa/p/10508534.html

发表评论取消回复

表情：

评论列表（有 0 条评论，347人围观）

还没有评论，来说两句吧...

相关阅读

相关 CSS属性相关

宽和高 width属性可以为元素设置宽度。 height属性可以为元素设置高度。块级标签才能设置宽度，内联标签的宽度由内容来决定。字体属性

谁践踏了优雅/ 2023年08月17日 17:18/ 0 赞/ 73 阅读

相关 CSS样式：属性

CSS有多种属性，根据继承性，主要可以分为2大类（1）可继承属性父标签的属性值会传递给子标签；一般是文字控制属性；如：所有标签：visibilit

本是古典何须时尚/ 2023年07月19日 05:58/ 0 赞/ 55 阅读

相关 css 有关边框的属性_边框样式（CSS属性）

css 有关边框的属性句法 (Syntax) border-style 边框样式 : \{ \{ ： \{ \{ none | 无 | hidden | 隐藏 dot

落日映苍穹つ/ 2022年12月03日 11:25/ 0 赞/ 285 阅读

相关前端---js（自学笔记23)（其他样式的相关属性）

练习测试代码： <!DOCTYPE html> <html> <head> <meta charset="UTF-8">

你的名字/ 2022年11月29日 00:52/ 0 赞/ 222 阅读

相关 CSS 样式常见属性

文章目录标题CSS 文字属性： CSS边框属性---边框留空白： CSS 符号属性： CSS 背景样式： CSS 连接属性：鼠标光

雨点打透心脏的1/2处/ 2022年08月28日 03:55/ 0 赞/ 472 阅读

相关 css样式属性

`一、继承性` ` 可继承的样式： font-size font-family color, text-indent;` \ 不可继承的样式：border padding

客官°小女子只卖身不卖艺/ 2022年07月15日 08:25/ 0 赞/ 325 阅读

相关 css背景相关的样式

一、`background-origin` 设置元素背景图片的原始起始位置。语法：`background-origin ： border-box | padding-box

深碍√TFBOYSˉ_/ 2022年05月24日 09:55/ 0 赞/ 233 阅读

相关 JS基础-获取当前元素的样式&&其他样式相关的属性

1.利用currentStyle方法来获取当前元素的样式 <!doctype html> <html> <head> <meta charse

约定不等于承诺〃/ 2022年03月22日 09:47/ 0 赞/ 476 阅读

相关 css的其他相关样式属性

一、颜色　　1、预定义的表示颜色的单词　　　　red,black.gray,pink...... 　　2、16进制表示　　　　\ + 6位16进制的数字0 1 2

素颜马尾好姑娘i/ 2022年01月07日 00:51/ 0 赞/ 348 阅读

相关 css 其他属性

选择文字: -moz-user-select: none 子元素所有的文字都不能选择，包括input输入域中的文字。

缺乏、安全感/ 2021年07月24日 14:49/ 0 赞/ 477 阅读