【鸿蒙开发从0到1 day02】

css初体验

一.css引入方式

	1.内部样式
		css代码写在style标签里面
		style是在html中的head标签内部
	2,外部样式
		在外部css文件,通过link引入
		link也是在head标签内部


二. 标签选择器

特点:
	-使用标签名作为选择器
	-选择相同的标签名,设置相同的样式

运行结果:

ps: 标签选择器无法对相同标签进行样式差异化设置

三.类选择器

-找到对应标签设置一个class名称
-通过.+类名{
            属性
        }进行样式设置
-可以让不同的标签设置不同的样式,相同类名设置成一致属性
不同类名就可以设置不同的属性
-可以给标签设置多个类名,中间用空格隔开

运行结果:

四. id选择器

作用: 查找标签,差异化设置标签的显示效果
场景: id选择器哦一般配合JavaScript使用,很少用来设置css样式
-定义id选择器--> #id{}
-使用id选择器--> 在标签中加入id="id名"

ps:**同一个id选择器在一个页面中只能使用一次**

运行结果:

五.通配符选择器

通配符*
    *{
        可以清除页面所有标签的一些默认样式
        也可以给所有标签设置相同样式
    }

运行结果:

六.画盒子

运行结果:

七.文字控制属性

字体大小 font-size
	谷歌浏览器字体大小默认是16px
    pc端常用单位px
    p{
        font-size:10px;
    }
    
字体加粗 font-weight(不需要单位)
    400/normal代表不加粗
    700/bold代表加粗
    
字体倾斜 font-style(fs)

运行结果:

行高
行高的组成: 上间距+文字大小+下间距 (上间距和下间距相等
        取值是数字代表的是字体大小的倍数
     	垂直居中: 只需要行高的值和盒子高度的值一致 

运行结果:

文本缩进text-indent : 一般是用来缩进文本
属性值:
	数字+px
	**数字+em (1em = 当前标签的字号大小)**(推荐)
	第二种会随着字体自动变化
	em属于相对单位,相对自己的文字大小进行缩进操作
	1em相当于当前标签内一个文字的大小

运行结果:

文本对齐方式::控制文本的水平对齐方式(text-align)

运行结果:

八.水平对齐方式-图片

**text-align本质是控制内容的对齐方式,属性要设置给内容的父级**
对图片宽度进行设置,图片会等比例缩放

运行结果:

九.文本修饰线

去除a标签颜色 color

去除a标签的下划线 text-decoration: none

删除线 text-decoration: line-through

上划线:text-decoration: overline

下划线L:text-decoration: underline

运行结果:

十.文字颜色取值

我们在开发过程中一般都是使用rgb和十六进制的的表示法

在使用rgb的颜色表示法时,有第四个参数,是可以用来设置背景的透明度的(0-1),0是完全透明,1是不透明

运行结果:

十一.调试工具

首先我们运行代码打开浏览器,可以直接按F12打开开发者工具,点击左上角箭头箭头会变成蓝色,再点击页面出错的地方,查看样式框中是否出错

十二.复合选择器

有两个或多个基础选择器,通过不同方式组合而成

作用:更准确更高效的选择目标标签

1.后代选择器

后代选择器

语法: 父选择器 子选择器{

属性名: 属性值;

}

运行结果:

2.并集选择器

选中多组要设置相同样式的标签,标签之间用逗号相隔

运行结果:

十三.伪类选择器

伪类选择器
表示元素的状态,选中元素的某个状态设置样式
鼠标悬停状态:  选择器:hover{css属性}

作用:鼠标悬停在元素上,元素的样式

运行结果:

鼠标悬停后

十四.css的特性

1.css的继承性

css的继承性 
	文字控制属性可以被继承 
	a标签不会继承父标签的颜色属性 
 	标题标签不能继承父标签的字体大小

运行结果:

2.css的层叠性

特点: 相同的属性会覆盖: 后面的css属性覆盖前面的css属性
	  不同的属性就会叠加,不同的css属性都会生效

运行结果:

3.css的优先级

当一个标签使用了多种选择器时,会根据选择器优先级生效样式
通配符选择器<标签选择器<类选择器<id选择器<行内选择器<!important
	***选择标签的范围越大,优先级越低***

运行结果:

!important优先级\最高

运行结果:

十五.背景图

用图片去装饰页面的背景
background-image:url(图片地址)
图片背景默认会有一个平铺效果
通过background-repeat:no-repeat;使得背景图不平铺

运行结果:

十六.背景图位置

使用background-position:水平方向位置 垂直方向位置

1.可以使用关键字进行设置center right left等等

2.可以使用坐标(数字+px,正负都可以)

水平:正数向右,负数向左

垂直: 正数向下,负数向上

可以只写一个关键字,另一个方向默认为居中

数字只写一个值表示水平方向,垂直方向为居中

运行结果:

十七.背景图的缩放

background-size:

contain:这个是背景图从盒子的左上角开始缩放,当碰到盒子的右边或下面这条边就会停止缩放,导致盒子会留白

运行结果:

cover:这个是只有当盒子被完全覆盖背景图才会停止缩放
,会导致背景图内容被切割

运行结果:

十八.标签的显示模式

块级元素block
	**--h1,p,div,有序(ol li)和无序(ul li)列表,table**
	-独占一行 
	-宽度默认是父级的100%
	-添加宽高属性生效
行内元素
	-span a
	一行可以显示多个
	设置宽高属性不生效
	宽高尺寸有内容撑开
行内块元素inline-block
	一行可以显示多个
	设置宽高属性生效
 	宽高尺寸也可以由内容撑开

块级标签转行内块

运行结果:

行内标签转块级标签

运行结果:

运行结果

十九.总结

相关推荐
Qhumaing9 小时前
html第一个网页
网络·html·html5
fanstuck16 小时前
互联网技术净土?原生鸿蒙开启全新技术征程
华为·harmonyos·鸿蒙·鸿蒙系统
煎饼果子呀16 小时前
css-flex布局属性
开发语言·前端·css·html5
布兰妮甜18 小时前
HTML5:网页开发的新纪元
前端·html·html5
想要成为祖国的花朵19 小时前
Web前端_HTML5(新增type类型)
前端·html·html5
floret*19 小时前
html编写下雪爱心可改字
html5
羊小猪~~19 小时前
前端入门一之HTML知识讲解
前端·javascript·css·前端框架·html·html5
小蘑菇201821 小时前
鸿蒙-promptAction.showToast基于PC屏幕底部提示
harmonyos·鸿蒙
ssslar1 天前
Harmony OS 如何实现 C++ NATIVE YUV420(其他数据格式如BGRA等)自渲染
华为·harmonyos·鸿蒙·openharmony
LCFliu1 天前
13-鸿蒙开发中的综合实战:华为登录界面
前端·华为·harmonyos·鸿蒙·鸿蒙系统