CSS学习|css三种导入方式、基本选择器、层次选择器、结构伪类选择器、属性选择器、字体样式、文本样式

第一个css程序

css程序都是在style标签中书写

打开该网页,可以看到h1标签中的我是标题被渲染成了红色

可以在同级目录下创建一个css目录,专门存放css文件,可以和html分开编写

然后在html页面中,利用link标签以及css文件地址,将该css文件引入html中,达到上述同样效果

也可用下述import方式引入外部的css文件

css的优势:

1、内容和表现分离

2、网页结构表现统一,可以实现复用

3、样式十分的丰富

4、建议使用独立于html的css文件

css三种导入方式

1.内部样式:在页面中用style标签中写css样式

2.行内样式:在标签元素中直接用style属性编写样式

3.外部样式:在外部css目录中编写css文件,再用上述link标签引入css样式

如果这多个css样式对同一个内容进行渲染,则采取就近原则进行生效,谁离渲染内容近,用谁渲染

css选择器

基本选择器

1、标签选择器

标签选择器,会选择到页面上所有的这个标签的元素

2、类选择器 class

类选择器的格式.class的名称{}

好处,可以多个标签归类,是同一个class,可以复用

3、ld 选择器

id选择器 #id名称{} id必须保证全局唯一

优先级:不遵循就近原则,固定的id选择器>class 选择器 > 标签选择器

层次选择器

1、后代选择器(在某个元素的后面祖爷爷 爷爷 爸爸 你)

在body标签下的所有p标签,不分层次级别

2、子选择器(一代 儿子)

在body标签下面的第一代p标签,因为无序列表里的p标签为第二级的标签,故不在范围内,不渲染

3、相邻兄弟选择器(相邻向下的一个)

active类标签的向下一个,的同级p标签渲染

4、通用选择器

通用兄弟选则器,当前选中元素的向下的所有兄弟元素

选中active类下的所有同级p标签元素

结构伪类选择器

ul的第一个子元素,ul的最后一子元素

选择当前p元素的父级元素,选中父级元素的第2个,并且是当前元素才生效!

属性选择器(常用)

先通过后代选择器,将demo类标签下的所有a标签元素渲染

a标签中存在id属性的元素a[id]{}

a标签中,id=first的元素被渲染成黄色

a标签中class属性包含links的元素被渲染, class*="links"

a标签中href属性以http开头的元素被渲染 a[href^=http]{}

a标签中href属性以pdf结尾的元素被渲染a[href$=pdf]{}

美化网页元素

为什么要美化网页

1、有效的传递页面信息,凸显页面的主体

2、美化网页,页面漂亮,才能吸引用户

3、凸显页面的主题

4、提高用户的体验

span标签

span标签:重点要突出的字,使用 span 套起来

字体样式

font-family:字体

font-size:字体大小

font-weight:字体粗细

color:字体颜色

文本样式

颜色 color rgb rgba

text-align :排版,居中

text-indent:2em;段落首行缩进

行高,和 块的高度一致,就可以上下居中

装饰 text-decoration

text-decoration:none;可以让a标签的文本内容中的下划线消失

鼠标悬浮的颜色,鼠标悬浮在a标签的文本内容上时,显示为橙色

a: hover

鼠标按住未释放的状态,a:active,鼠标选中不放手,a标签文本内容显示为绿色

相关推荐
林涧泣3 分钟前
【Uniapp-Vue3】下拉刷新
前端·vue.js·uni-app
luoganttcc1 小时前
华为升腾算子开发(一) helloword
java·前端·华为
九月十九2 小时前
AviatorScript用法
java·服务器·前端
Ronin-Lotus2 小时前
上位机知识篇---ROS2命令行命令&静态链接库&动态链接库
学习·程序人生·机器人·bash
Kasper01213 小时前
认识Django项目模版文件——Django学习日志(二)
学习·django
_.Switch3 小时前
Python Web开发:使用FastAPI构建视频流媒体平台
开发语言·前端·python·微服务·架构·fastapi·媒体
菜鸟阿康学习编程3 小时前
JavaWeb 学习笔记 XML 和 Json 篇 | 020
xml·java·前端
索然无味io4 小时前
XML外部实体注入--漏洞利用
xml·前端·笔记·学习·web安全·网络安全·php
一弓虽4 小时前
java基础学习——jdbc基础知识详细介绍
java·学习·jdbc·连接池
ThomasChan1234 小时前
Typescript 多个泛型参数详细解读
前端·javascript·vue.js·typescript·vue·reactjs·js