ui参考网站,做网站推广的好处,网红商城,建立网站容量目录 1.CSS简介1.什么是CSS2.为什么使用CSS3.CSS作用 2.基本用法1.CSS语法2.CSS应用方式1. 内部样式2.行内样式3.外部样式1.使用 link标签 链接外部样式文件2.import 指令 导入外部样式文件3.使用举例 3.选择器1.基础选择器1.标签选择器2.类选择器3.ID选择器4.使用举例 2.复杂选… 目录 1.CSS简介1.什么是CSS2.为什么使用CSS3.CSS作用 2.基本用法1.CSS语法2.CSS应用方式1. 内部样式2.行内样式3.外部样式1.使用 link标签 链接外部样式文件2.import 指令 导入外部样式文件3.使用举例 3.选择器1.基础选择器1.标签选择器2.类选择器3.ID选择器4.使用举例 2.复杂选择器1.复合选择器2.组合选择器3.嵌套选择器4.使用举例5.伪类选择器6.伪元素选择器 3.选择器优先级1.优先级2.可以使用!important使某个样式有最高的优先级 4.常用CSS属性1.字体属性1.font-size:大小、尺寸2.font-weight:粗细3.font-family:字体4.font-style:样式5.font:组合 2.文本属性1.使用举例 3.背景属性4.列表属性5.表格属性 5.盒子模型1.简介2.border3.padding4.margin 6.定位方式7.其他CSS属性1.浮动属性和清除属性2.元素的显示和隐藏1.display2.visibility3.display和display的区别4.代码举例 3.轮廓属性1.简介2.基本用法3.outline和border的区别4.代码举例 4.宽高相关5.overflow属性6.cursor属性 8.页面布局1.简介2.表格布局1.简介2.用法3.代码举例 3.div布局1.简单布局1. 1-1-1布局2. 1-2/ 3-1布局 4.圣杯布局 CSS基础知识学习。 1.CSS简介
1.什么是CSS CSS是一组样式设置的规则用于控制页面的外观样式. 2.为什么使用CSS 实现内容与样式的分离便于团队开发。 样式复用便于网站的后期维护。 页面的精确控制让页面更精美。 3.CSS作用 页面外观美化。布局和定位。 2.基本用法
1.CSS语法
headstyle选择器{属性名属性值;属性名属性值;}/style
/head选择器要修饰的对象东西。属性名修饰对象的哪一个属性样式。属性值样式的取值。 例如 !DOCTYPE html
html langenheadmeta charsetUTF-8titleDocument/titlestylep{color: red;background: #cccccc;}h2{color: blue;}/style/headbodypCSS从入门到精通/ph2摸鱼/h2/body
/html运行结果 2.CSS应用方式 有三种方式内部样式、行内样式、外部样式。 1. 内部样式 也称为内嵌样式在页面头部通过style标签定义。对当前页面中所有符合样式选择器的标签都起作用。 行内样式举例 !DOCTYPE html
html langenheadmeta charsetUTF-8titleDocument/titlestylep{color: red;background: #cccccc;}h2{color: blue;}/style/headbodypCSS从入门到精通/ph2摸鱼/h2/body
/html2.行内样式 也称为嵌入样式使用HTML标签的style属性定义。只对设置style属性的标签起作用。 行内样式举例 !DOCTYPE html
html langenheadmeta charsetUTF-8titleDocument/title/headbodyp stylecolor: rgb(34, 33, 33);CSS从入门到精通/ph2 stylecolor: blue;摸鱼/h2/body
/html3.外部样式 使用单独的 .CSS 文件定义然后在页面中使用 link标签 或 import指令 引入。 1.使用 link标签 链接外部样式文件
link relstylesheet typetext/css hrefCSS样式文件的路径提示type属性可以省略 2.import 指令 导入外部样式文件
styleimport CSS样式文件路径;import url(CSS样式文件路径);
/style3.使用举例
!DOCTYPE html
html langen
headmeta charsetUTF-8titleDocument/title!-- link relstylesheet typetext/css hrefstyle/hello.css --styleimport url(style/hello.css);/style
/head
bodypwelcome to CSS!/pp欢迎来到CSS课堂!/phrh2 stylecolor:red;WEB前段工程师/h2h2JAVA开发工程师/h2hrdiv嘿嘿/divdiv哈哈/div
/body
/html3.选择器
1.基础选择器
1.标签选择器 也称为元素选择器使用HTML标签作为选择器的名称。以标签名作为样式应用的依据。 2.类选择器 使用自定义的名称以 . 号作为前缀然后再通过HTML标签的class属性调用类选择器。 以标签的class属性作为样式应用的依据。 注意事项 调用时不能添加 . 号 。同时调用多个类选择器时,以 空格 分隔 。类选择器名称不能以 数字 开头。 3.ID选择器 使用自定义名称以 # 作为前缀然后通过HTML标签的id属性进行名称匹配。 以标签的id属性作为样式应用的依据一对一的关系。 4.使用举例
!DOCTYPE html
html langen
headmeta charsetUTF-8titleDocument/titlestylep{color:red;font-size:20px;}h2{color:yellow;}.hello{background: #cccccc;}.world{font-weight:bold;}#haha{color:blue;}/style
/head
bodypwelcome to css!/pphello world!/phrp classhellowelcome to css!/pphello world!/ph2前端开发/h2h3后端开发/h3div classhello张三/divdiv classworld李四/divhrh1 idhaha哈哈/h1
/body
/html运行结果 2.复杂选择器
1.复合选择器 标签选择器和类选择器、标签选择器和ID选择器一起使用。 必须同时满足两个条件才能应用样式。 2.组合选择器 也称为集体声明。 将多个具有相同样式的选择器放在一起声明使用逗号隔开。 3.嵌套选择器 在某个选择器内部再设置选择器通过空格隔开。 只有满足层次关系最里层的选择器所对应的标签才会应用样式。 注意使用 空格 时不区分父子还是后代使用CSS3中新增的 时必须是父子关系才行。 4.使用举例
!DOCTYPE html
html langen
headmeta charsetUTF-8titleDocument/titlestyle/* 1.标签选择器和类选择器合起来使用----复合选择器 */h1.aaa{color:red;}/* 1.标签选择器和ID选择器合起来使用----复合选择器 */p#bbb{color:blue;}/* 2.组合选择器 */h1,p,div,span,.ccc{font-size:30px;}div{background:violet;}.ccc{font-weight:bold;}/* 3.嵌套选择器 *//* div p{color:green;text-decoration:underline;} */divp{color:green;text-decoration:underline;}div h3.ddd{color:red;}/style
/head
body!-- 需求只想修饰class属性为aaa的h1标签 --h1 classaaawelcome/h1h4 classaaacss/h4h1hello/h1hr!-- 我要修饰ID属性为bbb的p标签 --p idbbbworld/p phtml/phr!-- 给h1、p、div、span标签中的内容设置字号为30px --h1hello/h1pCSS/pdivWEB开发/divspan classcccJAVA开发/spanhr!-- 需求修饰div内部的p标签 --divpdiv内部的p标签/ph3div内部的h3标签/h3/divhrdivh3pdiv内部的h3内部的p标签/p/h3/divhr!-- 需求修饰div内部的class为ddd的标签 --divpdiv内部的p/ph3 classddddiv内部的h3/h3p classdddPPPP/p/divh3 classdddh3h3h3/h3
/body
/html运行结果 5.伪类选择器 根据不同的状态显示不同的样式一般多用于标签。 四种状态 :link 未访问的链接 。 :visited 已访问的链接。 :hover 鼠标悬浮到连接上即移动在连接上。 :active 选定的链接被激活。 注默认超链接为蓝色、下划线。 !DOCTYPE html
html langen
headmeta charsetUTF-8title伪类选择器/titlestyle/*a:link{font-size: 12px;color:black;text-decoration: none;}a:visited{font-size: 15px;color:;}a:hover{font-size: 20px;color:blue;}a:active{font-size: 40px;color:green;}*/a:link,a:visited{color:#666666;font-size: 13px;text-decoration: none;}a:hover,a:active{color:#ff7300;text-decoration: underline;}/*普通的标签也可以使用伪类选择器*/p:hover{color:red;}p:active{color:blue;}/style
/head
bodya href复杂选择器.html复杂选择器.html/apCSS从入门到精通/p
/body
/html6.伪元素选择器 :first-letter 为第一个字符的样式。 :first-line 为第一行添加样式。 :before 在元素内容的最前面添加的内容需要配合content属性使用。 :after 在元素内容的最后面添加的内容需要配合content属性使用。 !DOCTYPE html
html langen
headmeta charsetUTF-8titleDocument/titlestylep:first-letter{color:red;font-size:30px;}p:first-line{background:pink;}p:before{content:嘿嘿;}p:after{content:哈哈;}/style
/head
bodyphello world!/phrphello world! brwelcome to css!/p
/body
/html运行结果 3.选择器优先级
1.优先级 行内样式ID选择器类选择器标签选择器。 原因首先加载标签选择器,再加载类选择器然后加载ID选择器最后加载行内样式。 后加载会覆盖先加载的同名样式。 2.可以使用!important使某个样式有最高的优先级
4.常用CSS属性
1.字体属性 1.font-size:大小、尺寸 取值 inherited继承默认从父标签继承字体大小默认值所有CSS属性的默认值都是inheritedpx像素 pixel。%百分比相对父标签字体大小的百分比。em倍数相对于父标签字体大小的倍数。HTML根元素默认字体的大小为16px,也称为基础字体大小。 2.font-weight:粗细
3.font-family:字体
4.font-style:样式
5.font:组合 是font-style、font-weight、font-size、font-family的组合编写。 必须按照先后顺序来顺序为font-style、font-weight、font-size、font-family,例子如下 !DOCTYPE html
html langen
headmeta charsetUTF-8titleDocument/titlestylediv{font-size: 30px;}p{/*font-size: 20px;*/font-size: 80%;}body{font-size: 62.5%;}ul li{/*font-size: 30px;font-weight: bold;font-family: 华文行楷,宋体,黑体;font-style: italic;*/font: italic bold 30px 微软雅黑;}/style
/head
bodypCSS从入门到精通/phrdiv我的DIVpCSS从入门到精通/p/divhrhrulli嘿嘿/li/ul
/body
/html2.文本属性 1.使用举例
!DOCTYPE html
html langen
headmeta charsetUTF-8titleDocument/titlestylep{color: red;/*background-color: #ccc;*//*background-color: rgba(0,255,0,0.5);*/background-color: rgba(0, 237, 255, 0.5);line-height: 50px;text-align: center;}img{vertical-align: middle;}div{text-indent: 30px;}span{font-size: 30px;text-decoration: underline;text-transform: capitalize;letter-spacing: 10px;world-spacing:;}h3{width: 300px;height: 200px;background-color:#ccc;white-space: nowrap;overflow:hidden;}/style
/head
bodypwelcome to css!/ppwelcome to css!/ppwelcome to css!/phrimg srchead.jpg width15%HTML和CSS很简单吗hrdivnbsp;nbsp;welcome to CSS welcome to CSS welcome to CSS welcome to CSS welcome to CSS welcome to CSS welcome to CSS welcome to CSS welcome to CSS welcome to CSS welcome to CSS welcome to CSS welcome to CSS welcome to CSS welcome to CSS welcome to CSS welcome to CSS welcome to CSS welcome to CSS/divhrdivwelcome to CSS welcome to CSS welcome to CSS welcome to CSS welcome to CSS welcome to CSS welcome to CSS welcome to CSS welcome to CSS welcome to CSS welcome to CSS welcome to CSS welcome to CSS welcome to CSS welcome to CSS welcome to CSS welcome to CSS welcome to CSS welcome to CSS/divhrspanhello world/spanhrh3welcome to CSS welcome to CSS welcome to CSS welcome to CSS welcome to CSS welcome to CSS welcome to CSS welcome to CSS welcome to CSS welcome to CSS welcome to CSS welcome to CSS welcome to CSS welcome to CSS welcome to CSS welcome to CSS welcome to CSS welcome to CSS welcome to CSS/h3hr
/body
/html运行结果 3.背景属性 4.列表属性 5.表格属性 border-collapse:表格中相邻的边框是否合并折叠为单一边框。 !DOCTYPE html
html langen
headmeta charsetUTF-8titleDocument/titlestyletable{width:500px;border:1px solid blue;border-collapse:collapse;}td{border:1px solid blue;}/style
/head
body!-- table(trtd{td$}*5)*4 --table cellspacing0pxcellpadding0pxtrtdbbb/tdtdaaa/tdtdaaa/tdtdtd4/tdtdtd5/td/trtrtdaaa/tdtdaaa/tdtdbbb/tdtdtd4/tdtdtd5/td/trtrtdtd1/tdtdtd2/tdtdtd3/tdtdtd4/tdtdtd5/td/trtrtdtd1/tdtdtd2/tdtdtd3/tdtdtd4/tdtdtd5/td/tr/table
/body
/html运行结果 5.盒子模型
1.简介 盒子模型是网页布局的基础将页面中所有元素都看作是一个盒子盒子都包含以下几个属性 width 宽度。height 高度 。border 边框 。padding 内边距。margin 外边距。 2.border 表示盒子的边框。 分为四个方向 上top、右right、下bottom、左left。 border-top、border-right、border-bottom、border-left。 每个边框包含三种样式 border-top-color、border-top-width、border-top-style border-right-color、border-right-width、border-right-style border-bottom-color、border-bottom-width、border-bottom-style border-left-color、border-left-width、border-left-style 样式style的取值 solid实线、dashed虚线、dotted点线、double双线、inset内嵌的3D线、outset外嵌的3D线。 3.padding 表示盒子的内边距即内容与边框之间的距离。 同样也分为四个方向也可以简写按顺时针方向默认上下一样左右一样。 4.margin 表示盒子的外边距即盒子与盒子之间的距离。 同样也分为四个方向也可以简写按顺时针方向默认上下一样左右一样。 6.定位方式 通过position属性实现对元素的定位有四种定位方式。 代码举例 !DOCTYPE html
html langenheadmeta charsetUTF-8titleDocument/titlestyle/* id选择器 */#container {width: 800px;border: 2px solid #000000;position:relative;}/* 类选择器 */.div1,.div2,.div3,.div4 {width: 100px;height: 50px;}.div1 {background: red;position: relative;top: 20px;left: 50px;z-index: -5;}.div2 {background: blue;position: absolute;left: 100px;bottom: 50px;z-index: 100px;}.div3 {background: green;position: fixed;bottom: 50px;left: 100px;}.div4 {background: cyan;}/style
/headbodydiv idcontainerdiv classdiv1div1/divdiv classdiv2div2/divdiv classdiv3div3/divdiv classdiv4div4/div/div
/body/html运行结果 7.其他CSS属性
1.浮动属性和清除属性 通过float属性来实现元素的浮动可以让块级元素脱离常规的文档流向左或向右移动在同一行显示如果一行显示不下则会换行显示。通过clear属性来实现清除设置元素的哪一侧不允许有浮动元素。 2.元素的显示和隐藏
1.display 通过display属性设置元素是否显示以及是否独占一行。 2.visibility 也可以通过visibility属性设置元素的显示和隐藏。 常用属性 3.display和display的区别 display隐藏时不再占据页面中的空间后面的元素会占用其位置。 visibility隐藏时会占据页面中的空间位置还保留在页面中只是不显示。 4.代码举例
!DOCTYPE html
html langenheadmeta charsetUTF-8titleDocument/titlestyle.div1{width:100px;height: 100px;background: blue;display: inline;}span{width: 100px;height: 100px;background: 50px;display: inline-block;}i{display: block;width: 100px;height: 50px;background: red;}p{width: 50px;height: 50px;background: red;}.p1{visibility: hidden;}.login{display: inline-block;text-decoration: none;background: rgba(255, 0,0, 0);color: #940ff2;padding: 10px;text-align: center;border-radius: 10px;}.login:hover{background: #05f14c;}/style/headbodydiv classdiv1div1/divspanspan1/spani呵呵/ihrp classp1Hello/pp classp2World/phra hrefjavascript:alert(欢迎光临) classlogin登nbsp;nbsp;录/a/body
/html运行结果 3.轮廓属性
1.简介
轮廓outline,用于在元素周围绘制一个轮廓位于border外围可以突出显示元素。
2.基本用法 常用属性: outline-width:轮廓宽度 。 outline-color:轮廓颜色。 outline-style:轮廓样式。 outline简写。 在浏览器中当鼠标单击或使用TAB键让一个表单或链接获得焦点时该元素会有一个轮廓outline 优点可以提高使用表单的用户体验。 缺点有时会影响美观。 3.outline和border的区别 border可以应用于所有html元素而outline主要用于表单元素、超链接元素。当元素获得焦点时会自动出现outline轮廓效果当失去焦点时会自动消失这是浏览器默认行为。outline不影响元素的尺寸和位置而border会影响。 4.代码举例
!DOCTYPE html
html langenheadmeta charsetUTF-8titleDocumnet/titlestylespan{border: 2px solid red;outline: 4px dashed green;}.userName{border: 1px solid red;outline: none;padding-left: 3px;width: 80px;}.email{border: 0;outline: 0;border-bottom: 1px solid #000;}.btnsubmit{border: 0;padding: 5px;width: 100px;}.mydiv{width: 100px;background: #ccc;border: 2px solid red;}/style/head
bodyspanwelcome to CSS/spanhr用户名input typetext classusernamea href#CSS/ahr邮箱input typetext classemailinput typesubmit value提交 classbtnsubmithrdiv classmydivdiv/div
/body
/html运行结果 4.宽高相关 max-width:设置元素的最大宽度 。max-height:设置元素的最大高度。min-width设置元素的最小宽度。min-height设置元素的最小高度。 5.overflow属性 当元素内容溢出时该如何处理。 常用取值 visible溢出时可见显示在元素外默认值。hidden溢出的部分不可见常用。scroll无论是否出现溢出始终出现滚动条。auto溢出时自动出现滚动条。 6.cursor属性 用于设置光标的形状。 常用属性 default默认光标一般为箭头。pointer手形光标移动超链接上时一般显示为手形。move表示可移动。text表示文本。wait表示程序正忙需要等待。hep表示帮助。 代码举例 !DOCTYPE html
html langen
headmeta charsetUTF-8titleDocument/titlestylep{border:1px solid red;min-width:500px;}div{border:1px solid blue;width: 300px;height: 100px;overflow:auto;}span{cursor:help;}/style
/head
bodypwelcome to css welcome to css welcome to css welcome to csswelcome to css welcome to css welcome to css welcome to csswelcome to css welcome to css welcome to css welcome to csswelcome to css welcome to css welcome to css welcome to css/phrdivwelcome to css welcome to css welcome to css welcome to csswelcome to css welcome to css welcome to css welcome to csswelcome to css welcome to css welcome to css welcome to csswelcome to css welcome to css welcome to css welcome to css/divhrspan光标形状/span
/body
/html 运行结果 8.页面布局
1.简介 常见页面布局 表格布局 。div布局。 2.表格布局
1.简介 不适用于复杂布局仅用于简单 、有规则的结构。 定位相对准确与浏览器基本无关适用于简单分隔。 2.用法 table常用样式的属性 border在表格外围设置边框。border-spacing设置单元格之间的距离相当于table标签中的cellspacing属性即间距。border-collapse表格中相邻边框是否合并取值seprate、collapse。 th/td常用样式属性 border为单元格设置边框。padding设置单元格的内边距相当于table标签中的cellpadding属性边距。 3.代码举例
!DOCTYPE html
html langen
headmeta charsetUTF-8titleDocument/titlestyle.hello{width: 80%;border:1px solid #ccc;border-spacing:0;border-collapse:collapse;}.hello th,.hello td{border:1px solid #ccc;padding:5px;}/style
/head
body!-- table(theadtrth{th$}*4)tbody(trtd{td$}*4)*6 --table classhellotheadtrthth1/ththth2/ththth3/ththth4/th/tr/theadtbodytrtdtd1/tdtdtd2/tdtdtd3/tdtdtd4/td/trtrtdtd1/tdtdtd2/tdtdtd3/tdtdtd4/td/trtrtdtd1/tdtdtd2/tdtdtd3/tdtdtd4/td/trtrtdtd1/tdtdtd2/tdtdtd3/tdtdtd4/td/trtrtdtd1/tdtdtd2/tdtdtd3/tdtdtd4/td/trtrtdtd1/tdtdtd2/tdtdtd3/tdtdtd4/td/tr/tbody/table
/body
/html 运行结果 3.div布局 定位绝对精确使用灵活适合于复杂的布局方式。 1.简单布局
1. 1-1-1布局
!DOCTYPE html
html langen
headmeta charsetUTF-8titleDocument/titlelink relstylesheet hrefcss/style1.css
/head
bodydiv idcontainerheader classheaderheader/headerarticle classmainmain/articlefooter classfooterfooter/footer/div
/body
/html 运行结果 2. 1-2/ 3-1布局
!DOCTYPE html
html langen
headmeta charsetUTF-8titleDocument/titlelink relstylesheet hrefcss/style2.css
/head
bodydiv idcontainerheader classheaderherder/headerarticle classwrappersectionmain/sectionasideright aside/aside/articlefooter classfooterfooter/footer/div
/body
/html运行结果 4.圣杯布局 页面结构两边的边栏宽度固定中间主体在一定范围内可自适应并且主体优先被加载。 一般防止页面缩放影响浏览都会为页面设置一个最小宽度。 !DOCTYPE html
html langen
headmeta charsetUTF-8 titleDocument/title link relstylesheet hrefcss/style4.css
/head
bodydiv idcontainerheader classheader header /header article classwrapper section classmainmain/sectionaside classleft left/aside aside classright right/aside /articlefooter classfooter footer /footer /div
/body
/html 运行结果
