建设网站那个公司好,网站开发后台技术,太原建网站,网站开发模板代码学习来源#xff1a;尚硅谷前端htmlcss零基础教程#xff0c;2023最新前端开发html5css3视频 系列笔记#xff1a; 【HTML4】#xff08;一#xff09;前端简介【HTML4】#xff08;二#xff09;各种各样的常用标签【HTML4】#xff08;三#xff09;表单及HTML4收尾… 学习来源尚硅谷前端htmlcss零基础教程2023最新前端开发html5css3视频 系列笔记 【HTML4】一前端简介【HTML4】二各种各样的常用标签【HTML4】三表单及HTML4收尾【CSS2】四CSS基础及CSS选择器【CSS2】五CSS三大特性及常用属性【CSS2】六CSS盒子模型【CSS2】七浮动【CSS2】 八定位与布局【实操】 九尚品汇实操练习【HTML5】 十HTML5简介及相关新增属性【CSS3】 十一CSS3简介及基本语法上| 相关新增属性【CSS3】 十二CSS3简介及基本语法中| 变换、过渡与动画【CSS3】 十三CSS3简介及基本语法下| 伸缩盒模型 文章目录 CSS3简介CSS3概述CSS3私有前缀 CSS3基本语法CSS3新增长度单位CSS3新增颜色设置方式CSS3新增选择器CSS3新增盒模型相关属性⭐️box-sizing怪异盒模型⭐️resize调整盒子大小⭐️box-shadow盒子模型⭐️opacity不透明度 CSS3新增背景属性⭐️background-origin⭐️background-clip⭐️background-size⭐️background复合属性⭐️多背景图 CSS3新增边框属性⭐️边框圆角⭐️边框外轮廓 CSS3新增文本属性⭐️文本阴影⭐️文本换行⭐️文本溢出⭐️文本修饰⭐️文本描边 CSS3新增渐变⭐️线性渐变⭐️径向渐变⭐️重复渐变⭐️渐变小案例 web字体⭐️基本用法⭐️定制字体⭐️字体图标 ⭐️前文回顾前端 | 十HTML5简介及相关新增属性 | 尚硅谷前端htmlcss零基础教程2023最新 ⭐️前文对应p160-p170本文对应p171-p178 ⭐️补充网站W3schoolMDN CSS3简介
CSS3概述 CSS3私有前缀 CSS3基本语法
CSS3新增长度单位 !DOCTYPE html
html langzh-CN
headmeta charsetUTF-8title新增长度单位/titlestyle* {margin: 0;padding: 0;}.box1 {width: 200px;height: 200px;background-color: deepskyblue;}.box2 {width: 20vw;height: 20vh;background-color: green;}.box3 {width: 20vmax;height: 20vmin;background-color: orange;}/style
/head
bodydiv classbox1像素/divdiv classbox2vw和vh/divdiv classbox3vmax/div
/body
/htmlCSS3新增颜色设置方式 前端 | 五CSS三大特性及常用属性 | 尚硅谷前端htmlcss零基础教程2023最新 CSS3新增选择器 前端 | 四CSS基础及CSS选择器 | 尚硅谷前端htmlcss零基础教程2023最新 CSS3新增盒模型相关属性
⭐️box-sizing怪异盒模型 !DOCTYPE html
html langzh-CN
headmeta charsetUTF-8titlebox-sizing/titlestyle.box1 {width: 200px;height: 200px;background-color: deepskyblue;padding: 5px;border: 5px solid black;margin-bottom: 20px;}.box2 {width: 200px;height: 200px;background-color: gray;padding: 5px;border: 5px solid black;box-sizing: border-box;}/style
/head
bodydiv classbox1/divdiv classbox2/div
/body
/html⭐️resize调整盒子大小 实际开发中有什么意义嘛好像没有 了解一下~ resize必须和overflow配合 !DOCTYPE html
html langzh-CN
headmeta charsetUTF-8titleresize/titlestyle.box1 {width: 400px;height: 400px;background-color: orange;resize: both;overflow: scroll;}.box2 {width: 800px;height: 600px;background-color: skyblue;}/style
/head
bodydiv classbox1div classbox2看右下角可以调整大小/div/div
/body
/html⭐️box-shadow盒子模型 !DOCTYPE html
html langzh-CN
headmeta charsetUTF-8titlebox-shadow/titlestyle.box1 {width: 400px;height: 400px;background-color: orange;margin: 0 auto;margin-top: 100px;font-size: 40px;/* 写两个值含义水平位置 垂直位置 *//* box-shadow: 10px 10px; *//* 写三个值含义水平位置 垂直位置 阴影的颜色 *//* box-shadow: 10px 10px blue; *//* 写三个值含义水平位置 垂直位置 模糊程度 *//* box-shadow: 10px 10px 20px; *//* 写四个值含义水平位置 垂直位置 模糊程度 阴影颜色 *//* box-shadow: 10px 10px 20px blue; *//* 写五个值含义水平位置 垂直位置 模糊程度 外延值 阴影颜色 *//* box-shadow: -10px -10px 20px 10px blue; *//* 写六个值含义水平位置 垂直位置 模糊程度 外延值 阴影颜色 内阴影 *//* box-shadow: 10px 10px 20px 10px blue inset; */position: relative;top: 0;left: 0;transition: 0.4s linear all ;}.box1:hover {box-shadow: 0px 0px 20px black;top: -1px;left: 0;}/style
/head
bodydiv classbox1你好啊/div
/body
/html⭐️opacity不透明度 !DOCTYPE html
html langzh-CN
headmeta charsetUTF-8titleopacity/titlestyle.box1 {position: relative;}h1 {position: absolute;top: 100px;left: 0;background-color: black;color: white;width: 400px;line-height: 100px;text-align: center;font-size: 40px;opacity: 0.5;}/style
/head
bodydiv classbox1img src../images/你瞅啥.jpg alth1你瞅啥/h1/div
/body
/htmlCSS3新增背景属性
⭐️background-origin !DOCTYPE html
html langzh-CN
headmeta charsetUTF-8title01_background-origin/titlestyle.box1 {width: 400px;height: 400px;background-color: skyblue;margin: 0 auto;font-size: 40px;padding: 50px;border: 50px dashed pink;color: white;background-image: url(../images/bg01.jpg);background-repeat: no-repeat;/* 从border区域开始 */background-origin: border-box;}/style
/head
bodydiv classbox1你好啊/div
/body
/html⭐️background-clip !DOCTYPE html
html langzh-CN
headmeta charsetUTF-8titlebackground-clip/titlestyle.box1 {width: 400px;height: 400px;line-height: 400px;background-color: skyblue;margin: 0 auto;font-size: 125px;font-weight: bold;padding: 50px;border: 50px dashed pink;color: transparent;background-image: url(../images/bg02.jpg);background-repeat: no-repeat;background-origin: border-box;/* 好好看的效果 *//* 无论是背景的颜色还是背景图片都受此元素指挥 *//* 前提是文字颜色设置为透明色 */-webkit-background-clip: text;}/style
/head
bodydiv classbox1你好啊/div
/body
/html⭐️background-size !DOCTYPE html
html langzh-CN
headmeta charsetUTF-8title03_background-size/titlestyle.cover_like {width: 400px;height: 400px;border: 1px solid black;background-image: url(../images/bg03.jpg);background-size: cover;}.contain_like{width: 400px;height: 400px;border: 1px solid black;background-image: url(../images/bg03.jpg);background-size: contain;}/style
/head
bodydiv classcover_like/divhrdiv classcontain_like/div
/body
/html⭐️background复合属性 !DOCTYPE html
html langzh-CN
headmeta charsetUTF-8title04_background复合属性/titlestyle.box1 {width: 400px;height: 400px;margin: 0 auto;font-size: 40px;padding: 50px;border: 50px dashed rgba(255, 0, 0, 0.7);/* background: 背景颜色 背景url 是否重复 位置 / 大小 原点 裁剪方式; */background:skyblue url(../images/bg03.jpg) no-repeat 10px 10px / 500px 500px border-box content-box;}/style
/head
bodydiv classbox1你好啊/div
/body
/html⭐️多背景图
CSS3允许元素设置多个背景图片
!DOCTYPE html
html langzh-CN
headmeta charsetUTF-8title多背景图/titlestylediv {width: 400px;height: 400px;border: 1px solid black;background: url(../images/bg-lt.png) no-repeat left top,url(../images/bg-rt.png) no-repeat right top,url(../images/bg-lb.png) no-repeat left bottom,url(../images/bg-rb.png) no-repeat right bottom;}/style
/head
bodydiv/div
/body
/htmlCSS3新增边框属性
⭐️边框圆角 !DOCTYPE html
html langzh-CN
headmeta charsetUTF-8title01_边框圆角/titlestylediv {width: 400px;height: 400px;border: 2px solid black;margin: 0 auto;border-radius:100px;}/style
/head
bodydiv/div
/body
/html⭐️边框外轮廓 !DOCTYPE html
html langzh-CN
headmeta charsetUTF-8title边框外轮廓/titlestyle.box1 {width: 400px;height: 400px;padding: 10px;border: 10px solid black;background-color: gray;font-size: 40px;margin: 0 auto;margin-top: 100px;/* 外轮廓与边框的距离 */outline-offset: 30px;/* 复合属性 */outline:20px solid orange;}/style
/head
bodydiv classbox1你好啊/div
/body
/htmlCSS3新增文本属性
⭐️文本阴影 !DOCTYPE html
html langzh-CN
headmeta charsetUTF-8title文本阴影/titlestylebody {background-color: black;}h1 {font-size: 80px;text-align: center;color: white;text-shadow: 0px 0px 20px red;font-family: 翩翩体-简;}/style
/head
bodyh1红浪漫洗浴欢迎您的光临/h1
/body
/html⭐️文本换行 !DOCTYPE html
html langzh-CN
headmeta charsetUTF-8title02_文本换行/titlestylediv {width: 400px;height: 400px;border: 1px solid black;font-size: 20px;white-space: pre-wrap;}/style
/head
bodydiv山回路转不见君 雪上空留马行处山回路转不见君 山回路转不见君山回路转不见君山回路转不见君山回路转不见君雪上空留马行处山回路转不见君雪上空留马行处山回路转不见君雪上空留马行处山回路转不见君雪上空留马行处山回路转不见君雪上空留马行处/div
/body
/html⭐️文本溢出 !DOCTYPE html
html langzh-CN
headmeta charsetUTF-8title03_文本溢出/titlestyleul {width: 400px;height: 400px;border: 1px solid black;font-size: 20px;list-style: none;padding-left: 0;padding: 10px;}li {margin-bottom: 10px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;}/style
/head
bodyulli焦点访谈隐形冠军 匠心打造 分毫必争/lili我嫁到日本才发现女性活得真憋屈体毛不能有放屁也不自由/lili高洪波无缘足协盟主热门人选曝光3选1冷门人物或成黑马杀出/lili《狂飙》爆火以后“疯驴子”被骂上热搜跪着赚钱丢人吗/lili气温猛降15℃冷空气再来袭这些地方迎大范围降雨“虚高”气温大跳水/li/ul
/body
/html⭐️文本修饰 !DOCTYPE html
html langzh-CN
headmeta charsetUTF-8title04_文本修饰/titlestyleh1 {font-size: 100px;/* text-decoration-line: overline; *//* text-decoration-style: dashed; *//* text-decoration-color: blue; */text-decoration: overline wavy blue;}/style
/head
bodyh1你好啊欢迎来到尚硅谷学习/h1
/body
/html⭐️文本描边 !DOCTYPE html
html langzh-CN
headmeta charsetUTF-8title05_文本描边/titlestyleh1 {font-size: 100px;/* -webkit-text-stroke-color:red; *//* -webkit-text-stroke-width:3px; *//* -webkit-text-stroke-width:3px; */-webkit-text-stroke:3px black;color: transparent;}/style
/head
bodyh1lalayouyixixixi/h1
/body
/htmlCSS3新增渐变
⭐️线性渐变
多个颜色之间的渐变默认从上到下渐变。 使用关键词设置线性渐变的方向。 使用角度设置线性渐变的方向 调整开始渐变的位置
!DOCTYPE html
html langzh-CN
headmeta charsetUTF-8title01_线性渐变/titlestyle.box {width: 300px;height: 200px;border: 1px solid black;float: left;margin-left: 50px;font-size: 20px;text-align: center;line-height: 200px;}.box1 {background-image: linear-gradient(red,yellow,green);}.box2 {background-image: linear-gradient(to right top,red,yellow,green);}.box3 {background-image: linear-gradient(20deg,red,yellow,green);}.box4 {background-image: linear-gradient(red 50px,yellow 100px,green 150px);}.box5 {background-image: linear-gradient(20deg,red 50px,yellow 100px,green 150px);font-size: 80px;text-align: center;line-height: 200px;font-weight: bold;color: transparent;-webkit-background-clip: text;}/style
/head
bodydiv classbox box1默认情况从上到下/divdiv classbox box2通过关键词调整线性渐变的方向/divdiv classbox box3通过角度调整线性渐变的方向/divdiv classbox box4调整线性渐变的区域/divdiv classbox box5你好啊/div
/body
/html⭐️径向渐变
多个颜色之间的渐变默认从圆心四散。
!DOCTYPE html
html langzh-CN
headmeta charsetUTF-8title02_径向渐变/titlestyle .box {width: 300px;height: 200px;border: 1px solid black;float: left;margin-left: 50px;font-size: 20px;margin-top: 20px;}.box1 {background-image: radial-gradient(red,yellow,green);}.box2 {background-image: radial-gradient(at right top,red,yellow,green);}.box3 {background-image: radial-gradient(at 100px 50px,red,yellow,green);}.box4 {background-image: radial-gradient(circle,red,yellow,green);}.box5 {background-image: radial-gradient(200px 200px,red,yellow,green);}.box6 {background-image: radial-gradient(red 50px,yellow 100px,green 150px);}.box7 {background-image: radial-gradient(100px 50px at 150px 150px,red 50px,yellow 100px,green 150px);}/style
/head
bodydiv classbox box1默认情况/divdiv classbox box2通过关键词调整径向渐变圆的圆心/divdiv classbox box3通过像素值调整径向渐变圆的圆心/divdiv classbox box4通过circle关键字调整为正圆/divdiv classbox box5通过像素值调整为正圆/divdiv classbox box6调整径向渐变的区域/divdiv classbox box7综合写法/div
/body
/html⭐️重复渐变 ⭐️渐变小案例
!DOCTYPE html
html langzh-CN
headmeta charsetUTF-8title04_渐变小案例/titlestyle.box1 {width: 300px;height: 400px;padding: 20px;border: 1px solid black;background-image: repeating-linear-gradient(transparent 0px,transparent 29px,gray 30px);background-clip: content-box;}.box2 {width: 200px;height: 200px;border-radius: 50%;background-image: radial-gradient(at 80px 80px,white,#333);}/style
/head
bodydiv classbox1/divdiv classbox2/div
/body
/htmlweb字体
⭐️基本用法
可以通过 font-face 指定字体的具体地址浏览器会自动下载该字体这样就不依赖用户电脑上的字体了。 语法简写方式 font-face {
font-family: 情书字体;
src: url(./方正手迹.ttf);
}语法高兼容性 font-face {
font-family: atguigu;
font-display: swap;
src: url(webfont.eot); /* IE9 */
src: url(webfont.eot?#iefix) format(embedded-opentype), /* IE6-IE8 */
url(webfont.woff2) format(woff2),
url(webfont.woff) format(woff), /* chrome、firefox */
url(webfont.ttf) format(truetype), /* chrome、firefox、opera、Safari,
Android*/
url(webfont.svg#webfont) format(svg); /* iOS 4.1- */
}!DOCTYPE html
html langzh-CN
headmeta charsetUTF-8titleDocument/titlestylefont-face {font-family: 情书字体;src: url(./font1/方正手迹.ttf);}font-face {font-family: atguigu;font-display: swap;src: url(./font2/webfont.eot); /* IE9 */src: url(./font2/webfont.eot?#iefix) format(embedded-opentype), /* IE6-IE8 */url(./font2/webfont.woff2) format(woff2),url(./font2/webfont.woff) format(woff), /* chrome、firefox */url(./font2/webfont.ttf) format(truetype), /* chrome、firefox、opera、Safari, Android, iOS 4.2*/url(./font2/webfont.svg#webfont) format(svg); /* iOS 4.1- */}.t1 {font-size: 100px;font-family: 情书字体;}.t2 {font-size: 100px;font-family: atguigu;}/style
/head
bodyh1 classt1春风得意马蹄疾不信人间有别离/h1h1 classt2春风得意马蹄疾不信人间有别离/h1
/body
/html⭐️定制字体
中文的字体文件很大使用完整的字体文件不现实通常针对某几个文字进行单独定制。可使用阿里 Web 字体定制工具
⭐️字体图标
相比图片更加清晰。灵活性高更方便改变大小、颜色、风格等。兼容性好 IE 也能支持。阿里图标官网地址
!DOCTYPE html
html langzh-CN
headmeta charsetUTF-8titleDocument/titlestyle/* 第一步 */font-face {font-family: iconfont;src: url(./font3/iconfont.woff2?t1676857973138) format(woff2),url(./font3/iconfont.woff?t1676857973138) format(woff),url(./font3/iconfont.ttf?t1676857973138) format(truetype);}/* 第二步 */.iconfont {font-family: iconfont !important;font-size: 100px;}/style
/head
bodyspan classiconfont#xe85c;/spanspan classiconfont#xe85d;/spanspan classiconfont#xe85e;/spanspan classiconfont#xe85f;/span
/body
/html
