CSS(二)元素基础样式、字体属性、文本属性

举报
敬 之 发表于 2022/04/16 01:27:19 2022/04/16
【摘要】 目录 一、元素基础样式 1. 尺寸和单位 2. 颜色 3. 边框 4. 元素的分类 5. 显示和隐藏属性 二、字体属性 三、文本属性 一、元素基础样式 1. 尺寸和单位         宽度width和高度height使用长度单位:p...

目录

一、元素基础样式

1. 尺寸和单位

2. 颜色

3. 边框

4. 元素的分类

5. 显示和隐藏属性

二、字体属性

三、文本属性


一、元素基础样式

1. 尺寸和单位

        宽度width和高度height使用长度单位:px、pt、rem、em、%等;

        max-width 最大宽度,max-height 最大高度;

        min-width 最小宽度,min-height 最小高度,不允许出现负值。

        一般PC端网页使用 px 或者 pt,移动端使用 %、em、rem、vw、vh 等响应式单位。

2. 颜色

(1)英文颜色

        常用 red、green、blue、yellow、orange、pink、purple、gold 等,还有透明色transparent

(2)十六进制颜色

        格式为 #rrggbb,1、2 位代表红色范围;3、4 位代表绿色范围;5、6 位代表蓝色范围。值的范围为 0-9,a-f。如果三组都是相同的值,可简写,如:#00ff00 --> #0f0。

(3)RGB颜色

        格式为 rgb(r,g,b);  r 代表红色色值;g 代表绿色色值;b 代表蓝色色值。

        取值范围为0~255 之间的256个数。

        rgba();a代表透明度,取值 0~1 之间的数字,0 代表完全透明

  rgb(255, 5, 251);
  rgba(15, 2, 15, 0.5);

(4)web 安全色

        安全色是用于网页的标准色彩,它比标准的 rgb 色彩要少,如果网页设计的时候用了非 web 安全色,那这个网页在不同的电脑显示出来可能是不同的颜色。

3. 边框

(1)边框属性

border-width 边框宽度
border-style 边框样式,solid实线,dashed虚线,dotted点点
border-color 边框颜色

(2)边框的方向

border-bottom 下边框
border-top 上边框
border-left 左边框
border-right 右边框

(3)简写

        border:边框宽度  边框样式  边框颜色(最常用)

  border:30px solid green;
  border-bottom:10px solid blueviolet;

(4)案例:三角形的 CSS 写法

.sjx {
   width: 0; 
   height: 0;
   border: 50px solid transparent;
   border-bottom-color: black;
}

4. 元素的分类

(1)元素的显示属性

display: block; 以块级元素方式显示
display: inline; 以内联元素方式显示
display: inline-block; 属于行内元素,但以块级显示,俗称行内块
display: none; 不显示
display: table; 以 table 方式显示(不是重点)

(2)元素特性

a,元素只要有文字就会有高度,高度就是文字的高度
b,块级元素的默认宽度是父元素宽度的100%
c,块级元素不管设置宽为多少,默认自占一行;高度设置多高即为多高
d,块级元素的默认排列方式为文档流排列,从上往下顺序排列
e,内联元素(行内元素)没有文字支撑不会呈现宽度和高度,有文字时宽高为文字的宽高,特殊内联(img、input、button等)除外
f,普通内联元素只依靠文本内容撑开,宽高设置无效,特殊内联除外
g,内联元素的默认排列方式为文档流排列,从左往到顺序排列,宽度不够时换行
h,行内块inline-block是内联的一种,可以设置宽度高度等,但仍然从左到右排列(不推荐做布局,存在幽灵空白节点)

5. 显示和隐藏属性

display:none 彻底消失,不占据页面位置 - display:none;  使元素消失
- display:block;  使元素出现,元素显示为块级元素
visibility: hidden 隐藏,元素不显示但仍占据位置 - visibility: visible;  元素显示
- visibility: hidden;  元素隐藏,占据自身位置
opacity: 0; 透明度 取值范围为0-1,0代表完全透明,1代表不透明

二、字体属性

1. 字体大小——font-size: 30px;   设置字号,

        字体大小可以使用不同的单位,如 px、pt、em、rem、vw等等,不允许负值像素。几种常见取值如下:

px  像素
pt  磅
em  父级元素的倍数 em参照的是父级字号的比例,如1em代表父级字号*1
rem  根标签的倍数 rem参照的是根标签(html)的指定字号
vw  视窗尺寸

        Google浏览器字体大小默认为16px,最小12px。

2. 字体系列——font-family: "华文新魏";   设置所需要的字体。

        推荐字体系列:(可直接复制使用)

<!--移动端项目:-->
font-family:Tahoma,Arial,Roboto,"Droid Sans","Helvetica Neue","Droid Sans Fallback","HeitiSC",sans-self;
<!--pc端(含Mac)项目:-->
font-family:Tahoma,Arial,"Helvetica Neue","Hiragino Sans GB",Simsun,sans-self;
<!--移动和pc端项目:-->
font-family:Tahoma,Arial,Roboto,"Droid Sans","Helvetica Neue","Droid Sans Fallback","HeitiSC","Hiragino Sans GB",Simsun,sans-self;

3. 字体字重(粗细)——font-weight: 400;   设置字体的粗细。

        值为介于 1 和 1000 之间的数字类型值,必须要是 100 的倍数。常用关键词:normal(400 默认)、bold(粗体700)、lighter(细体300)。

4. 字体样式——font-style: italic;   设置字体的样式。

font-style: normal;   默认正常
font-style: italic;   斜体

5. 简写

        格式:font:字体样式 字重 字号 字体系列(不可改变顺序)

font: italic 600 20px "仿宋";

三、文本属性

1. 字体颜色

        color:颜色的色值;

2. 文本对齐方式——text-align: center;

left   默认,左对齐
center 居中对齐
right   右对齐

        该属性针对块级元素中的内联元素,它需要写在父级(块级元素)中,不能写在子元素中。

3. 文本的行高—— line-height: 70px;

        行高=文字上下间距+文本高度;使单行文字在父元素垂直居中时使文本的行高等于父元素的高度即可。

4. 文本线条修饰

text-decoration: none; 无线条(常用于将a标签的默认下划线去掉)
text-decoration: underline; 下划线
text-decoration: overline; 上划线
text-decoration: line-through;  删除线

5. 首行缩进——text-indent: 2em;

6. 文本换行

        正常文字拥有默认的 white-space:normal 属性,当达到定义的宽度之后就会自动换行,而连续的英文字符和数字不能换行,在 div 中英文字母之间没有空格的话,它会默认为这是一个英文单词,所以一次性输出不换行

white-space: nowrap;   不换行
word-wrap:break-word;   强制换行

7. 文本溢出

.d9 {   
   width: 300px;  /* 限宽 */  
   white-space: nowrap;  /* 强制不换行 */ 
   overflow: hidden;  /* 多余部分不显示 溢出部分隐藏 */
   text-overflow: ellipsis;  /* 文本溢出显示 */
}

8. 文字阴影

        格式:text-shadow:x 轴偏移量  y 轴偏移量  模糊半径的大小  颜色值

text-shadow: 10px 10px 5px brown;

9. 垂直对齐方式——vertical-align: middle;

        垂直对齐针对的是该元素前后的内联元素或者文字,而不是本身。常用关键值:

vertical-align: middle; 居中对齐
vertical-align: top; 顶部对齐
vertical-align: bottom; 底部对齐
vertical-align: baseline; 基线对齐(默认)

文章来源: majinjian.blog.csdn.net,作者:Developer 小马,版权归原作者所有,如需转载,请联系作者。

原文链接:majinjian.blog.csdn.net/article/details/119793586

【版权声明】本文为华为云社区用户转载文章,如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。