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

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

一、元素基础样式

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)边框属性


image.png

(2)边框的方向


image.png

(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)元素的显示属性


image.png

(2)元素特性


image.png

5. 显示和隐藏属性


image.png

二、字体属性

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


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


image.png

       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;   设置字体的样式。


image.png


5. 简写


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


font: italic 600 20px "仿宋";

三、文本属性

1. 字体颜色


       color:颜色的色值;


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


image.png


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


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


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


4. 文本线条修饰


image.png

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;


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

image.png

相关文章
|
22天前
|
前端开发
如何设置 CSS 盒子模型的边框样式?
CSS盒子模型的边框样式可以通过`border`属性设置,包括边框宽度、样式和颜色。例如:`border: 2px solid red;` 设置了2像素宽的红色实线边框。也可分别设置四边,如`border-top`、`border-right`等。
|
11天前
|
前端开发 JavaScript UED
|
16天前
|
Web App开发 前端开发 iOS开发
css所有缩写属性,CSS属性简写整理
css所有缩写属性,CSS属性简写整理
14 1
|
29天前
|
前端开发 JavaScript
CSS样式穿透技巧:利用scoped与deep实现前端组件样式隔离与穿透
CSS样式穿透技巧:利用scoped与deep实现前端组件样式隔离与穿透
133 1
|
16天前
|
前端开发
css简写属性
css简写属性
24 0
|
16天前
|
前端开发
HTML 样式- CSS3
内部样式表适用于单个文件的特别样式,通过&lt;head&gt;部分的&lt;style&gt;标签定义;外部样式表适用于多个页面,通过&lt;link&gt;标签引用外部CSS文件;&lt;style&gt;定义样式,&lt;link&gt;引用资源;已弃用的标签有&lt;font&gt;、&lt;center&gt;、&lt;strike&gt;,属性有color和bgcolor。
|
16天前
HTML 样式- CSS2
HTML样式实例展示了如何使用`font-family`、`color`和`font-size`属性来定义字体样式,以及使用`text-align`属性来设置文本的对齐方式。示例包括标题和段落的样式设置。
|
16天前
|
前端开发
HTML 样式- CSS1
CSS (层叠样式表) 用于为 HTML 元素添加样式,包括颜色、文本、盒子模型等。CSS 可以通过内联样式、内部样式表或外部引用的方式添加到 HTML 中。推荐使用外部引用方式。本教程将介绍如何使用 CSS 为 HTML 添加样式,并提供实例演示。
|
前端开发 容器
css:整理9种元素水平垂直居中的方法
css:整理9种元素水平垂直居中的方法
143 0
css:整理9种元素水平垂直居中的方法

热门文章

最新文章