前端学习——CSS

article/2024/3/1 16:30:57

文章目录

  • 1.CSS
    • 1.1什么是CSS
    • 1.2快速入门
    • 1.3.三种CSS导入方式
  • 2.选择器
    • 2.1基本选择器
      • 2.1.1标签选择器
      • 2.1.2类选择器
      • 2.1.3id选择器
    • 2.2层次选择器
      • 2.2.1后代选择器
      • 2.2.2子选择器
      • 2.2.3相邻兄弟选择器
      • 2.2.4通用选择器
    • 2.3结构伪类选择器
    • 2.4属性选择器
  • 3.美化网页元素
    • 3.1span标签
    • 3.2字体样式
    • 3.3文本样式
    • 3.4文本阴影和超链接伪类
    • 3.5列表
    • 3.6背景
    • 3.7渐变

1.CSS

1.1什么是CSS

Cascading Style Sheet层叠级联样式表

在网页中源代码分布如图:

在这里插入图片描述

1.2快速入门

  1. CSS程序文件要规范,尽量做到css和html文件分开,如图:

    在这里插入图片描述

  2. CSS语法:

    选择器{

    声明1;

    声明2;

    声明3;

    }

程序如图:

在这里插入图片描述

css文件单独编写,在html文件中要记得将两个文件进行联系

  1. CSS的优势
  • 内容和表现分离
  • 网页结构表现单一,可以实现复用
  • 样式十分丰富
  • 使用独立于html的css文件
  • 利用SEO,容易被搜索引擎收录

1.3.三种CSS导入方式

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
<!--第二种方式 :内部样式(使用style标签)   --><style>/*该标签内的语法是css语法,注释不再是<!---->*/h1{color: green;}</style>
<!--第三种方式:外部样式--><link rel="stylesheet" href="css/test.css">
</head><body>
<!--第一种方式:行内样式:在标签样式中,编写一个style属性,编写样式即可-->
<h1 style="color: red">我是标题</h1>
</body>
</html>

css文件内容如下:

/*外部样式:创建css文件*/
h1{
color: black;
}

优先级:代码自上而下执行,结果会被覆盖,所以最终标题的颜色为红色,变化过程为绿色—黑色—红色。

拓展:外部样式两种写法:

  1. 链接式
<link rel="stylesheet" href="css/test.css">
  1. 导入式
 <style>@import url("css/style.css")</style>

2.选择器

作用:选择页面上的某个元素或者某一类元素

2.1基本选择器

  1. 标签选择器:选择一类标签 标签{}
  2. 类 选择器 class:选择所有class属性一致的标签,可跨标签 .类名{}
  3. id 选择器:全局唯一 #id名称{}
    优先级:id选择器>类选择器>标签选择器

2.1.1标签选择器

<head><meta charset="UTF-8"><title>Title</title><style>/*标签选择器,会选择到页面上所有这个标签的元素语法:标签名{声明;}*/h1{color: red;}</style>
</head>
<body>
<!--两个都变红-->
<h1>你好</h1>
<h1>你好呀</h1>

2.1.2类选择器

.class的名称{声明;}:将自己想要生成的样式归为一类,在下面标签想要使用的话就在标签头使用class="类名"即可

<head><meta charset="UTF-8"><title>Title</title><style>/*类选择器语法:.class的名称{声明;}好处:可以多个标签归类,是同一个标签就能是同一个样式,可以复用*/.aa{color:red;}.bb{color:green;}</style>
</head>
<body>
<h1 class="aa">你好</h1>
<h1 class="bb">你好呀</h1>
</body>

2.1.3id选择器

#id名称{声明;}:和类选择器是一样的,只不过是用#开头,但是id选择器只能使用一次

<head><meta charset="UTF-8"><title>Title</title><style>/*id选择器:id必须保证全局唯一语法:#id名称{声明;}*/#test{color:red;}</style>
</head>
<body>
<h1 id="test">你好</h1>
</body>

优先级顺序:id选择器 > 类选择器 > 标签选择器

2.2层次选择器

  1. 后代选择器:在某个元素的后面(父代、祖父代…)

  2. 子选择器

  3. 相邻兄弟选择器 同辈

  4. 通用选择器

    body内代码如下:

    <body><p>第一代</p>
    <ul><li><p>第二代</p></li>
    </ul></body>
    

2.2.1后代选择器

某个元素后面的某种标签:body p{声明;}

<style>
/*后代选择器
表示body内的所有p标签背景颜色全部为红色。*/
body p{
background : red;
}
</style>

结果如下:

在这里插入图片描述

2.2.2子选择器

某选择器的子代选择器:body>p{声明;}

<style>
/*子选择器
只有body的子代的p标签背景色才变红,孙代不变*/
body>p{
background : red;
}
</style>

结果如下:

在这里插入图片描述

2.2.3相邻兄弟选择器

某个标签同辈的一个标签

body内部修改为:

<body>
<p>相邻兄弟选择器测试</p>
<p class="cur">当前</p>
<p>第一代</p>
<ul><li><p>第二代</p></li>
</ul></body>

相邻兄弟选择器:

<style>
/*相邻兄弟选择器:只对下面相邻的第一个起作用*/
.cur + p{
background : red;
}
</style>

结果如下:

在这里插入图片描述

2.2.4通用选择器

当前元素所有向下的元素都会改变,仅限同辈。

body内部修改为:

<body>
<p>通用选择器测试</p>
<p class="cur">当前</p>
<p>第一代1号</p>
<p>第一代2号</p>
<ul><li><p>第二代</p></li>
</ul></body>

通用选择器:

<style>
/*通用选择器:当前标签后面同辈的p标签都要变化*/
.cur ~ p{background : red;
}
</style>

结果如下:

在这里插入图片描述

2.3结构伪类选择器

如果想选中li1,则需要使用结构伪类选择器

   	<p>p1</p><p>p2</p><p>p3</p>    <ul><li>li1</li><li>li2</li><li>li3</li></ul>
    <!--避免使用,class,id选择器--><style>/*ul的第一个子元素*/ul li:first-child{background: #a13d30;}/*ul的最后一个子元素*/ul li:last-child{background: red;}/*选中p1:定位到父元素,选择当前的第一个元素选择当前p元素的父级元素,选中父级元素的第一个子元素标签为p的按顺序*/p:nth-child(2){background: blue;}/*选中父元素下的第二个p元素的标签按类型*/p:nth-of-type(1){background: yellow;}a:hover{background: black;}</style>

2.4属性选择器

  • 标签名[所包含的属性] {声明;} :包含该属性(也可以是属性的部分名字)的标签,按照声明来修改样式

  • = 绝对等于

  • *= 包含这个元素

  • ^= 以这个开头

  • $= 以这个结尾

<p class="demo"><a href="http://baidu.com" class="links item first" id="first">1</a><a href="" class="links item active" target="_blank" title="test">2</a><a href="images/123.html" class="links item">3</a><a href="images/123.png" class="links item">4</a><a href="images/123.jpg" class="links item">5</a><a href="abc" class="links item">6</a><a href="/a.pdf" class="links item">7</a><a href="/abc.pdf" class="links item">8</a><a href="abc.doc" class="links item">9</a><a href="abcd.doc" class="links item last">10</a>
</p>
  <style>.demo a{float: left;display: block;height: 50px;width: 50px;border-radius: 10px;background: blue;text-align: center;color: gainsboro;text-decoration: none;margin-right: 5px;font: bold 20px/50px Arial;}/*属性名,属性名 = 属性值(正则)= 绝对等于*= 包含这个元素^= 以这个开头$= 以这个结尾*//*存在id属性的元素:a[]{}*//*a[id]{!*所有带id的a标签*!background: yellow;}*//*id=first的元素*//*a[id=first]{background: blue;}*//*class中包含有links的元素*//*a[class*=links]{background: yellow;}*//*选中href中以http开头的元素*//*a[href^=http]{background: yellow;}*//*选中href中以pdf结尾的*/a[href$=pdf]{background: yellow;}</style>

3.美化网页元素

1、有效的传递网页信息

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

3、凸显页面的主题

4、提高用户的体验

3.1span标签

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

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>#title1{font-size: 50px;}</style>
</head>
<body>
欢迎学习<span id="title1">Java</span>
</body>
</html>

3.2字体样式

  • font-family: 字体
  • font-size: 字体大小
  • font-weight: 字体的粗细
  • color: 字体颜色
  • font: oblique bolder 12px “楷体”;字体风格
    <style>body{font-family:"Arial Black" ,楷体;//设置字体color: #a13d30;}h1{font-size: 50px;}.p1{font-weight: lighter;}</style>

3.3文本样式

1、颜色:color,rgb,rgba

​ 单词:#FFFFFF

​ RGB:0~F ,rgb(0,255,255)

​ RGBA:A(透明度):0~1,rgba(0,255,255,0.9)

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

3、首行缩进:text-indent: 2em;一般用em为单位

4、**行高:**line-height: 100px; 单行文字上下居中:line-height = height

5、下划线:text-decoration: underline ;

6、文本图片水平对齐:vertical-align: middle;

/* 水平对齐~ 参照物, a,b */
<style>img,span{vertical-align: middle;}
</style><p><img src="images/a.png" alt=""><span>abcdefghijklmnabcdefghijklmn</span>
</p>

3.4文本阴影和超链接伪类

超链接伪类:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>/* 默认颜色 */a{text-decoration: none;color: #000000;}/* 鼠标悬浮的颜色 (只需要记住这个)*/a:hover{color: burlywood;font-size: 30px;}/* 鼠标按主未释放的状态 */a:active{color: #008800;}/* 未访问的链接 */a:link{color: maroon;}/* 已访问的链接 */a:visited{color: darkmagenta;}/* text-shadow: 阴影颜色,水平偏移,垂直偏移,阴影半径*/#price{text-shadow: #008800 20px -10px 2px;}</style>
</head>
<body><a href="#"><img src="images/a.jpg" alt="">
</a>
<p><a href="#">码出高校:Java开发手册</a>
</p>
<p><a href="">作者:孤尽老师</a>
</p>
<p id="price">¥99
</p></body>
</html>

文本阴影:

/* text-shadow: 阴影颜色,水平偏移,垂直偏移,阴影半径*/
#price{text-shadow: #008800 20px -10px 2px;
}
/*	第一个参数:表示水平偏移第二个参数:表示垂直偏移第三个参数:表示模糊半径第四个参数:表示颜色
*/
text-shadow:5px 5px 5px 颜色

3.5列表

通过link href链接到css的文件中,就能使用css文件里面编写的样式了

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>列表样式</title><link rel="stylesheet" href="css/style.css" type="text/css">
</head>
<body><div id="nav"><h2 class="title">全部商品分类</h2><ul><li><a href="#">图书</a>&nbsp;&nbsp;<a href="#">音响</a>&nbsp;&nbsp;<a href="#">数字商品</a></li><li><a href="#">家用电器</a>&nbsp;&nbsp;<a href="#">手机</a>&nbsp;&nbsp;<a href="#">数码</a></li><li><a href="#">电脑</a>&nbsp;&nbsp;<a href="#">办公</a></li><li><a href="#">家居</a>&nbsp;&nbsp;<a href="#">家装</a>&nbsp;&nbsp;<a href="#">厨具</a></li><li><a href="#">服饰鞋帽</a>&nbsp;&nbsp;<a href="#">个护化妆</a></li><li><a href="#">礼品箱包</a>&nbsp;&nbsp;<a href="#">中标</a>&nbsp;&nbsp;<a href="#">珠宝</a></li><li><a href="#">食品饮料</a>&nbsp;&nbsp;<a href="#">保健食品</a></li><li><a href="#">彩票</a>&nbsp;&nbsp;<a href="#">旅行</a>&nbsp;&nbsp;<a href="#">充值</a>&nbsp;&nbsp;<a href="#">票务</a></li></ul></div>
</body>
</html>

css文件


#nav{width: 300px;background: darkgrey;
}.title{font-size: 18px;font-weight: bold;text-indent: 1em;line-height: 35px;background: red;
}
/*ul li:无序列表
list-style:none:去掉圆点circle:空心圆decimal:数字spuare:正方形
*/
/*背景颜色*/
ul{background: darkgrey;
}
ul li{height: 30px;list-style: none;text-indent: 1em;
}a{text-decoration: none;font-size: 14px;color: black;
}
a:hover{color: orange;text-decoration: underline;
}

3.6背景

  • 背景图片
    <style>div{width: 1000px;height: 700px;border: 1px solid red;background-image: url("images/tx.jpg");/*默认是全部平铺的 repeat*/}/*平铺方式*/.div1{background-repeat: repeat-x;}.div2{background-repeat: repeat-y;}.div3{background-repeat: no-repeat;}</style>

在文本右边添加箭头箭头:

.title{line-height: 35px;background: red url("../images/c.jpg") 270px 10px no-repeat;
}

3.7渐变

可以去这个网址找渐变的颜色样式:https://www.grabient.com/

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><!--径向渐变,圆形--><style>body{background-color: #FFFFFF;background-image: linear-gradient(66deg, #FFFFFF 0%, #6284FF 50%, #FF0000 100%);}</style>
</head>
<body></body>
</html>

http://www.ngui.cc/article/show-841455.html

相关文章

GPDB OOM问题

前文&#xff0c;我们分析了gp_vmem_protect_limit参数的意义&#xff0c;仅统计gp_malloc中申请的&#xff0c;它并没有统计共享内存的部分&#xff0c;所以仍旧有操作系统OOM的风险&#xff0c;详情&#xff1a;GPDB中gp_vmem_protect_limit参数的意义。但经测试验证&#xf…

《TPM原理及应用指南》学习 —— TPM实体0

本文对应《A Practical Guide to TPM 2.0 — Using the Trusted Platform Module in the New Age of Security》的第8章概述。 CHAPTER 8 TPM Entities —— 第8章 TPM实体 A TPM 2.0 entity is an item in the TPM that can be directly referenced with a handle. The t…

TCP/IP IP地址概念与应用

作者简介&#xff1a;一名在校云计算网络运维学生、每天分享网络运维的学习经验、和学习笔记。 座右铭&#xff1a;低头赶路&#xff0c;敬事如仪 个人主页&#xff1a;网络豆的主页​​​​​​ 目录 前言 一.什么是IP地址 二.IP地址的组成 三.IP地址分类 A类IP地址 …

Flowable进阶学习(五)候选人与候选人组

文章目录一、候选人1. 绘制流程图&#xff0c;导出流程文件&#xff0c;并部署启动流程实例&#xff0c;完成任务处理2. 任务的查询3. 任务的认领拾取&#xff08;领取后不可重复领取&#xff09;4. 任务的归还5. 任务的交接二、候选人组1. 管理用户和组1.1 用户管理 ACT_ID_US…

学习Go的全部网站集合

给Golang 入门新手整理了一份全部所需网站集合&#xff0c;主要分为三类。 社区类&#xff1a;这类网站是问答、文档、搜索、资源类网站汇总 镜像和安装包类&#xff1a;有些安装包可能无法下载&#xff0c;此处列出一些可下载Go包和镜像的网站。 开发工具&#xff1a;目前流…

【Ubuntu】Nacos 2.1 单机安装

目录Nacos 2.1 单机安装1. 从GitHub下载2.1.0的压缩包2. 解压与配置3. 数据库配置4. 单机启动nacos遇到的一些错误ErrMsg:jmenv.tbsite.netlibstdc.so.6: cannot open shared object file: No such file or directoryCaused by: java.lang.IllegalStateException: No DataSourc…

Coolify系列01- 从0到1超详细手把手教你上手Heroku 和 Netlify 的开源替代方案

什么是Coolify 一款超强大的开源自托管 Heroku / Netlify 替代方案coolLabs是开源、自托管和以隐私为中心的应用程序和服务的统称 为什么使用Coolify 只需单击几下即可托管你的应用、数据库或其他开源服务&#xff0c;等。它是 Heroku 和 Netlify 的一个替代方案。通过 Cool…

Java基础 Stream流方法引用异常文件

Stream流 引例 需求&#xff1a;按照下面要求完成集合的创建和遍历 创建一个集合&#xff0c;存储多个字符串元素 1. 把所有以“曹”开头的元素存储到新集合中 2. 把曹开头&#xff0c;长度为3的元素存储到新集合中 List<String> list List.of("曹操", "…

恶意代码分析实战 5 分析恶意Windows程序

1 Lab07-01 本次实验分析lab07-01.exe,lab07-02.exe,先来看lab07-01.exe的问题 问题 计算机重启后&#xff0c;这个程序如何确保它继续运行&#xff08;达到持久化驻留&#xff09; 首先&#xff0c;查看导入函数。 OpenSCManagerA和CreateServiceA函数暗示着这个恶意代码…

手把手教你写一个极简版Netty

目录前言BIO版本NIO版本mini-netty版本v1&#xff1a;Reactor线程模型mini-netty版本v2&#xff1a;任务处理总结前言 Netty如今是使用最广泛的网络通信框架&#xff0c;许多人对此有强烈的学习需求。但是Netty本身代码量大、概念众多&#xff0c;单纯看代码学习容易一头雾水&…