团购网站设计,建网站如何上传,wordpress 插件怎么写,网络营销工具1.CSS简介
CSS(Cascading Style Sheets)层叠样式表#xff0c;是用来为结构化文档#xff08;HTML、XML等应用#xff09;添加样式,比如字体、颜色、大小、间距的计算机语言。CSS目前已经发展到了CSS3.0了。
2.CSS导入方式
CSS有三种导入方式#xff1a;
1.行内样式是用来为结构化文档HTML、XML等应用添加样式,比如字体、颜色、大小、间距的计算机语言。CSS目前已经发展到了CSS3.0了。
2.CSS导入方式
CSS有三种导入方式
1.行内样式直接在标签元素中编写style属性在其中编写样式即可 p stylecolor: paleturquoise你好这是CSS/p
2.内部样式在头部head标签中我们写上style标签然后就可以在其中写入CSS样式了 stylep{color: paleturquoise;font-size: 20px;}/style
3.外部样式外部样式就是新建一个.css文件在其中编写css样式然后引入html文件之中引入方式有两种
连接式:
link typetext/css relstylesheet hreffirst.css导入式
styleimport url(first.css);
/style
3.选择器
可以选择页面中的某一个或者某一类元素然后设置它们的样式
3.1. 基本选择器
1.标签选择器选择一类标签标签{xxx样式}比如
/*标签选择器*/
h1{color: pink;background-color: #eeeeee;font-family: 楷体;
}
p{color: pink;background-color: #eeeeee;font-family: 楷体;
}
2.类选择器可以选择class一致的标签在class名前面加上一个小点 .className {xxx样式}
/*类选择器*/
.font1{color: pink;background-color: #eeeeee;font-family: 楷体;
}
.font2{color: pink;background-color: #eeeeee;font-family: 楷体;
}
3.Id选择器这是全局唯一的样式指定某个id设置样式在id名字前加上井号如#idName{xxx样式}
/*Id选择器*/
#demo1{color: pink;background-color: #eeeeee;font-family: 楷体;
}
#demo2{color: pink;background-color: #eeeeee;font-family: 楷体;
}
优先级对比
前面三个的优先级对比id class 标签
3.2.层次选择器
1.后代选择器选中某个元素内的元素
/*后代选择器*/
body p{background-color: pink;
} 2.子选择器只选择一代
/*后代选择器*/
bodyp{background-color: pink;
} 3. 同辈选择器选择相邻的兄弟选择器
!DOCTYPE html
html langenheadmeta charsetUTF-8titleTitle/titlestyle.d1.d2{background-color: #aaaaaa;}/style/headbodydiv classd1你好/divdiv classd2hello/div/body
/html 4.通用选择器选择这个元素向下的所有同辈元素
!DOCTYPE html
html langenheadmeta charsetUTF-8titleTitle/titlestyle.d1~div{background-color: #aaaaaa;}/style/headbodydiv classd1你好/divdiv classd2hello/divdiv classd3oook/div/body
/html 3.3. 结构伪类选择器 上图引用至CSS结构伪类选择器-CSDN博客
!DOCTYPE html
html langenheadmeta charsetUTF-8titleTitle/title!--避免使用classid选择器--style/*ul的第一个子元素*/ul li:first-child{background: firebrick;}/*ul的最后一个子元素*/ul li:last-child{background: darkcyan;}/*选中p1定位到父元素选择当前的第一个元素选择当前p元素的父级元素选中父级元素的第一个子元素为p的按顺序*/p:nth-child(2){background: salmon;}/*选中父元素下的p元素的第二个按类型*/p:nth-of-type(1){background: gold;}p:nth-child(3){background-color: whitesmoke;}a:hover{background: violet;}/style/headbody!--h1h1/h1--pp1/ppp2/ppp3/pullili1/lilili2/lilili3/li/ula href链接标签/a/body
/html4.CSS样式
css能够设计出多种多样的样式现在我们详细的介绍这些样式。
4.1. 背景
CSS可以定义的背景效果
background-color 背景颜色。background-image 背景图片。background-repeat 背景图像是否重复。background-attachment 背景图像是否固定或者随着页面的其余部分滚动。background-position 设置背景图像的起始位置。background 属性简写包含上面的几种写法。
.div1 {width: 600px;height: 208px;background-image: url(../20231115/button.png);background-repeat: no-repeat;background-size: cover;
}
4.2. 文本
文本的属性
属性描述color设置文字颜色direction文本方向letter-spacing字符间距line-height行高text-align对齐方式text-decoration设置划线的位置text-indent缩进text-shadow设置文本阴影text-transform控制元素中的字母vertical-align垂直对齐white-space设置元素中空白的处理方式word-spacing设置字间距
写个代码试一试
!DOCTYPE html
html langenheadmeta charsetUTF-8titleTitle/titlestylep{color: rebeccapurple;direction: initial;letter-spacing: 10px;line-height: 20px;text-decoration: line-through;text-shadow: darkolivegreen;word-spacing: 50px;}/style/headbodyphello world/p/body
/html
4.3. 字体
CSS提供了多种属性修改字体的样式
属性描述font-family文本的字体系列font-size字体大小font- style字体样式font-variant以小型大型显示文本font-weight字体粗细
4.4. 链接
CSS可以修改连接的状态样式
a:link - 正常未访问过的链接a:visited - 用户已访问过的链接a:hover - 当用户鼠标放在链接上时a:active - 链接被点击的那一刻
4.5. 显示状态
CSS中可以使用display和visibility来设置元素的显示与隐藏
visibility:hidden可以隐藏某个元素但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说该元素虽然被隐藏了但仍然会影响布局。
display:none可以隐藏某个元素且隐藏的元素不会占用任何空间。也就是说该元素不但被隐藏了而且该元素原本占用的空间也会从页面布局中消失。
display中的inline和block分别会把元素设置为内联元素和块元素。
!DOCTYPE html
html langenheadmeta charsetUTF-8titleTitle/titlestyle.hidden {visibility: hidden;}.none {display: none;}/style/headbodyphello world/pp classnonehello world/pphello world/pp classhiddenhello world/pphello world/p/body
/html 4.6. 定位 Position
CSS定位Position拥有五个值static、relative、fixed、absolute、sticky
详细介绍见代码
!DOCTYPE html
html langenheadmeta charsetUTF-8title定位/title/headstyle.sta{ /*静态定位---默认 静态定位的元素不会受到 top, bottom, left, right影响。*/position: static;border: 2px solid red;}.fix{ /*固定位置 元素的位置相对于浏览器窗口是固定位置。即使窗口是滚动的它也不会移动*/position: fixed;top: 30px;left: 50px;}.rel{ /* 相对定位 相对定位元素的定位是相对其正常位置*/position: relative;left: -30px;}.abs{ /* 绝对定位的元素的位置相对于最近的已定位父元素如果元素没有已定位的父元素那么它的位置相对于html: */position: absolute;left: 100px;top: 100px;z-index: -1;}.sti{ /* 粘性定位 元素定位表现为在跨越特定阈值前为相对定位之后为固定定位。*/position: -webkit-sticky;width: 300px;height: 50px;background-color: whitesmoke;position: sticky;top: 0;}/stylebodyp classsta静态定位/pp classrel相对定位/pp classfix页面固定位置/pp classabs绝对位置/pdiv classsti/divp666666666666666666666666/pp777777777777777777777777/pp777777777777777777777777/pp777777777777777777777777/pp777777777777777777777777/pp777777777777777777777777/pp777777777777777777777777/pp777777777777777777777777/pp777777777777777777777777/pp777777777777777777777777/pp777777777777777777777777/pp777777777777777777777777/pp777777777777777777777777/pp777777777777777777777777/pp777777777777777777777777/pp777777777777777777777777/pp777777777777777777777777/pp777777777777777777777777/pp777777777777777777777777/pp777777777777777777777777/pp777777777777777777777777/pp777777777777777777777777/pp777777777777777777777777/pp777777777777777777777777/pp777777777777777777777777/pp777777777777777777777777/pp777777777777777777777777/pp777777777777777777777777/pp777777777777777777777777/pp777777777777777777777777/pp777777777777777777777777/pp777777777777777777777777/pp777777777777777777777777/pp777777777777777777777777/p/body
/html
4.7.布局--Overflow
值描述visible默认值。内容不会被修剪会呈现在元素框之外。hidden内容会被修剪并且其余内容是不可见的。scroll内容会被修剪但是浏览器会显示滚动条以便查看其余的内容。auto如果内容被修剪则浏览器会显示滚动条以便查看其余的内容。inherit规定应该从父元素继承 overflow 属性的值。
代码展示了这几种情况
!DOCTYPE html
html langenheadmeta charsetUTF-8titleTitle/titlestyle.all{display: flex;flex-direction: row;}#visible {background: #4CAF50;color: black;padding: 15px;width: 100px;height: 100px;overflow: visible;border: 1px solid #ccc;}#hidden{background: #4CAF50;color: black;padding: 15px;width: 100px;height: 100px;overflow: hidden;border: 1px solid #ccc;}#scroll {background: #4CAF50;color: black;padding: 15px;width: 100px;height: 100px;overflow: scroll;border: 1px solid #ccc;}#auto {background: #4CAF50;color: black;padding: 15px;width: 100px;height: 100px;overflow: auto;border: 1px solid #ccc;}/style/headbodydiv classalldiv idvisiblep第一种: visible/ppvisible/ppvisible/ppvisible/ppvisible/ppvisible/ppvisible/ppvisible/ppvisible/ppvisible/p/divdiv idhiddenp第二种: hidden/pphidden/pphidden/pphidden/pphidden/pphidden/pphidden/pphidden/pphidden/p/divdiv idscrollp第三种scroll/ppscroll/ppscroll/ppscroll/ppscroll/ppscroll/ppscroll/ppscroll/ppscroll/p/divdiv idautop第四种auto/ppauto/ppauto/ppauto/ppauto/ppauto/ppauto/ppauto/ppauto/p/div/div/body
/html 如图所示会溢出来。
4.8. 浮动 --- Float
!DOCTYPE html
html langenheadmeta charsetUTF-8titleTitle/titlestyle.image{float: left;width: 300px;height: 300px;}/style/headbodyh2图片库/h2p调整串口试一试/pdivimg srcdog.jpg classimageimg srcdog.jpg classimageimg srcdog.jpg classimageimg srcdog.jpg classimageimg srcdog.jpg classimageimg srcdog.jpg classimageimg srcdog.jpg classimageimg srcdog.jpg classimageimg srcdog.jpg classimageimg srcdog.jpg classimage/div/body
/html 4.9. 居中方式
手打了一遍代码详细的介绍了多种方式也写清注释了。
!DOCTYPE html
html langenheadmeta charsetUTF-8title居中方式/titlestyle*{margin: 0;padding: 0;}h4{margin: 10px 0 10px 0;}.all{width: auto;height: 100vh;background-color: whitesmoke;display: flex;flex-direction: row;justify-content: space-around;}.shuiping, .chuizhi, .shuipingcuizhi{height: 100%;width: 30%;}.content{width: 300px;height: 100px;background-color: salmon;border: 1px solid black;}.item{background-color: #4CAF50;width: 100px;height: 100px;}/* 1*//* 使用 margin:auto 实现居中 */.margin-center{margin: auto;}/* 2 */.content2{text-align: center;/* 这里的text-aligncenter子元素会继承该属性 *//* 我们的目的是将元素居中而不是文本居中 */}.block-center{display: inline-block;}/* 3 */.content3{position: relative;}.absolute-center{position: absolute;left: 50%;transform: translateX(-50%);}/* 4 */.content4{display: flex;justify-content: center;}/* 垂直居中*/.Ccontent{width: 300px;height: 100px;background-color: olive;border: 1px solid black;}.item2{width: 300px;height: 30px;background-color: gold;}/* 1 */.Ccontent1{display: table-cell;vertical-align: middle;}/* 2*/.Ccontent2{line-height: 100px;}.vertical-center{display: inline-block;vertical-align: middle;}/* 3*/.Ccontent3{display: flex;align-items: center;}/* 4 */.Ccontent4{position: relative;}.abs-center{position: absolute;top: 50%;transform: translateY(-50%);}/* 水平垂直居中*/.SCcontent{background-color: paleturquoise;width: 100px;height: 100px;}.item3{background-color: lightgoldenrodyellow;width: 50px;height: 50px;}/* 1 */.SCcontent1{position: relative;}.abso-center{position: absolute;top: 50%;left: 50%;transform: translate(-50% , -50%);}/* 2*/.SCcontent2{display: flex;justify-content: center;align-items: center;}/* 3 */.SCcontent3{text-align: center;line-height: 100px;}.SCitem3{display: inline-block;vertical-align: middle;}/* 4 */.SCcontent4{display: table-cell;text-align: center;vertical-align: middle;}.SCitem4{display: inline-block;}/style/headbodydiv classalldiv classshuipingh3水平居中方式/h3h4第一种方式 margin:auto/h4div classcontentdiv classmargin-center item/div/divh4第二种方式 使用inline-block 和 text-align实现 /h4div classcontent content2div classitem block-center/div/divh4第三种方式 使用绝对定位 实现 /h4div classcontent content3div classitem absolute-center/div/divh4第四种方式 使用flex布局 实现 /h4div classcontent content4div classitem/div/div/divdiv classchuizhih3垂直居中方式/h3h4第一种方式使用displaytable-cell来实现/h4div classCcontent Ccontent1div classitem2/div/divh4第二种方式使用line-height、 inline-block 来实现/h4div classCcontent Ccontent2div classitem2 vertical-center/div/divh4第三种方式使用flex布局 来实现/h4div classCcontent Ccontent3div classitem2/div/divh4第四种方式使用 绝对定位 来实现/h4div classCcontent Ccontent4div classitem2 abs-center/div/div/divdiv classshuipingcuizhih3水平 垂直居中方式/h3h4第一种方式使用absolute绝对定位 来实现/h4div classSCcontent SCcontent1 div classitem3 abso-center/div/divh4第二种方式使用flex布局来实现/h4div classSCcontent SCcontent2 div classitem3/div/divh4第三种方式用inline-block.text-align和vertical-align来实现/h4div classSCcontent SCcontent3 div classitem3 SCitem3/div/divh4第四种方式table-celldisplay: inline-block来实现/h4div classSCcontent SCcontent4 div classitem3 SCitem4/div/div/div/div/body
/html 4.10.提示框
实现一个提示框练练手
!DOCTYPE html
html langenheadmeta charsetUTF-8titleTitle/title/headstyle.main{position: relative;display: inline-block;}.main:hover .jian{visibility: visible;}.jian{color: white;text-align: center;visibility: hidden;top: -5px;left: 120%;padding-top: 5px;background-color: black;border-radius: 6px;width: 200px;height: 30px;position: absolute;}.jian::after{position: absolute;content: ;top: 50%;right: 100%;transform: translateY(-50%);z-index: 1;border-width: 5px;border-style: solid;border-color: transparent black transparent transparent;}/stylebodyh1提示框/h1div classmain显示我div classjian提示框成功了/div/div/body
/html 5. 盒子模型 Box Model 我们可以把每一个标签元素看成一个盒子盒子中包括了边距、边框、填充和实际内容盒子模型允许在盒子周围的空间放置其他元素。 6. CSS3
CSS3是CSS的技术新版本拥有很多新的特性下面是新的特性介绍
6.1. CSS3边框
由三个新的边框属性border-radius、box-shadow、border-image
border-radius圆角
使用border-radius:10px 就可以轻易实现圆角了值越大圆角的弧度越大。
box-shadow:阴影使用它就可以实现阴影效果。
border-image边界图片
!DOCTYPE html
html langenheadmeta charsetUTF-8titlecss3边框/titlestyle.css3-border{/*width: 400px;*//*height: 400px;*//*background-color: #4CAF50;*//*border-radius: 100px;*/border: 15px solid transparent;border-image: url(border.png) 30 30 stretch;/*box-shadow: 10px 10px 30px #4CAF50;*/}/style/headbodydiv classcss3-border 你好/div/body
/html
6.2. 渐变
CSS3提供了新的渐变属性linear-gradient
!DOCTYPE html
html langenheadmeta charsetUTF-8titleTitle/titlestyle.jianBian1{width: 300px;height: 100px;/*上到下*/background-image: linear-gradient(to bottom, black , pink);}.jianBian2{width: 300px;height: 100px;/*从右到左*/background-image: linear-gradient(to left, orange , blue);}.jianBian3{width: 300px;height: 100px;/*对角线*/background-image: linear-gradient(to bottom right, blanchedalmond , purple);}.jianBian4{width: 300px;height: 100px;/* 使用角度 */background-image: linear-gradient(-30deg, lawngreen , palegoldenrod);}/style/headbodydiv classjianBian1/divdiv classjianBian2/divdiv classjianBian3/divdiv classjianBian4/div/body
/html
6.3. 文本效果
1.文本阴影text-shadow
2. 文本溢出属性text-overflow
3. text-outline
!DOCTYPE html
html langenheadmeta charsetUTF-8title文本效果/titlestylep{width: 200px;overflow: hidden;white-space: nowrap;text-shadow: 10px 10px 5px red;}.ellipsis{/*添加省略号*/text-overflow: ellipsis;}.clip{/*直接断开*/text-overflow: clip;}/style/headbodyp classellipsis 你好如果超出的话会怎么样呢 /pp classclip 你好如果超出的话会怎么样呢 /p/body
/html
6.4. 过渡
CSS3 过渡是元素从一种样式逐渐改变为另一种的效果。
要实现这一点必须规定两项内容
指定要添加效果的CSS属性指定效果的持续时间。
使用transition: 变化的属性 时间
!DOCTYPE html
html langenheadmeta charsetUTF-8title过渡/titlestyle.transition{width: 100px;height: 100px;background-color: #4CAF50;transition: background-color 2s, width 2s, height 2s, transform 2s;}.transition:hover{width: 200px;height: 200px;background-color: purple;transform: rotate(90deg);}/style/headbodydiv classtransition哥们你好/div/body
/html
6.5.动画
要创建 CSS3 动画你需要了解 keyframes 规则。
keyframes 规则是创建动画。
keyframes 规则内指定一个 CSS 样式和动画将逐步从目前的样式更改为新的样式。
!DOCTYPE html
html langenheadmeta charsetUTF-8titleTitle/titlestyle.animation{width: 100px;height: 100px;background-color: red;position: relative;/*动画名称*/animation-name: move;/*动画运行时间*/animation-duration: 5s;/*速度曲线*/animation-timing-function: linear;/*动画何时开始*/animation-delay: 2s;/*动画运行次数*/animation-iteration-count: infinite;/*动画再下一个周期是否逆向运行*/animation-direction: alternate;/*规定是否运行*/animation-play-state: running;}/*设置动画*/keyframes move {0% {background-color: red; left: 0px; top: 0px;}25% {background-color: yellow; left: 200px; top: 0px;}50% {background-color: blue; left: 200px; top: 200px;}75% {background-color: green; left: 0px; top: 200px;}100% {background-color: red; left: 0px; top: 0px;}}/style/headbodydiv classanimation/div/body
/html
6.6. CSS3图片
CSS3对图片样式有了新的属性
!DOCTYPE html
html langenheadmeta charsetUTF-8titleTitle/titlestyle.yuan{/* 圆形图片 */width: 100px;border: solid black;border-radius: 50%;}/*如果你需要自由缩放图片且图片放大的尺寸不大于其原始的最大值则可使用以下代码*/.xiangYing{max-width: 100%;height: auto;}/* 卡片式图片*/div.polaroid{width: 200px;background-color: white;box-shadow: 0 4px 8px 0 gray, 0 10px 20px 0 lightgray;margin-bottom: 25px;}img.dog:hover{opacity: 0.7;}div.container{text-align: center;padding: 5px 10px;}/style/headbodya href../20231118/dog.jpgimg src../20231118/dog.jpg classyuan //ah1响应式图片/h1img src../20231118/border.png classxiangYingh1这是响应式卡片/h1div classpolaroidimg src../20231118/dog.jpg altNorway classdog stylewidth:100%;div classcontainerpThe Trolls tongue in Hardanger, Norway/p/div/div/body
/html 7. 总结
通过对CSS的学习我们可以使得html页面变得更加好看了接下来我们就要开始学习JavaScript来操控页面元素了。
