有人做网站吗,建筑网站汇总,几大网络公司排名,佛山做网站那家好文章目录 一、申明规则CSS的导入方式行内样式内部样式外部样式 二、CSS的选择器1. 基本选择器标签选择器#xff1a; 选择一类标签 标签{}类选择器 class#xff1a; 选择所有class属性一致的表情#xff0c;跨标签.类名{}ID选择器#xff1a;全局唯一 #id名{} 2.层次选择器… 文章目录 一、申明规则CSS的导入方式行内样式内部样式外部样式 二、CSS的选择器1. 基本选择器标签选择器 选择一类标签 标签{}类选择器 class 选择所有class属性一致的表情跨标签.类名{}ID选择器全局唯一 #id名{} 2.层次选择器后代选择器 在某个元素的后面子选择器 一代面相邻兄弟选择器对下不对上通用选择器l 3.结构伪类选择器 三、美化网页元素字体样式文本样式阴影超链接伪类列表背景盒子模型浮动定位相对定位绝对定位固定定位z-index动画 一、申明规则 CSS的导入方式 行内样式 p stylecolor: blue; font-size: 20px;这是一个css示例/p内部样式
!DOCTYPE html
html langzh-CN
headmeta charsetUTF-8titlecsstest/titlestylep {color: red;font-size: 30px;}/style
/head
bodyp这是一个css示例/p
/body
/html外部样式 二、CSS的选择器 1. 基本选择器 标签选择器 选择一类标签 标签{} /*标签选择器会选择页面上所有的对应标签*/
h1{color: #c134b5;background: black;
}p{background: aquamarine;color: red;font-size: 80px;
}类选择器 class 选择所有class属性一致的表情跨标签.类名{}
.girl{color: #c134b5;}
.boy{color: blue;}h1 classgirlthis is h1,class is girl/h1
p classboylthis is p,.class is boy/pID选择器全局唯一 #id名{} body!--id选择器 : id必须保证全局唯一#id 名称{}不遵循就近 原则固定的优先级 id选择器 class选择器 标签选择器--style#girl{color: #c134b5;}#boy{color: blue;}/styleh1 idgirlthis id is girl/h1p idboythis id is boy/p/body2.层次选择器 后代选择器 在某个元素的后面
body p{background: #c134b5;
}子选择器 一代面
bodyp{backgroulnd: #c134b5;
}相邻兄弟选择器对下不对上
/兄弟选择器 只有一个向下/ /兄弟选择器 只有一个向下/
.active p{background: #c134b5;
}通用选择器l
/通用兄弟选择器 当前选中元素的向下所有的兄弟元素/
/*通用兄弟选择器 当前选中元素的向下所有的兄弟元素*/
.active~p{background: #c134b5;
}3.结构伪类选择器 伪类 条件
/*ul的第一个子元素*/
ul li:first-child{background: #24ff33;
}
/*ul的最后一个子元素*/
ul li:last-child{background: red;
}
/*选中p1: 定位到父元素选择当前的第一个元素选择当前p元素的父级元素选中父级元素的第一个并且是当前元素才生效*/
p:nth-child(2){background: #67e4ff;
}
/*选中父元素下的p元素的第二个类型 */
p:nth-of-type(2){background: yellow;
}4.属性选择器 id class 结合
!DOCTYPE html
html langzh-CN
headmeta charsetUTF-8title属性选择器/titlestyle.demo a{float: left;display: block;height: 50px;width: 50px;border-radius: 10px;background: aquamarine;text-align: center;color: gray;text-decoration: none;margin-right: 5px;line-height:50px;font: bold 20px/50px Arial;}/*属性名,属性名 属性值正则 表示绝对等于* 表示包含^ 表示以...开头$ 表示以...结尾存在id属性的元素a[]{}*/a[id]{background: deeppink;}a[idfirst]{/*idfirst的元素*/background: greenyellow;}a[class*links]{/*class 中有links的元素*/background: green;}a[href^http]{/*选中href中以http开头的元素*/background: aquamarine;}a[href$pdf]{/*选中href中以http开头的元素*/background: aquamarine;}/style
/head
body
p classdemoa hrefhttps://www.taobao.com/ classlinks item first idfirst淘宝/aa href classlinks item active target_blank titletest链接/aa hrefimg/hello.html classlinks item网页/aa hrefimg/str1.png classlinks itempng/aa hrefimg/str2.jpg classlinks itemjpg/aa hrefabc classlinks item链2/aa href/fy.pdf classlinks itempdf/aa href/quit.pdf classlinks itempdf2/aa hrefdump.doc classlinks itemdoc/aa hrefkiko.doc classlinks item lastdoc2/a
/p
/body
/html三、美化网页元素
/*span标签重点要突出的字使用span标签套起来*/
!DOCTYPE html
html langen
headmeta charsetUTF-8title美化网页/titlestyle#title{font-size: 25px;}/style
/head
body
编程语言:span idtitleJava/span
/body
/html字体样式
font-family字体 font-size字体大小 font-weight字体粗细 color字体颜色
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/titlestylebody{font-family: Arial Black;color: dodgerblue;}h1{font-size: 25px;}.p1{font-weight: 600;color: chocolate;}/style
/head
body
h1标题/h1
p正文6699/p
p classp1正文4444444/p
pStudy English and Computer/p
/body
/html文本样式
颜色color:agb / rgba() 文本对齐方式text-aligncenter 首行缩进text-indent2em 行高line-height300px 下划线text-decoration
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/titlestyleh1{color: rgba(0,255,255,0.9);text-align: center;}.p1{text-indent:2em;}.p3{line-height:300px;background: mediumaquamarine;height: 300px;}/*下划线*/.l1{text-decoration: underline;}/*中划线*/.l2{text-decoration: line-through;}/*上划线*/.l3{text-decoration: overline;}/*超链接去下划线*/a{text-decoration: none;}/style
/head
body
a hrefthis is a/a
p classl1this is p and l1/p
p classl2this is p and l2/p
p classl3this is p and l3/p
h1概述/h1
p classp1Bootstrap的官网地址是 https://www.bootcss.com/123。然而需要注意的是虽然这个地址在多个搜索结果中被引用但Bootstrap的官方资源现在可能更多地与Bootstrap的GitHub仓库或官方文档相关联。此外由于网址可能会随时间而变化请确保在访问时该网址仍然有效。Bootstrap是一个由Twitter推出的开源前端框架它提供了丰富的HTML、CSS和JavaScript设计模板用于开发响应式和移动优先的Web项目。在Bootstrap的官网上你可以找到详细的文档、示例、下载链接以及社区支持等信息。
/p
pCSS层叠样式表Cascading Style Sheets是一种用来表现HTML标准通用标记语言的一个应用或XML标准通用标记语言的一个子集等文件样式的计算机语言。CSS 能够对网页中元素的位置进行排版还可对不同的浏览器进行兼容性处理。
/p
p classp3CSS 能够对网页的颜色、字体、间距、大小、背景和其他图文效果实现更加精确的控制。与传统的HTML表现方式相比CSS能够使网页的表现与内容分离提高网页的加载速度增强页面的可维护性并且使得页面的布局更加灵活多样。
/p
/body
/html阴影
/*阴影的颜色水平偏移垂直偏移阴影半径*/
#price{text-shadow: deepskyblue 10px 10px 2px;
}超链接伪类
/*默认的颜色*/
a{text-decoration: none;color: #000000;
}
/*鼠标悬浮的状态只需要记住*/
a:hover{color: orange;font-size: 50px;
}列表
/*ul li*/
/*circle 空心圆decimal 数字square 正方形*/
/*ul li*/
ul {background: grey;
}
ul li{height: 30px; /*行高*/list-style: none; /*去掉圆点*/text-indent: 1em;
}背景
背景颜色background background-image:url(“”); /* 默认是全部平铺的 / background-repeat:repeat-x; / 水平平铺 / background-repeat:repeat-y; / 垂直平铺 / background-repeat:no-repeat; / 不平铺 */
背景图片
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/titlestylediv{width: 1000px;height: 700px;border: 1px solid red;background-image: url(images/ceshi.jpeg);/*默认是全部平铺的*/}.div1{background-repeat: repeat-x;}.div2{background-repeat: repeat-y;}.div3{background-repeat: no-repeat;}/style
/head
body
div classdiv1/div
div classdiv2/div
div classdiv3/div
/body
/html渐变背景网址https://www.baidu.com
径向渐变、圆形渐变html
!DOCTYPE html
html langen
headmeta charsetUTF-8title背景/titlestylebody{background-color: #08AEEA;background-image: linear-gradient(0deg, #08AEEA 0%, #2AF598 100%);}div{width: 500px;height: 200px;border: 1px solid mediumaquamarine;background-image: url(img/str.png);/* 默认是全部平铺的 */}/*水平平铺*/.div1{background-repeat: repeat-x;}/*垂直平铺*/.div2{background-repeat: repeat-y;}/*不平铺*/.div3{background-repeat: no-repeat;}/style
/head
body
div classdiv1/div
div classdiv2/div
div classdiv3/div
/body
/html盒子模型 什么是盒子模型 margin外边距 padding内边距 border边框 边框 边框的粗细 边框的样式 边框的颜色
/* 边框大小 边框样式 边框颜色 */
border: 1px solid #000000;内外边距 margin外边距 padding内边距
/*当margin/padding有一个参数上下左右都有边距有二个参数上下左右表示四个参数时上右下左表示
*/margin0 1px 2px 3px;盒子的计算方式元素到底多大
marginborderpadding内容宽度
圆角边框 4个角
div{width: 100px;height: 50px;margin: 30px;border: 2px solid red;border-radius: 50px 50px 0px 0px; /* 和边距的参数一样左上右上右下左下 */
}阴影
/*
h-shadow 必需。水平阴影的位置。允许负值。
v-shadow 必需。垂直阴影的位置。允许负值。
blur 可选。模糊的距离。
color 可选。阴影的颜色。
*/
text-shadow: h-shadow v-shadow blur color;浮动
标准文档流 块级元素独占一行 行内元素不独占一行 注意块级元素可以存在行内元素。
display block块元素 inline行内元素 inline-block是块元素但是可以内联在一行 这也是一种实现行内元素排列的方式但是我们很多情况用float。
!DOCTYPE html
html langen
headmeta charsetUTF-8titledispaly/titlestyle/*block: 块元素inline: 行内元素inline-block: 块元素但是可以内联none: 隐藏*/div{width: 100px;height: 100px;border: 1px solid darkorange;display: inline-block;}span{width: 100px;height: 100px;border: 1px solid darkorange;display: inline-block;}/style
/head
body
divdiv块元素/div
spanspan行内元素/span
/body
/htmlfloat 左右浮动 浮动的元素会脱离标准流
div{float: right;/*向右浮动*/
}父级边框塌陷问题
/*
clear: right; 右侧不允许有浮动元素
clear: left; 左侧不允许有浮动元素
clear: both; 两侧不允许有浮动元素
clear: none; 不允许有浮动元素
*/
.text{clear:both;
}解决父级边框塌陷问题
增加父级元素高度
#body{border: 1px #000 solid;height: 800px;
}增加一个空的div标签清除浮动
div classclear/div
.clear{clear: both;margin: 0;padding: 0;
}父类添加一个伪类after
#body:after{content: ;display: block;clear: both;
}定位 相对定位
相对定位positonrelstive 相对于原来的位置进行指定的偏移相对定位的话它仍然在标准文档流中原来的位置会被保留。
top:-20px; /* 向上偏移20px */
left:20px; /* 向右偏移20px */
bottom:10px; /* 向上偏移10px */
right:20px; /* 向左偏移20px */绝对定位
定位基于xxx定位上下左右 没有父级元素定位的前提下相对于游览器定位 假设父级元素村咋i定位我们通常会相对于父级元素进行便宜 在父级元素范围内移动 相对于父级或者游览器的位置进行指定的偏移绝对定位后它仍然在标准文档流中原来的位置不会被保留
div{position: absolute;/*绝对定位*/top: -20px;/*相对当前的位置 向上移动负值相反方向*/left: 20px;/*相对当前的位置 向右移动*/
}固定定位
固定定位使元素的位置相对于浏览器窗口来定位 即使窗口是滚动的它也不会移动
div{position: fixed;/*固定定位*/right: 0;bottom: 0;
}z-index
图层用定位的时候会产生会和其他元素重叠 相当于上一层盖住了下一层的内容
div{z-index:2;
}动画
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/title
style
div{width:100px;height:100px;background:red;animation:myfirst 5s; /* 动画执行时间 */
}
keyframes myfirst{0% {background: red;}25% {background: yellow;}50% {background: blue;}100% {background: green;}
}
/style
/head
bodydiv/div
/body
/html
