网站建设论文 优帮云,店招在线制作免费,做网站卖东西赚钱,wordpress 放弃目录
一、CSS语法
二、CSS选择器
三、CSS样式表
1.外部样式表
2.内部样式表
3.内联样式
四、CSS背景
1.背景颜色#xff1a;background-color
2.背景图片#xff1a;background-image
3.背景大小#xff1a;background-size
4.背景图片是否重复#xff1a;backg…目录
一、CSS语法
二、CSS选择器
三、CSS样式表
1.外部样式表
2.内部样式表
3.内联样式
四、CSS背景
1.背景颜色background-color
2.背景图片background-image
3.背景大小background-size
4.背景图片是否重复background-repeat
5.背景图像起始位置background-position
6.背景图像是否固定background-attachment
7.背景图像相对于什么定位background-origin
8.背景绘制区域background-clip
五、CSS文本格式
六、CSS链接
七、CSS盒子模型
1.margin-外边距
2.border-边框
3.padding-内边距
八、CSS定位-Position
九、CSS布局-Overflow
十、代码示例 CSS (Cascading Style Sheets层叠样式表是一种用来为结构化文档如 HTML 文档或 XML 应用添加样式字体、间距和颜色等的计算机语言CSS 文件扩展名为 .css。 一、CSS语法
CSS语法构成选择器1条或多条声明。每条声明由一个属性和一个值构成。
p {color:red;text-align:center;
} 二、CSS选择器
CSS选择器包含id选择器和class选择器。
id选择器以 # 显示。
# demo {color:#0fff;display:flex;}
/*调用时*/
div iddemo/div
class选择器以 . 点号显示。
.img {background-color:#0fff;}
/*调用时*/
div classimg/div 三、CSS样式表
1.外部样式表
通过link标签链接到样式表。
headlink relstylesheet typetext/css hrefstyle.css
/head
2.内部样式表
通过style标签在文档头部定义。
headstylep {margin-left:20px;padding:10px 20px;text-align:center;}/style
/head
3.内联样式
p stylecolor:AliceBlue;margin:10px 20px这是一个段落。/p 四、CSS背景
1.背景颜色background-color
.image {background-color:transparent /*透明*/
}
2.背景图片background-image
通过url设置相对或绝对位置。
.image {background-image:url(相对或绝对位置);
}
3.背景大小background-size
属性值描述cover使背景图片始终铺满整个背景区域但如果图片比背景区域小会自动拉伸或放大图片使其铺满整个背景区域。contain使背景图片在不拉伸的情况下尽可能地在背景区域中居中显示同时保留其原始大小。px直接指定背景图片的大小可以是固定值、百分比或关键字auto其中auto表示原始大小。
4.背景图片是否重复background-repeat
属性值描述repeat默认值表示背景图像在水平和垂直方向都重复出现。repeat-x表示背景图像只在水平方向重复出现而不在垂直方向上出现 。repeat-y表示背景图像只在垂直方向上重复出现而不在水平方向上出现。no-repeat表示背景图像不重复出现。
5.背景图像起始位置background-position
1属性值为“长度单位”
当background-position取值为长度单位时要设置水平方向数值x轴和垂直方向数值y轴。通过px百分比%来设置。 属性值 描述 x数值 设置网页的横向位置 y数值 设置网页的纵向位置
2属性值为“关键字”
当background-position取值为关键字时也需要设置水平方向和垂直方向的值使用关键字。 属性值 描述 top left 左上 top center 靠上居中 top right 右上 left center 靠左居中 center center 正中 right center 靠右居中 bottom left 左下 bottom center 靠下居中 bottom right 右下
6.背景图像是否固定background-attachment 属性值 描述 scroll 默认值。背景图像会随着页面其余部分的滚动而移动。 fixed 当页面的其余部分滚动时背景图像不会移动。 inherit 规定应该从父元素继承 background-attachment 属性的设置
7.背景图像相对于什么定位background-origin
属性值描述padding-box背景图像相对于内边距框来定位。border-box背景图像相对于边框盒来定位。content-box背景图像相对于内容框来定位。
8.背景绘制区域background-clip
属性值描述border-box默认值。背景绘制在边框方框内剪切成边框方框。padding-box背景绘制在衬距方框内剪切成衬距方框。content-box背景绘制在内容方框内剪切成内容方框。 五、CSS文本格式
属性值描述color设置文本颜色direction设置文本方向letter-spacing设置字符间距line-height设置行高text-align对齐元素中的文本text-decoration向文本添加修饰text-indent缩进元素中文本的首行text-shadow设置文本阴影text-transform控制元素中的字母unicode-bidi设置或返回文本是否被重写 vertical-align设置元素的垂直对齐white-space设置元素中空白的处理方式word-spacing设置字间距 六、CSS链接
a:link - 正常未访问过的链接a:visited - 用户已访问过的链接a:hover - 当用户鼠标放在链接上时a:active - 链接被点击的那一刻
注意
a:hover 必须跟在 a:link 和 a:visited后面a:active 必须跟在 a:hover后面 七、CSS盒子模型 Margin(外边距) - 清除边框外的区域外边距是透明的。Border(边框) - 围绕在内边距和内容外的边框。Padding(内边距) - 清除内容周围的区域内边距是透明的。Content(内容) - 盒子的内容显示文本和图像。
1.margin-外边距 margin属性可以有1-4个值
margin:25px 50px 75px 100px; 上边距为25px右边距为50px下边距为75px左边距为100pxmargin:25px 50px 75px; 上边距为25px左右边距为50px下边距为75pxmargin:25px 50px; 上下边距为25px左右边距为50pxmargin:25px; 所有的4个边距都是25px
2.border-边框
border-style属性可以有1-4个值
border-style:dotted solid double dashed; 上边框是 dotted右边框是 solid底边框是 double左边框是 dashedborder-style:dotted solid double; 上边框是 dotted左、右边框是 solid底边框是 doubleborder-style:dotted solid; 上、底边框是 dotted右、左边框是 solidborder-style:dotted; 四面边框是 dotted
3.padding-内边距
padding属性可以有1-4个值 padding:25px 50px 75px 100px;
上填充为25px右填充为50px下填充为75px左填充为100px padding:25px 50px 75px;
上填充为25px左右填充为50px下填充为75px padding:25px 50px;
上下填充为25px左右填充为50px padding:25px;
所有的填充都是25px 八、CSS定位-Position
属性值描述static默认值静态定位。relative相对定位元素的定位是相对其正常位置。fixed 元素的位置相对于浏览器窗口是固定位置。 absolute绝对定位的元素的位置相对于最近的已定位父元素如果元素没有已定位的父元素那么它的位置相对于html。sticky粘性定位基于用户的滚动位置来定位。 九、CSS布局-Overflow
属性值描述visible默认值。内容不会被修剪会呈现在元素框之外。hidden内容会被修剪并且其余内容是不可见的。scroll内容会被修剪但是浏览器会显示滚动条以便查看其余的内容。auto如果内容被修剪则浏览器会显示滚动条以便查看其余的内容。inherit规定应该从父元素继承 overflow 属性的值。
十、代码示例
下面结合上面学到的知识代码将会简单编写代码实现发送新年祝福~
htmlheadmeta charsetutf-8title2024新年祝福/titlestyle typetext/css.deng-box {position: fixed;top: -40px;right: 150px;z-index: 9999;pointer-events: none;}.deng-box1 {position: fixed;top: -30px;right: 10px;z-index: 9999;pointer-events: none;}.deng-box2{position: fixed;top: -40px;left: 150px;z-index: 9999;pointer-events: none;}.deng-box3 {position: fixed;top: -30px;left: 10px;z-index: 9999;pointer-events: none;}.deng-box1 .deng,.deng-box3 .deng {position: relative;width: 120px;height: 90px;margin: 50px;background: #d8000f;background: rgba(216,0,15,0.8);border-radius: 50% 50%;-webkit-transform-origin: 50% -100px;-webkit-animation: swing 5s infinite ease-in-out;box-shadow: -5px 5px 30px 4px #fc903d}.deng {position: relative;width: 120px;height: 90px;margin: 50px;background: #d8000f;background: rgba(216,0,15,0.8);border-radius: 50% 50%;-webkit-transform-origin: 50% -100px;-webkit-animation: swing 3s infinite ease-in-out;box-shadow: -5px 5px 50px 4px #fa6c00;}.deng-a {width: 100px;height: 90px;background: #d8000f;background: rgba(216,0,15,0.1);margin: 12px 8px 8px 8px;border-radius: 50% 50%;border: 2px solid #dc8f03;}.deng-b {width: 45px;height: 90px;background: #d8000f;background: rgba(216,0,15,0.1);margin: -4px 8px 8px 26px;border-radius: 50% 50%;border: 2px solid #dc8f03;}.xian {position: absolute;top: -20px;left: 60px;width: 2px;height: 20px;background: #dc8f03;}.shui-a { position: relative;width: 5px;height: 20px;margin: -5px 0 0 59px;-webkit-animation: swing 4s infinite ease-in-out;-webkit-transform-origin: 50% -45px;background: orange;border-radius: 0 0 5px 5px;}.shui-b {position: absolute;top: 14px;left: -2px;width: 10px;height: 10px;background: #dc8f03:border-radius: 50%;}.shui-c {position: absolute;top: 18px;left: -2px;width: 10px;height: 35px;background: orange;border-radius: 0 0 0 5px;}.deng:before {position: absolute;top: -7px;left: 29px;height: 12px;width: 60px;content: ;display: block;z-index: 999;border-radius: 5px 5px 0 0;border: solid 1px #dc8f03;background: orange;background: linear-gradient(to right, #dc8f03, orange, #dc8f03, orange, #dc8f03);}.deng:after {position: absolute;bottom: -7px;left: 10px;height: 12px;width: 60px;content: ;display: block;margin-left: 20px;border-radius: 0 0 5px 5px;border: solid 1px #dc8f03;background: orange;background: linear-gradient(to right, #dc8f03, orange, #dc8f03, orange, #dc8f03);}.deng-t {font-family: 黑体, Arial, Lucida Grande, Tahoma, sans-serif;font-size: 3.2rem;color: #dc8f03;font-weight: 700;line-height: 85px;text-align: center;}.night .deng-box,.night .deng-box1,.night .deng-t {background:transparent !important;}-moz-keyframes swing {0% {-moz-transform: rotate(-10deg);}50% {-moz-transform: rotate(10deg);}100% {-moz-transform: rotate(-10deg);}}-webkit-keyframes swing {0% {-webkit-transform: rotate(-10deg);}50% {-webkit-transform: rotate(10deg);}100% {-webkit-transform: rotate(-10deg);}}/style styleh1 {text-align:center;color:#B8860B;font-size:40px;margin:10px;padding:10px;}body {background-image:url(https://img.tukuppt.com/bg_grid/00/13/34/ieRv1gTX6x.jpg!/fh/350); background-repeat:no-repeat;background-size:cover;}.image-container {display:flex;}img {width:33%;height:25%;margin-right:10px;}/stylestyle.fade-in-out {opacity: 0;animation: fade-in-out-animation 3s ease-in-out infinite;}keyframes fade-in-out-animation {0% {opacity:0;}50% {opacity:1;}100% {opacity:0;}}/stylestyle/* 应用动画到目标元素 */.shake {text-align:center;color:#4B0082;font-size:30px;padding:10px;position:relative;-webkit-box-reflect: below -12px linear-gradient(transparent,rgba(0,0,0,0.2));}.shake span{position: relative;display: inline-block;font-size: 30px;text-transform: uppercase;letter-spacing: 2px;/* 执行动画动画名 时长 加速后减速 无限次播放 */animation: shake 1s ease-in-out infinite;/* 通过var函数调用自定义属性--i再计算出动画延迟时间 */animation-delay: calc(0.1s * var(--i));}/* 定义动画 */keyframes shake {0%{transform: translateY(0);}20%{transform: translateY(-20px);}40%,100%{transform: translateY(0);}}/style/headbodydiv classdeng-box2div classdengdiv classxian/divdiv classdeng-adiv classdeng-bdiv classdeng-t年/div/div/divdiv classshui shui-adiv classshui-c/divdiv classshui-b/div/div/div/divdiv classdeng-box3div classdengdiv classxian/divdiv classdeng-adiv classdeng-bdiv classdeng-t新/div/div/divdiv classshui shui-adiv classshui-c/divdiv classshui-b/div/div/div/divdiv classdeng-box1div classdengdiv classxian/divdiv classdeng-adiv classdeng-bdiv classdeng-t乐/div/div/divdiv classshui shui-adiv classshui-c/divdiv classshui-b/div/div/div/divdiv classdeng-boxdiv classdengdiv classxian/divdiv classdeng-adiv classdeng-bdiv classdeng-t快/div/div/divdiv classshui shui-adiv classshui-c/divdiv classshui-b/div/div/div/divbrh1新年快乐/h1h1龙年大吉/h1brdiv classimage-containerimg srcimages/yanhua1.gifimg srcimages/2024.jpg altHappyNewYearimg srcimages/yanhua.gif/div strongdiv classshakespan style--i:1;小/spanspan style--i:2;哪/spanspan style--i:3;吒/spanspan style--i:4;祝/spanspan style--i:5;各/spanspan style--i:6;位/spanspan style--i:7;在/spanspan style--i:8;新/spanspan style--i:9;的/spanspan style--i:10;一/spanspan style--i:11;年/spanspan style--i:12;里/spanspan style--i:13;/spanspan style--i:14;心/spanspan style--i:15;想/spanspan style--i:16;事/spanspan style--i:17;成/spanspan style--i:18;/spanspan style--i:19;财/spanspan style--i:20;运/spanspan style--i:21;亨/spanspan style--i:22;通/spanspan style--i:23;/span/div/strong/body/html
具体实现如下 新年祝福 本文主要分享了CSS的基础知识通过学习这篇文章相信大家会对CSS有一个初步认识下篇将会介绍CSS3的基础知识大家尽请期待~
