简单建设网站首页,在家做手工赚钱,学设计的个人网页设计作品欣赏,做网站应规避的风险Web之HTML、CSS、JS 二、CSS#xff08;Cascading Style Sheets层叠样式表#xff09;CSS与HTML的结合方式CSS选择器CSS基本属性CSS伪类DIVCSS轮廓CSS边框盒子模型CSS定位 Web之HTML笔记
二、CSS#xff08;Cascading Style Sheets层叠样式表#xff09;
Css是种格式化网… Web之HTML、CSS、JS 二、CSSCascading Style Sheets层叠样式表CSS与HTML的结合方式CSS选择器CSS基本属性CSS伪类DIVCSS轮廓CSS边框盒子模型CSS定位 Web之HTML笔记
二、CSSCascading Style Sheets层叠样式表
Css是种格式化网页的标准方式 用于控制设置网页的样式并且允许CSS样式信息与网页内容(由HTML语言定义)分离的一种技术。
优势
格式和结构分离有利于格式的重用以及网页的修改与维护。精确控制页面布局对网页实现更加精确的控制如网页的布局字体颜色背景等。实现多个网页同时更新。
CSS与HTML的结合方式
方式一内联/行内样式 在HTML标签上通过style属性来引用CSS代码。
优点简单方便缺点只能对一个标签进行修饰
bodydiv stylecolor: blue聚沙成塔滴水穿石。/div
/body方式二内部样式表 通过style标签来声明CSS。
优点可以通过多个标签进行统一的样式设置缺点只能在本页面上进行修饰
语法 选择器 {属性:值; 属性:值}
stylediv {color: blueviolet;}
/stylebodydiv聚沙成塔滴水穿石。/div
/body方式三外部样式表 单独定义一个CSS文件CSS文件的后缀名就是.css。 在head中使用link标签引用外部的css文件
/* test.css */
div {color: blueviolet
}
!DOCTYPE html
html langen !-- 英文 --headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0meta http-equivX-UA-Compatible contentieedgetitleHello, HTML!/titlelink relstylesheet hreftest.css
/headbodydiv聚沙成塔滴水穿石。/div
/body/htmlmeta标签
属性描述charset规定 HTML 文档的字符编码。content定义与 http-equiv 或 name 属性相关的元信息。http-equiv把 content 属性关联到 HTTP 头部。name把 content 属性关联到一个名称。scheme定义用于翻译 content 属性值的格式。
CSS选择器
元素标签选择器 它可以对页面上相同的标签进行统一的设置它描述的就是标签的名称。
stylediv {color: cyan}
/stylebodydiv聚沙成塔滴水穿石。/divdiv千里之行始于足下。/div
/body类选择器 id选择器 类选择器在使用时使用 . 来描述它描述的是元素上的class属性值。 id选择器只能选择一个元素使用 # 引入引用的是元素的id属性值。比类选择器更具唯一性
style.a {color: cyan}#b {color: blue}
/stylebodydiv classa聚沙成塔滴水穿石。/divdiv idb千里之行始于足下。/div
/bodyCSS基本属性
背景属性
background-color 设置元素的背景颜色。background-image 把图像设置为背景。background-repeat 设置背景图像的墙纸效果是否及如何重复 repeat在垂直方向和水平方向重复 repeat-x仅在水平方向重复 repeat-y仅在垂直方向重复 no-repeat仅显示一次background-position 设置背景图像的起始位置background-attachment 背景图像固定或随着页面滚动 默认值是 scroll默认情况下背景会随文档滚动 可取值为fixed背景图像固定并不会随着页面的其余部分滚动常用于实现称为水印的图像
!DOCTYPE html
html langen
headmeta charsetUTF-8titleDocument/titlestyle typetext/cssp{background-color: red;font-size: 40px;}.p1{font-family: 隶书;}body{/*background-color:yellow;background-image: url(image/wudaojiaoshi.jpg);background-repeat: no-repeat;background-attachment: fixed;background-position: 20px 30px;*/background:yellow url(image/wudaojiaoshi.jpg) no-repeat fixed 30px 40px;}/style
/head
bodyphttp://www.baidu.com/pp classp1baidu/pp classp1百度/p
/body
/html文本属性
指定字体font-family : value字体大小font-size : value px像素 em倍数 字体加粗font-weight : normal / bold规定斜体文本 font-style : italic倾斜强调实现斜体字 / oblique倾斜更注重实现倾斜效果常用/ normal正常显示默认值文本颜色color : value文本方向dircetion : ltr, rtl字符间距letter-spacing : npx(n可以是负数)行高line-height : value文本排列text-align : left / right / center/ ustify:两端对齐(应用在多行文本中单行文本不生效)文字修饰text-decoration : none / underline / line-through删除线/ overline文本设置阴影text-shadow首行文本缩进text-indent : valuenem, npx大小写字母转换text-transform : uppercase(全部大写) / lowercase(全部小写) / capitalize(在所有小写单词中首字母大写)列表属性 类型list-style-type : disc(圆点) / circle(圆圈) / square(方块) / decimal(数字)… 位置list-style-position : outside(外) / inside图像list-style-image : url(…)
CSS伪类
用于已有元素处于某种状态时滑动、点击等为其添加对应的样式这个状态是根据用户行为而动态变化的。
动态伪类作用:link链接没有被访问前的样式效果:visited链接被访问后的样式效果:hover鼠标悬停在元素上面时的样式效果:active点击元素时的样式效果即按下鼠标左键时发生的样式:focus用于元素成为焦点时的样式效果常用与表单元素
a:link{color:red;
}
a:visited{color: green;
}
a:hover{color: yellow;font-size: 30px;
}
a:active{color:blue;
}
label:hover{color:red;
}
input:hover{background-color: red;
}
input:active{background-color: blue;
}
input:focus{background-color: yellow;
}结构伪类作用:first-child选择某个元素的第一个子元素:last-child选择某个元素的最后一个子元素:nth-child()选择某个当前元素的兄弟节点下的一个或多个特定的子元素:nth-last-child()选择某个当前元素的兄弟节点的一个或多个特定的子元素从后往前数:first-of-type选择一个父级元素下第一个同类型子元素
伪元素选择器作用::selection选择指定元素中被用户选中的内容::before可以在内容之前插入新内容::after可以在内容之后插入新内容::first-line选择指定选择器的首行::first-letter选择文本的第一个字符
/*可以将p换成h1*/
p::before{content: 终于找到你;
}
/*可以将body也换成h1*/
body::after{content: 依依不舍离开你;
}
p::first-line{background-color: yellow;
}
p::first-letter{font-size: 30px;
}
p::selection{background-color: red;
}DIV
DIV是层叠样式表中的定位技术全称DIVision有时把div称为图层更多时候称为“块”。
DIV溢出处理效果
超出div宽度高度的文字或图片进行隐藏处理超出div宽度高度的文字或图片增加滚动条
overflow属性描述visible默认值。内容不会被修剪会呈现在元素框之外。hidden内容会被修剪并且其余内容是不可见的。scroll内容会被修剪但是浏览器会显示滚动条以便查看其余的内容。auto如果内容被修剪则浏览器会显示滚动条以便查看其余的内容。inherit规定应该从父元素继承 overflow 属性的值。
CSS轮廓
CSS轮廓是用于在元素周围绘制线条的属性位于边框边缘的外围可以起到突出元素的作用。轮廓的样式、颜色和宽度可以通过CSS outline属性进行规定轮廓是绘制于元素周围的一条线位于边框边缘的外围可起到突出元素的作用。
轮廓属性说明outline-color设置轮廓的颜色outline-style设置轮廓的样式 solid实线、dotted点线、dashed虚线、double双线、groove凹槽、ridge垄脊、inset内嵌、outset外凸或 none无轮廓outline-width设置轮廓的宽度outline-offset设置轮廓与元素边框之间的距离 像素值或正值百分比
CSS边框
指定元素边框的样式、宽度和颜色。
border属性说明border-width指定边框的宽度border-style指定边框的样式border-color指定边框的颜色
#div1{background-color: yellow;width: 150px;height: 150px;top:150px;left:150px;position: absolute;overflow: hidden;/*outline: none;*/border-bottom: solid;
}#div2{top:150px;left:350px;position: absolute;/*border-bottom: solid;*/
}input{border:none;border-bottom: solid;outline: none;
}盒子模型
CSS 中规定每个盒子分别由 内容区域content、内边距区域padding、边框区域border、外边距区域margin 构成这就是 盒子模型。
div{width: 200px;height: 200px;overflow: hidden;margin-left: 20px;
}
#div1{background-color: yellow;margin-top: 20px;margin-bottom: 20px;padding-right: 20px;box-sizing: border-box;
}
#div2{background-color: blue;}*{/*margin:0px 0px 0px 0px;*//*margin:0px 0px;*/margin-top: 0px;margin-left: 0px;margin-bottom: 0px;margin-right:0px;
}行级元素与块级元素的区别
行级元素行内元素和其他行内元素都会在一条水平线 上排列都是在同一行的a标签、label、img、span等块级元素块级元素在默认情况下会独占一行div 、h标签、li、table等
CSS定位
CSS position属性用于指定一个元素在文档中的定位方式定位分为静态定位相对定位绝对定位固定定位、粘性定位这五种其中top、right、bottom、left和z-index属性则决定了该元素的最终位置。
