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

相关文章
|
4月前
|
前端开发 JavaScript 算法
【CSS】前端三大件之一,如何学好?从基本用法开始吧!(八):学习transition过渡属性;本文学习property模拟、duration过渡时间指定、delay时间延迟 等多个参数
transition过渡属性 早期在Web中要实现动画效果,都是依赖于JavaScript或Flash来完成。 但在CSS3中新增加了一个新的模块transition,它可以通过一些简单的CSS事件来触发元素的外观变化, 让效果显得更加细腻。简单点说,就是通过鼠标经过、获得焦点,被点击或对元素任何改变中触发, 并平滑地以动画效果改变CSS的属性值。 在CSS中创建简单的过渡效果可以从以下几个步骤来实现: 在默认样式中声明元素的初始状态样式; 声明过渡元素最终状态样式,比如悬浮状态; 在默认样式中通过添加
277 0
|
4月前
|
前端开发 JavaScript 算法
【CSS】前端三大件之一,如何学好?从基本用法开始吧!(七):学习ransform属性;本文学习 rotate旋转、scale缩放、skew扭曲、tanslate移动、matrix矩阵 多个参数
transform变形 css3在原来的基础上新增了变形和动画相关属性,通过这些属性可以实现以前需要大段JavaScript才能实现的 功能。 CSS3的变形功能可以对HTML组件执行位移、旋转、缩放、倾斜4种几何变换,这样的变换可以控制HTML组件 呈现出丰富的外观。 借助于位移、旋转、缩放、倾斜这4种几何变换,CSS3提供了transition动画。 transition动画比较简单,只要指定HTML组件的哪些CSS属性需要使用动画效果来执行变化,并指定动画时间,就可保证动画播放。 比transitio
245 1
|
4月前
|
前端开发 算法 Java
(CSS)使用Flex布局,帮助你快速了解各种基本的Flex布局属性以及帮你让元素快速达到布局中的指定位置!
(CSS)使用Flex布局,帮助你快速了解各种基本的Flex布局属性以及帮你让元素快速达到布局中的指定位置!
169 1
|
4月前
|
前端开发 算法 Java
【CSS】前端三大件之一,如何学好?从基本用法开始吧!(二):CSS伪类:UI伪类、结构化伪类;通过伪类获得子元素的第n个元素;创建一个伪元素展示在页面中;获得最后一个元素;处理聚焦元素的样式
伪类:伪类这个叫法源自于它们跟类相似,但实际上并没有类会附加到标记中的标签上。 伪类分为两种(以及新增的伪类选择器): UI伪类:会在HTML元素处于某种状态时(例如:鼠标指针位于连接上),为该元素应用CSS样式。 :hover 结构化伪类:会在标记中存在某种结构上的关系时 例如: 某元素是一组元素中的第一个或最后一个,为该元素应用CSS样式。 :not和:target(CSS3新增的两个特殊的伪类选择器)
336 1
|
4月前
|
前端开发 算法 Java
【CSS】前端三大件之一,如何学好?从基本用法开始吧!(五):背景属性;float浮动和position定位;详细分析相对、绝对、固定三种定位方式;使用浮动并清除浮动副作用
position定位(核心) 我们讲盒模型的时候,提到了3个属性可以用来控制页面排版。 三大属性:position属性,display属性,float属性。 position 属性控制页面上元素间的位置关系。 display 属性控制页面元素是否显示或者是堆叠还是并排显示。 float 属性提供控制方法。 通过float这种控制方法,可以实现多栏布局,导航菜单等等。 position属性是干嘛用的?怎么用?有哪些属性值? position属性控制页面上元素间的位置关系,也就是排版。 怎么用?要知道怎么用
512 0
|
4月前
|
前端开发 算法 Java
【CSS】前端三大件之一,如何学好?从基本用法开始吧!(三):元素继承关系、层叠样式规则、字体属性、文本属性;针对字体和文本作样式修改
继承 我们的CSS中很多的属性也是可以继承的,其中相当一部分是跟文字的相关的,比如说颜色、字体、字号。 当然还有一部分是不能继承的。 例如边框、内外边距。 层叠 层叠是CSS的核心机制。 层叠的工作机制: 当元素的同一个样式属性有多种样式值的时候,CSS就是靠层叠机制来决定最终应用哪种样式。 层叠规则: 层叠规则一:找到应用给每个元素和属性的声明。 说明:浏览器在加载每个页面时,都会据此查找到每条CSS规则, 并标识出所有受到影响的HTML元素。
168 0
|
7月前
|
自然语言处理 前端开发 JavaScript
Playwright系列课(2) | 元素定位四大法宝:CSS/文本/XPath/语义化定位实战指南
本文是Playwright系列第二课,详解元素定位四大核心技术:CSS选择器、文本定位、XPath和语义化定位,结合实战演示各方法应用场景。重点解析Playwright智能定位器(Locator)的独特优势——自动等待与重试机制,通过预检元素可操作性(可见/可点击)有效规避网络延迟导致的脚本失效,显著提升自动化测试稳定性。
|
Web App开发 前端开发 容器
CSS进阶: 选择器进阶、背景相关属性、元素显示模式、CSS特性
CSS进阶: 选择器进阶、背景相关属性、元素显示模式、CSS特性
296 1
|
8月前
|
存储 自然语言处理 前端开发
抖音快手小红书虚拟评论截图生成器,模拟对话制作工具,html+js+css
这是一款纯前端实现的多平台虚拟评论生成器,支持抖音、快手、小红书风格,适用于产品演示与UI设计。采用Vanilla JS与Flexbox布局,利用IndexedDB存储数据,CSS Variables切换主题。