定安住房和城乡建设局网站,php做原生直播网站,wordpress手机访问不了,天津网站定制公司CSS基础 前言一、CSS的概念1.什么是CSS2.CSS的发展史3.CSS的优势 二、CSS的导入方式1.行内样式2.内部样式3.外部样式 三、CSS的选择器1.基本选择器2.层次选择器3.结构伪类选择器4.属性选择器 四、美化网页元素1.为什么要美化网页2.字体样式3.文本样式4.阴影5.超链接伪类6.列表7… CSS基础 前言一、CSS的概念1.什么是CSS2.CSS的发展史3.CSS的优势 二、CSS的导入方式1.行内样式2.内部样式3.外部样式 三、CSS的选择器1.基本选择器2.层次选择器3.结构伪类选择器4.属性选择器 四、美化网页元素1.为什么要美化网页2.字体样式3.文本样式4.阴影5.超链接伪类6.列表7.背景8.渐变 五、盒子模型1.什么是盒子模型2.边框3.内外边距4.圆角边框5.阴影 六、浮动1.标准文档流2.display3.float4.父级边框塌陷问题 七、定位1.相对定位2.相对定位3.固定定位4.z-index 八、动画 前言
本文为CSS基础知识与语法介绍Java全栈学习路线可参考【Java全栈学习路线】最全的Java学习路线及知识清单Java自学方向指引内含最全Java全栈学习技术清单~
一、CSS的概念
1.什么是CSS
CSSCascading Style Sheet 层叠样式表。CSS表现美化网页。字体颜色边距高度宽度背景图片网页定位网页浮动。
2.CSS的发展史
CSS 1.0CSS 2.0 DIV(块)CSSHTML与CSS结构分离的思想网页简单SEOCSS 2.1 浮动定位CSS 3.0 圆角阴影动画…浏览器兼容性~
3.CSS的优势
内容与表现分离网页结构表现统一可以实现复用样式十分丰富
二、CSS的导入方式
1.行内样式
!--行内样式:在标签元素中编写一个style属性编写样式即可--
h1 stylecolor: aquamarineCSS3测试/h12.内部样式
!--内部样式--
styleh1{color: yellow;}
/style3.外部样式
链接式
!--外部样式——链接式--
link relstylesheet hrefcss/style.css导入式
!--外部样式——导入式--
!--CSS2.1--
styleimport url(css/style.css);
/style三、CSS的选择器
1.基本选择器
标签选择器 选择一类标签 标签{}
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/title
/head
body
style/*标签选择器会选择页面上所有的对应标签*/h1{color: #c134b5;background: black;}
/style
stylep{background: aquamarine;color: red;font-size: 80px;}
/styleh1王小姐/h1h1夏先生/h1p蜗牛小姐/p
/body
/html类选择器 class 选择所有class属性一致的表情跨标签.类名{}
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/title
/head
body
!--类选择器格式.class的名称{}好处可以选择一组类类名一致--
style.girl{color: #c134b5;}
/style
style.boy{color: blue;}
/style
h1 classgirl王小姐/h1
h1 classboy夏先生/h1
h2 classgirl蜗牛小姐/h2
p classgirl王苡辰/p
/body
/htmlID选择器 全局唯一 #id名{}
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/title
/head
body
!--id选择器 : id必须保证全局唯一#id 名称{}不遵循就近 原则固定的优先级 id选择器 class选择器 标签选择器--
style#girl{color: #c134b5;}
/style
style#boy{color: blue;}
/style
h1 idgirl王小姐/h1
h1 idboy夏先生/h1
h2 classgirl蜗牛小姐/h2
p classgirl王苡辰/p
/body
/html2.层次选择器
后代选择器 在某个元素的后面
/*后代选择器*/
body p{background: #c134b5;
}子选择器 一代面
/*子选择器*/
bodyp{background: #c134b5;
}相邻兄弟选择器对下不对上
/*兄弟选择器 只有一个向下*/
.active p{background: #c134b5;
}通用选择器
/*通用兄弟选择器 当前选中元素的向下所有的兄弟元素*/
.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 langen
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四、美化网页元素
1.为什么要美化网页
有效的传递页面信息美化网页页面漂亮才能吸引客户凸显页面的主题提高用户的体验
/*span标签重点要突出的字使用span标签套起来*/
!DOCTYPE html
html langen
headmeta charsetUTF-8title美化网页/titlestyle#title{font-size: 25px;}/style
/head
body
编程语言:span idtitleJava/span
/body
/html2.字体样式
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
/html3.文本样式
颜色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 href4399-7k7k/a
p classl1123123123/p
p classl2123123123/p
p classl3123123123/p
h1概述/h1
p classp1夸克一词是盖尔曼取自詹姆斯·乔伊斯的小说《芬尼根的守灵夜》的词句“向麦克老人三呼夸克Three quarks for Muster Mark”。无非是指一个质子中有三个夸克。另外夸克在该书中具有多种含义其中之一是一种海鸟的叫声。他认为这适合他最初认为“基本粒子不基本、基本电荷非整数”的奇特想法同时他也指出这只是一个笑话这是对矫饰的科学语言的反抗。另外也可能是出于他对鸟类的喜爱。 [7]盖尔曼原本想用鸭的叫声来命名夸克。开始时他并不太确定自己这个新词的实际拼法直到他在詹姆斯·乔伊斯小说《芬尼根守灵夜》里面找到“夸克”这个词
/p
p在1963年我把核子的基本构成命名为“夸克”quark我先有的是声音而没有拼法所以当时也可以写成“郭克”kwork。不久之后在我偶尔翻阅詹姆斯·乔伊斯所著的《芬尼根守灵夜》时我在“向麦克老大三呼夸克”这句中看到夸克这个词。由于“夸克”字面上意为海鸥的叫声很明显是要跟“麦克”及其他这样的词押韵所以我要找个借口让它读起来像“郭克”。但是书中代表的是酒馆老板伊厄威克的梦词源多是同时有好几种。书中的词很多时候是酒馆点酒用的词。所以我认为或许“向麦克老大三呼夸克”源头可能是“敬麦克老大三个夸脱”那么我要它读“郭克”也不是完全没根据。再怎么样字句里的三跟自然中夸克的性质完全不谋而合。
/p
p classp3茨威格则用“埃斯”Ace来称呼他所理论化的粒子但是在夸克模型被广泛接纳时盖尔曼的用词就变得很有名。很多中国物理学家则称夸克为“层子”在台湾地区亦曾翻译“亏子”但并不普遍使用。
/p
/body
/html4.阴影
/*阴影的颜色水平偏移垂直偏移阴影半径*/
#price{text-shadow: deepskyblue 10px 10px 2px;
}5.超链接伪类
/*默认的颜色*/
a{text-decoration: none;color: #000000;
}
/*鼠标悬浮的状态只需要记住*/
a:hover{color: orange;font-size: 50px;
}6.列表
/*ul li*/
/*circle 空心圆decimal 数字square 正方形*/
/*ul li*/
ul {background: grey;
}
ul li{height: 30px; /*行高*/list-style: none; /*去掉圆点*/text-indent: 1em;
}7.背景
背景颜色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
/html8.渐变
渐变背景网址https://www.grabient.com径向渐变、圆形渐变
body{background-color: #0cd7f3;background-image: linear-gradient(43deg, #0093E9 0%, #80D0C7 46%, #23F549 100%);
}!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五、盒子模型
1.什么是盒子模型
margin外边距padding内边距border边框
2.边框
边框的粗细边框的样式边框的颜色
/* 边框大小 边框样式 边框颜色 */
border: 1px solid #000000;3.内外边距
margin外边距padding内边距
/*当margin/padding有一个参数上下左右都有边距有二个参数上下左右表示四个参数时上右下左表示
*/margin0 1px 2px 3px;盒子的计算方式元素到底多大
marginborderpadding内容宽度
4.圆角边框
4个角
div{width: 100px;height: 50px;margin: 30px;border: 2px solid red;border-radius: 50px 50px 0px 0px; /* 和边距的参数一样左上右上右下左下 */
}5.阴影
/*
h-shadow 必需。水平阴影的位置。允许负值。
v-shadow 必需。垂直阴影的位置。允许负值。
blur 可选。模糊的距离。
color 可选。阴影的颜色。
*/
text-shadow: h-shadow v-shadow blur color;六、浮动
1.标准文档流
块级元素独占一行
!-- h1-h6 p div ... --行内元素不独占一行
!-- span a img strong ... --注意块级元素可以存在行内元素。
2.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
/html3.float
左右浮动浮动的元素会脱离标准流
div{float: right;/*向右浮动*/
}4.父级边框塌陷问题
/*
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;
}七、定位
1.相对定位
相对定位positonrelstive相对于原来的位置进行指定的偏移相对定位的话它仍然在标准文档流中原来的位置会被保留。
top:-20px; /* 向上偏移20px */
left:20px; /* 向右偏移20px */
bottom:10px; /* 向上偏移10px */
right:20px; /* 向左偏移20px */2.相对定位
定位基于xxx定位上下左右没有父级元素定位的前提下相对于游览器定位假设父级元素村咋i定位我们通常会相对于父级元素进行便宜在父级元素范围内移动相对于父级或者游览器的位置进行指定的偏移绝对定位后它仍然在标准文档流中原来的位置不会被保留
div{position: absolute;/*绝对定位*/top: -20px;/*相对当前的位置 向上移动负值相反方向*/left: 20px;/*相对当前的位置 向右移动*/
}3.固定定位
固定定位使元素的位置相对于浏览器窗口来定位即使窗口是滚动的它也不会移动
div{position: fixed;/*固定定位*/right: 0;bottom: 0;
}4.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
