CSS基础入门，导入方式，选择器
2024-06-10 07:08:55
CSS基础入门
本博客为视频学习笔记
原视频作者：狂神
原视频地址：https://www.bilibili.com/video/BV1YJ411a7dy?p=2
1 了解CSS
1.1 如何学习css
- css是什么
- css怎么用（快速入门）
- css选择器，重难点
- 美化网页（文字，阴影，超链接，列表，渐变…）
- 盒子模型
- 浮动
- 定位
- 网页动画（特效效果）
1.2 什么是CSS
- Cascading Style Sheet 层叠级联样式表
- CSS：表现层，美化网页，字体，颜色，边距，高度，宽度，背景图片，网页浮动。。。
- CSS是Cascading Style Sheet的缩写，是一种叫做样式表（stylesheet）的技术。也有的人称之为层叠样式表（Cascading Stylesheet）。
CSS主要用来设计网页的样式，美化网页；它不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。
CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。
在主页制作时采用CSS技术，可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。
只要对相应的代码做一些简单的修改，就可以改变同一页面的不同部分，或者页数不同的网页的外观和格式。
它的作用可以达到：
- 在几乎所有的浏览器上都可以使用。
- 以前一些非得通过图片转换实现的功能，现在只要用CSS就可以轻松实现，从而更快地下载页面。
- 使页面的字体变得更漂亮，更容易编排，使页面真正赏心悦目。
- 可以轻松地控制页面的布局 。
- 可以将许多网页的风格格式同时更新，不用再一页一页地更新了。你可以将站点上所有的网页风格都使用一个CSS文件进行控制，只要修改这个CSS文件中相应的行，那么整个站点的所有页面都会随之发生变动。
1.3 CSS发展史
CSS1.0
CSS2.0 DIV（块）+CSS，html与css结构分离的思想，网页变得简单
CSS2.1 浮动，定位
CSS3.0 圆角边框，阴影，动画。。。浏览器兼容性
1.4 CSS优势
- 内容和表现分离
- 网页结构表现统一，可以实现复用
- 样式十分丰富
- 建议使用独立于html的css文件
- 容易被搜索引擎收录
2 CSS的导入方式
遵循就近原则
- 内部样式
<style>h1{color: red;} </style> - 外部样式
- 链接式
<link rel="stylesheet" href="css/style.css">- 导入式
@import 是CSS2.1 特有的
<style>@import url("css/style.css"); </style> - 行内样式
<h1 style="color: red">我是标题</h1>
3 选择器
作用：选择页面上的某一个或者某一类元素
3.1 基本选择器
- 标签选择器：选择同类型的标签 标签{}
<style>/*标签选择器,会选择页面上所有的这个标签的元素*/h1{color: red;background: antiquewhite;border-radius: 24px;}p{font-size: 80px;}</style>
- 类选择器：选择所以class一致的标签，跨标签
<style>/*类选择器的格式 .class的名称{}好处:可以多个标签归类,是同一个class*/.hhb{color: blue;}.kb{color: red;}</style>
- id 选择器：全局唯一
<style>/*ID选择器格式 :id必须保证全局唯一#id名称{}*/#hhb{color: chartreuse;}.kb{color: aqua;}</style>
不遵循就近原则
优先级：id选择器>class选择器>标签选择器
3.2 层次选择器
- 后代选择器
某个标签下的所有子标签以及子标签的子标签，有递归效果
/*后代选择器*/
body p{background: red;}
- 子选择器
仅有该标签下的一代子标签，无递归效果
/*子选择器*/body>p{background: aqua;
}
- 相邻兄弟选择器 同辈
/*相邻兄弟选择器 ,只有一个,相邻(向下)*/
.active + p{background: blueviolet;
}
- 通用选择器
/*通用兄弟选择器 ,当前元素的向下所有兄弟元素*/
.active~p{background: blueviolet;
}
3.3 结构 伪类选择器
伪类：条件
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>/*ul的第一个子元素*/ul li:first-child{background: chartreuse;}/*ul的最后一个子元素*/ul li:last-child{background: cornflowerblue;}/*选中p1 p:nth-child(2)定位到当前p元素的父元素,选择父元素下的第二个元素,并且是当前元素类型(p)才有效*/p:nth-child(2){color: chartreuse;}/* p:nth-of-type(2)定位父元素,选择父元素下的第二个当前元素类型 (p标签)*/p:nth-of-type(2){background: red;}</style>
</head>
<body><h1>h1</h1>
<p>p1</p>
<p>p2</p>
<p>p3</p>
<ul><li>li1</li><li>li2</li><li>li3</li>
</ul></body>
</html>
网页效果图
3.4 属性选择器（常用）
= 等于
*= 包含
^= 以这个开头
$= 以这个结尾
结合了id+class的使用
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>.demo a{float: left;display: block;height: 50px;width: 50px;border-radius: 10px;background: cornflowerblue;text-align: center;color: beige;text-decoration: none;margin-right: 5px;font: bold 20px/50px Arial;}/* 存在id属性的元素 */a[id]{background: red;}/* id为one 的属性[属性名=属性值] 可以用正则表达式*/a[id=one]{background: chartreuse;}/* class中有 links的元素[属性名=属性值] 可以用正则表达式= 绝对等于*= 通配^= 以这个开头$= 以这个结尾*/a[class*="links"]{background: black;}/* 选择 href 以 https 开头的元素正则表达式*/a[href^=https]{background: yellow;}/* href以pdf结尾的 */a[href$=pdf]{background: deeppink;}</style>
</head>
<body>
<p class="demo"><a href="" id="one">0</a><a href="https://www.baidu.com" id="">0</a><a href="http://www.baidu.com" class=" 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=" item">7</a><a href="/abc.pdf" class=" item">8</a><a href="abc.doc" class="links item">9</a><a href="abcd.doc" class="links item last">10</a>
</p>
</body>
</html>
网页效果
4 美化网页元素
4.1 为什么要美化网页
- 有效地传递页面信息
- 美化网页，吸引用户
- 凸显页面的主题
- 提高用户的体验
span标签
span标签：重点要突出的字，使用span套起来。使用什么名字标签都行，约定使用span标签
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>#java{font-size: 50px;}</style></head>
<body>
<p>欢迎学习<span id="java">java</span>
</p></body>
</html>
网页效果
4.2 字体样式
<!--font-family：字体font-size：字体大小font-weight:字体粗细color: 字体颜色--><style>body{font-family: Arial,楷体;color: chocolate;}h1{font-size: 50px;}.p1{font-weight: bold;}</style>
4.3 文本样式
- 颜色：color，RGB,RGBA
- 对齐方式：text-align = “center” 水平居中
- 首行缩进：text-indent：2em
- 行高：line-height，单行文字上下居中 ，line-height=height
- 装饰：text-decoration：underline，line-through，overline
- 文本图片水平对齐：vertical-align：middle
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><!--颜色：单词RGB :R:redG:greenB:blueRGBAA：透明度text-align:排版text-indent: 2em; 首行缩进两个字行高line-height和 块的高度 height 一致就可以上下居中\line-height: 30px;height: 30px;--><style>h1{color: rgba(0,255,255,1);text-align: center;}.p1{text-indent: 2em;}.p3{background: aqua;line-height: 30px;height: 30px;}/*下划线中划线上划线*/.one{text-decoration: underline;}.two{text-decoration: line-through;}.three{text-decoration: overline;}</style></head>
<body>
<p class="one">123123</p>
<p class="two">123123</p>
<p class="three">123123</p><h1>故事介绍</h1><p class="p1">平静安详的元泱境界，每隔333年，总会有一个神秘而恐怖的异常生物重生，它就是魁拔！魁拔的每一次出现，都会给元泱境界带来巨大的灾难！即便是天界的神族，也在劫难逃。在天地两界各种力量的全力打击下，魁拔一次次被消灭，但又总是按333年的周期重新出现。魁拔纪元1664年，天神经过精确测算后，在魁拔苏醒前一刻对其进行毁灭性 打击。但谁都没有想到，由于一个差错导致新一代魁拔成功地逃脱了致命一击。很快，天界魁拔司和地界神圣联盟均探测到了魁拔依然生还的迹象。因此，找到魁拔，彻底消灭魁拔，再一次成了各地热血勇士的终极目标。</p><p>在偏远的兽国窝窝乡，蛮大人和蛮吉每天为取得象征成功和光荣的妖侠纹耀而刻苦修炼，却把他们生活的村庄搅得鸡犬不宁。村民们绞尽脑汁把他们赶走。一天，消灭魁拔的征兵令突然传到窝窝乡，村长趁机怂恿蛮大人和蛮吉从军参战。然而，在这个一切都凭纹耀说话的世界，仅凭蛮大人现有的一块冒牌纹耀，不要说参军，就连住店的资格都没有。受尽歧视的蛮吉和蛮大人决定，混上那艘即将启程去消灭魁拔的巨型战舰，直接挑战魁拔，用热血换取至高的荣誉。
</p><p class="p3">I just wish someday and somehow，We can be back together， Together we'll stay，Always and forever。
</p></body>
</html>
网页效果
4.4 阴影
/*text-shadow: 阴影颜色，水平偏移，垂直偏移，阴影半径*/
#price{text-shadow:#33cccc 3px 3px 2px ;
}
4.5 超链接伪类
正常情况下，a，a：hover
/*默认的颜色*/
a{text-decoration: none;color: #000000;
}
/*鼠标悬浮的状态*/
a:hover{color: chocolate;font-size: 30px;
}
4.6 列表
html：
<!DOCTYPE html>
<html lang="en">
<head lang="en"><meta charset="UTF-8"><title>列表样式</title><link href="css/style.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div id="nav"><h2 class="title">全部商品分类</h2><ul><li><a href="#">图书</a> <a href="#">音像</a> <a href="#">数字商品</a></li><li><a href="#">家用电器</a> <a href="#">手机</a> <a href="#">数码</a></li><li><a href="#">电脑</a> <a href="#">办公</a></li><li><a href="#">家居</a> <a href="#">家装</a> <a href="#">厨具</a></li><li><a href="#">服饰鞋帽</a> <a href="#">个护化妆</a></li><li><a href="#">礼品箱包</a> <a href="#">钟表</a> <a href="#">珠宝</a></li><li><a href="#">食品饮料</a> <a href="#">保健食品</a></li><li><a href="#">彩票</a> <a href="#">旅行</a> <a href="#">充值</a> <a href="#">票务</a></li></ul>
</div>
</body>
</html>
css:
#nav{width: 300px;background: grey;
}.title{font-size: 18px;font-weight: bold;text-indent: 1em;line-height: 30px;background: red;
}ul{background: grey;
}
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;
}
网页效果：
5、 盒子模型
5.1 什么是盒子模型
margin：外边距
padding：内边距
border：边框
5.2 边框
- 边框的粗细
- 边框的样式
- 边框的颜色
css
html
效果
CSS基础入门，导入方式，选择器相关推荐
- html间隔代码_HTML+CSS基础入门开发，经典Loading加载缩放动画特效
大家好,本篇文章分享经典Loading加载缩放动画特效,欢迎参考和指正. 效果图: Loading加载缩放动画特效 HTML代码: CSS代码: 知识点: animation:是CSS3的动画属性,这 ...
- CSS基础选择器之标签选择器(CSS、HTML)
CSS基础选择器之标签选择器(CSS.HTML) <!DOCTYPE html> <html lang="en"> <head><meta ...
- CSS基础知识---三种选择器
CSS基础知识---三种选择器 选择器 标签选择器 id选择器 class选择器 全部代码 选择器 标签选择器 id选择器 class选择器 标签选择器 选择器优先级:id>class>标 ...
- CSS 导入方式 选择器
一:基本了解 1.CSS,Cascading Style Sheet 层叠级联样式表 2.优势: 使得网页内容和表现样式分离 使得网页结构表现形式统一,可以实现复用 二:HTML中四种CSS导入方式 ...
- HTML及CSS基础入门：web前端基础，看这一篇就够了
写在开头:这是一篇有关于HTTP和CSS的基础入门教程.你也可以将他当作一本字典,因为我将所有可能用到的语法结构全部设置了标题,你只需要点击标题即可跳转过去.同时,我在最后放置了两个CSS实战,以供读 ...
- CSS之iconfont导入方式
一. 阿里巴巴iconfont导入方式 阿里巴巴iconfont 网址:https://www.iconfont.cn/ 方法一:font-class引入 在图标库中找好自己想要的目标icon,添加至 ...
- CSS基础（3）- 选择器
本系列笔记是基于[渡一教育]袁进老师的html+css基础课程而记录,仅作为个人记录以及阅读使用. 文章目录 选择器 简单选择器 选择器的组合 选择器的并列 参考资料 选择器 选择器:帮助你精准的选中 ...
- CSS基础入门（详细总结笔记）
目录 1.CSS介绍 2.CSS引入方式 2.1.行内样式 2.2.内联样式 2.3.外联样式 2.4.样式的优先级 2.5.样式选择 3.CSS选择器 3.1.基本选择器 3.2.属性选择器 3.3 ...
- web前端学习day_02:CSS:三种使用方式/选择器/颜色/背景图片/查看样式/文本/元素显示方式/盒子模型/定位方式/行内对齐/显示层级/防溢出
CSS : Cascading Style Sheet 层叠样式表. 作用: 美化页面 CSS 如何在html页面中添加css样式代码?总共有三种方式: 1.选择器 2.选择器练习: 3.颜色赋值 4 ...
最新文章
- 想转行学软件测试要注意哪些问题
- ASP.NET Core Web Razor Pages系列教程六：添加搜索功能
- Linux之交互式scripts
- 天弘余额宝4月10日起全面解除限购，你还会选择天弘余额宝吗？
- 深刻理解Servlet运行机制和生命周期
- 模板消息 php实例,PHP微信模板消息操作示例
- 【转】HTTP协议之multipart/form-data请求分析
- legend2---开发日志4（常用的链接传值方式有哪些）
- 时间字段加一秒_面试Java后端却问我时间轮（Time Wheel）算法，面试官没想到我看过Dubbo源码！...
- IEC61850 总结
- 差分GPS-RTK-千寻
- CSR8615蓝牙芯片功能调试入门笔记------ 下
- 结果导向的前提是过程控制
- 大二下学期ACM比赛总结
- oracle判断日期为月末,ORACLE查询月初和月底时间
- 图片转化为字符画——get!小技巧【美人图，动物照，有趣注释图案】
- win10触摸键盘TabTip软件特性
- 使用二维数组和函数解决八皇后问题（c++）
- Win10自带的CPU和RAM资源仪表板
- java webclient_Spring Boot（14）——使用WebClient