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

相关文章
|
1月前
|
前端开发 JavaScript
如何使用CSS过渡实现页面元素的淡入淡出效果?
如何使用CSS过渡实现页面元素的淡入淡出效果?
119 79
|
1月前
|
前端开发
Css实现文本超出长度隐藏并用三个点结尾
Css实现文本超出长度隐藏并用三个点结尾
54 17
|
4月前
|
前端开发 JavaScript
如何利用 CSS3 动画实现元素的淡入淡出效果?
在上述代码中,定义了一个名为 `fade-in` 的CSS类,其初始透明度为0,并设置了淡入的过渡效果。当通过JavaScript为元素添加 `active` 类时,元素的透明度变为1,实现淡入效果;当再次点击按钮移除 `active` 类时,元素又会逐渐淡出。通过这种方式,可以根据用户的操作灵活地控制元素的淡入淡出效果。
661 60
|
4月前
|
数据采集 前端开发 JavaScript
捕捉页面的关键元素:用CSS选择器与Puppeteer自动抓取
本文介绍了如何使用 Puppeteer 结合 CSS 选择器抓取动态网页中的关键元素,以亚航网站的特价机票信息为例,通过设置代理 IP、User-Agent 和 Cookie 等技术手段,有效提升爬虫策略,实现高效、稳定的爬取。
180 5
捕捉页面的关键元素:用CSS选择器与Puppeteer自动抓取
|
4月前
|
前端开发 JavaScript UED
CSS滚动效果和视差滚动的原理、应用及其对用户体验的影响。从平滑滚动到元素跟随,再到滚动触发动画
本文探讨了CSS滚动效果和视差滚动的原理、应用及其对用户体验的影响。从平滑滚动到元素跟随,再到滚动触发动画,这些效果增强了页面的吸引力和互动性。视差滚动通过不同层次元素的差异化移动,增加了页面的深度感和沉浸感。文章还讨论了实现方法、性能优化及案例分析,旨在为设计师和开发者提供实用指导。
104 7
|
4月前
|
编解码 前端开发 UED
探讨了CSS媒体查询在移动端开发中的应用,介绍了媒体查询的基本概念、常见条件及其在响应式布局、导航菜单、图片优化和字体调整等方面的具体应用
本文深入探讨了CSS媒体查询在移动端开发中的应用,介绍了媒体查询的基本概念、常见条件及其在响应式布局、导航菜单、图片优化和字体调整等方面的具体应用。通过实际案例分析和注意事项的讨论,旨在帮助开发者更好地理解和运用媒体查询,提升移动端用户体验。
87 4
|
4月前
CSS3几何透明层文本悬停变色源码
CSS3几何透明层文本悬停变色源码是一款基于css3 svg制作的背景图片鼠标悬停几何形状透明层变色显示文本内容
27 0
CSS3几何透明层文本悬停变色源码
|
4月前
|
前端开发
CSS 浮动属性讲解和使用
本文介绍了CSS中的浮动(float)属性,包括其基本功能、属性选项及其在网页布局中的应用。浮动使元素脱离文档流,向左或右排列,周围元素随之调整。文章还详细讲解了清除浮动的方法,如使用clear属性、设置父元素高度、利用overflow属性、伪元素等,以解决因浮动导致的布局问题。最后,强调了浮动在创建复杂布局时的作用,并预告后续内容。
83 2
|
4月前
|
前端开发
CSS transition过渡属性详解
本文介绍了CSS中`transition`属性的作用、用法及实例。`transition`用于在元素属性变化时添加平滑过渡动画,通过设置`transition-property`、`transition-duration`、`transition-timing-function`和`transition-delay`等属性值,可以精细控制过渡效果。文末提供了HTML示例代码,展示了如何使用`transition`实现鼠标悬停时背景颜色的平滑变化。
174 1
|
4月前
|
Web App开发 前端开发 iOS开发
css所有缩写属性,CSS属性简写整理
css所有缩写属性,CSS属性简写整理
80 1