做网站推广销售产品,如何免费开个人网站,适合这手机浏览器主页的网站,西安网站建设云阔CSS ~ 从入门到入坑。 文章目录CSS ~ 从入门到入坑。what。css 三种实现方式。选择器。id 选择器 class 选择器 标签选择器。标签选择器。类选择器。id 选择器。层次选择器。后代选择器。子选择器。相邻兄弟选择器。通用选择器。结构伪类选择器。属性选择器。字体风格…CSS ~ 从入门到入坑。 文章目录CSS ~ 从入门到入坑。what。css 三种实现方式。选择器。id 选择器 class 选择器 标签选择器。标签选择器。类选择器。id 选择器。层次选择器。后代选择器。子选择器。相邻兄弟选择器。通用选择器。结构伪类选择器。属性选择器。字体风格。文本样式。文本阴影 超链接伪类。超链接伪类。列表。背景。渐变。盒子模型。圆角边框。阴影。浮动。what。
CSS 指层叠样式表Cascading Style Sheets。 样式定义如何显示 HTML 元素。 样式通常存储在样式表中。 把样式添加到 HTML 4.0 中是为了解决内容与表现分离的问题。 外部样式表可以极大提高工作效率。 外部样式表通常存储在 CSS 文件中。 多个样式定义可层叠为一。 css 优势。 内容和表现分离。页面结构表现统一可以实现复用。样式十分丰富。建议使用独立于 html 的 css 文件。利用 SEO容易被搜索引擎收录。 css 三种实现方式。 css 外部样式导入两种方式。 !-- 外部样式。--!-- 链接式。--link relstylesheet hrefcss/style.csscss 2.1 特有。 !-- 导入式。--styleimport css/style.css;/style!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/title!-- 内部样式。--!--style--!--h1 {--!--color: green;--!--}--!--/style--!-- 外部样式。--!-- 链接式。--link relstylesheet hrefcss/style.css!-- 导入式。--styleimport css/style.css;/style
/head
body!-- 优先级。就近原则。
--!-- 行内样式。在标签元素中编写一个 style 属性编写样式即可。--
!--h1 stylecolor: red;我是标题/h1--
h1我是标题/h1/body
/html 选择器。
id 选择器 class 选择器 标签选择器。
标签选择器。
类选择器。
id 选择器。
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/titlestyle/*!-- 标签选择器。--*/h1 {color: red;}/* 类选择器。.class名称{}可以多个标签归类。可以复用。*/.geek {color: green;}/* id 选择器。id 必须唯一。#id名称{}*//style/head
bodyh1 classgeek标题1/h1
h1 classli标题2/h1
h1标题3/h1p classgeekp 标签/ph1 idgeek classgeek标题1/h1
h1 classgeek标题2/h1
h1 classgeek标题3/h1/body
/html 层次选择器。
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/titlestyle/*p {*//*background-color: green;*//*}*//*!* 后代选择器。*!*//*body p {*//*background-color: red;*//*}*//*!* 子选择器。一代儿子。*!*//*body p {*//*background-color: lawngreen;*//*}*//* 相邻兄弟选择器。只有一个向下。p2*//*.active - p {*//*background-color: brown;*//*}*//* 通用选择器。*/.active ~ p {background-color: lawngreen;}/style
/head
bodypp0/p
p classactivep1/p
pp2/p
pp3/pullipp4/p/lilipp5/p/lilipp6/p/li
/ulp classactivep7/p
pp8/p/body
/html
后代选择器。 /* 后代选择器。*/body p {background-color: red;}子选择器。 /* 子选择器。一代儿子。*/body p {background-color: lawngreen;}相邻兄弟选择器。 /* 相邻兄弟选择器。只有一个向下。p2*/.active - p {background-color: brown;}通用选择器。 /* 通用选择器。*/.active ~ p {background-color: lawngreen;}!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/titlestylep {background-color: green;}/* 后代选择器。*/body p {background-color: red;}/* 子选择器。一代儿子。*/body p {background-color: lawngreen;}/* 相邻兄弟选择器。只有一个向下。p2*/.active - p {background-color: brown;}/* 通用选择器。*/.active ~ p {background-color: lawngreen;}/style
/head
bodypp0/p
p classactivep1/p
pp2/p
pp3/pullipp4/p/lilipp5/p/lilipp6/p/li
/ulp classactivep7/p
pp8/p/body
/html 结构伪类选择器。
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/title!-- 避免使用 .class, id 选择器。--style/*!-- ul 的第一个子元素。--*/ul li:first-child {background-color: lawngreen;}/*!-- ul 的最后一个子元素。--*/ul li:last-child {background: red;}/*!-- 选中 p1。按类型。选中当前 p 元素的父级元素选中父级元素的第一个子元素并且是当前元素才生效。--*/p:nth-child(2) {background: deepskyblue;}/* 父元素中第二个类型为 p 的元素。按顺序。*/p:nth-of-type(2) {background: yellow;}/style
/head
bodypp1/p
pp2/p
pp3/pullili1/lilili2/lilili3/li
/ul/body
/html 属性选择器。
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/titlestyle.demo a {float: left;display: block;height: 50px;width: 50px;border-radius: 10px;background: deepskyblue;text-align: center;color: #000;text-decoration: none;margin-right: 5px;font: bold 20px/50px Arial;}/* 存在 id 属性的元素。*/a[id] {background: yellow;}a[idfirst] {background: red;}/* class 中有 links 的元素。 绝对等于。* 通配。*/a[class*links] {background: green;}/* 选中 href 中以 http 开头的元素。*/a[href^http] {background: yellow;}/* 选中 href 中以 pdf 结尾的元素。*/a[href$pdf] {background: yellow;}/style/head
bodyp classdemoa hrefhttp://www.baidu.com classlinks item first idfirst1/aa href classlinks item active target_blank titletest2/aa hrefimages/123.html classlinks item3/aa hrefimages/123.png classlinks item4/aa hrefimages/123.jpg classlinks item5/aa hrefabc classlinks item6/aa href/a.pdf classlinks item7/aa href/abc.pdf classlinks item8/aa hrefabc.abc classlinks item9/aa hrefabcd.doc classlinks item last10/a/p/body
/html 字体样式。
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/titlestylebody {font-family: Arial Narrow, 楷体;}h1 {font-size: 50px;}.p1 {font-weight: bold;}.p3 {background: deepskyblue;height: 300px;line-height: 300px}/style/head
bodyh1标题/h1p classp1字体/p
p classp3大小/p
pEnglish/p/body
/html 字体风格。
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/title!-- 字体风格。--stylep {font: oblique lighter 16px 楷体;}/style
/head
bodyp字体风格。
/p/body
/html 文本样式。
颜色color rgb rgba。
文本对齐text-aligncenter
首行缩进text-indent: 2em;
行高line-height
装饰text-decoration: none;超链接去下划线。
文本图片水平对齐vertical-align: middle;。
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/titlestyle/*!-- 颜色单词RGB0 ~ FRGBAA 0 ~ 1--*/h1 {color: rgba(0, 255, 255, 0.9);text-align: right;}.p1 {text-indent: 2em;}/* text-align。排版居中。text-indent: 2em; 段落首行缩进。*/.p3 {background: deepskyblue;height: 300px;line-height: 300px}.l1 {text-decoration: underline;}.l2 {text-decoration: line-through;}.l3 {text-decoration: overline;}/style/head
bodyh1标题/h1p classl1123456/p
p classl2123456/p
p classl3123456/pp classp1字体/p
p大小/p
pEnglish/p/body
/html
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/titlestyle/*!-- 水平对齐 ~ 参照物。--*/img, span {vertical-align: middle;}/style/head
bodypimg srcimages/a.jpg altspanabcdefg/span
/p/body
/html 文本阴影 超链接伪类。
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/titlestyle/*!-- 默认的颜色。--*/a {text-decoration: none;color: #000;}/* 鼠标悬浮的颜色。*/a:hover {color: orange;font-size: 50px;}/* 鼠标按住未释放。*/a:active {color: green;}a:visited {color: pink;}#price {text-shadow: 10px 10px 10px deepskyblue;}/style
/head
bodya href#img srcimages/a.jpg alt width80 height103
/a
pa href#《码出高效Java开发手册》/a
/p
pa href杨冠宝花名孤尽/a
/p
p idprice99
/p
/body
/html 超链接伪类。
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/titlestyle/*!-- 默认的颜色。--*/a {text-decoration: none;color: #000;}/* 鼠标悬浮的颜色。*/a:hover {color: orange;font-size: 50px;}/* 鼠标按住未释放。*/a:active {color: green;}a:visited {color: pink;}#price {text-shadow: 10px 10px 10px deepskyblue;}/style
/head
bodya href#img srcimages/a.jpg alt width80 height103
/a
pa href#《码出高效Java开发手册》/a
/p
pa href杨冠宝花名孤尽/a
/p
p idprice99
/p
/body
/html 列表。
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/titlelink relstylesheet hrefcss/style.css
/head
bodydiv idnavh2 classtitle全部商品分类/h2ullia href#女装/anbsp;nbsp;a href#男装/anbsp;nbsp;a href#内衣/a/lilia href#鞋靴/anbsp;nbsp;a href#箱包/anbsp;nbsp;a href#配件/a/lilia href#童装玩具/anbsp;nbsp;a href#孕产/anbsp;nbsp;a href#用品/a/lilia href#家电/anbsp;nbsp;a href#数码/anbsp;nbsp;a href#手机/a/lilia href#美妆/anbsp;nbsp;a href#洗护/anbsp;nbsp;a href#保健品/a/lilia href#珠宝/anbsp;nbsp;a href#眼镜/anbsp;nbsp;a href#手表/a/lilia href#运动/anbsp;nbsp;a href#户外/anbsp;nbsp;a href#乐器/a/lilia href#游戏/anbsp;nbsp;a href#动漫/anbsp;nbsp;a href#影视/a/lilia href#美食/anbsp;nbsp;a href#生鲜/anbsp;nbsp;a href#零食/a/lilia href#鲜花/anbsp;nbsp;a href#宠物/anbsp;nbsp;a href#农贸/a/lilia href#面料集采/anbsp;nbsp;a href#装修/anbsp;nbsp;a href#/a/lilia href#家具/anbsp;nbsp;a href#家饰/anbsp;nbsp;a href#家纺/a/lilia href#汽车/anbsp;nbsp;a href#二手车/anbsp;nbsp;a href#用品/a/lilia href#办公/anbsp;nbsp;a href#DIY/anbsp;nbsp;a href#五金电子/a/lilia href#百货/anbsp;nbsp;a href#餐厨/anbsp;nbsp;a href#家庭保障/a/lilia href#学习/anbsp;nbsp;a href#卡券/anbsp;nbsp;a href#本地服务/a/li/ul
/div/body
/html
#nav {width: 300px;background: grey;
}.title {font-size: 18px;font-weight: bold;text-indent: 1em;line-height: 35px;background: red url(../images/down.png) 270px 10px no-repeat;
}/* ul li*/
ul {background: grey;
}ul li {height: 30px;list-style: none;text-indent: 1em;background-image: url(../images/down.png);background-repeat: no-repeat;background-position: 236px 2px;
}a {text-decoration: none;font-size: 13px;color: black;
}a:hover {color: orange;text-decoration: underline;
} 背景。
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/titlestylediv {width: 1000px;height: 700px;border: 1px solid red;background-image: url(images/a.jpg);/* 默认全部平铺。*/}.div1 {background-repeat: repeat-x;}.div2 {background-repeat: repeat-y;}.div3 {background-repeat: no-repeat;}/style/head
bodydiv classdiv1/div
div classdiv2/div
div classdiv3/div/body
/html 渐变。
https://www.grabient.com/
background-color: #FFFFFF;
background-image: linear-gradient(180deg, #FFFFFF 0%, #6284FF 50%, #FF0000 100%); 盒子模型。 body 标签默认有外边距。 margin。 n. 页边空白白边获胜者在时间或票数上领先的幅度差额差数余地备用的时间或空间、金钱等 padding。 n. 衬料衬垫赘语废话凑篇幅的文字 v. 用软材料填充覆盖保护蹑手蹑脚地走虚报账目做黑账pad 的现在分词 border。 n. 国界边界边疆边界地区镶边包边草坪边等的狭长花坛 v. 和…毗邻与…接壤沿…的边环绕…给…镶边
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/titlestyle/*!-- body 有一个默认外边距 margin: 0。--*/h1, ul, li, a, body {margin: 0;padding: 0;text-decoration: none;}h2 {font-size: 16px;background-color: deepskyblue;line-height: 30px;margin: 0;color: white;}#box {width: 300px;border: 1px solid red;}/* 标签选择器。*/form {background: forestgreen;}div:nth-of-type(1) input {border: 3px solid black;}div:nth-of-type(2) input {border: 3px dashed black;}div:nth-of-type(3) input {border: 3px solid black;}/style/head
bodydiv idboxh2会员登录/h2form action#divspan用户名/spaninput typetext/divdivspan密 nbsp;码/spaninput typetext/divdivspan邮 nbsp;箱/spaninput typetext/div/form
/div/body
/html
外边距。
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/titlestyle#box {width: 300px;border: 1px solid red;margin: 0 auto;/* 居中对齐。*//* 顺时针。*/}/* 标签选择器。*/form {background: forestgreen;}/* 外边距。*/input {border: 1px solid black;}/style/head
bodydiv idboxh2会员登录/h2form action#divspan用户名/spaninput typetext/divdivspan密 nbsp;码/spaninput typetext/divdivspan邮 nbsp;箱/spaninput typetext/div/form
/div/body
/html 圆角边框。
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/titlestylediv {width: 100px;height: 100px;border: 10px solid red;border-radius: 50px 20px; /* 左上 右下。主次对角线*/}/style/head
bodydiv/div/body
/html 阴影。
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/titlestylediv {width: 100px;height: 100px;border: 10px solid red;box-shadow: 10px 10px 100px yellow;}/style/head
bodydiv/div/body
/html 浮动。
块级元素。 h1~h6 p div 列表。 行内元素。 span a img strong 行内元素可以被包含在块级元素中反之则不可以。
