做淘宝客为什么要做网站,淮安建筑信息平台,滨海专业做网站的公司,龙游网站建设CSS 文章目录 CSS语法引入方式内部样式表行内样式表外部样式 选择器基础选择器标签选择器类选择器id选择器通配符选择器 复合选择器后代选择器伪类选择器链接伪类选择器 字体设置设置文本颜色粗细样式文本对齐 背景背景颜色背景平铺背景尺寸 圆角矩形元素显示模式块级元素 盒模…CSS 文章目录 CSS语法引入方式内部样式表行内样式表外部样式 选择器基础选择器标签选择器类选择器id选择器通配符选择器 复合选择器后代选择器伪类选择器链接伪类选择器 字体设置设置文本颜色粗细样式文本对齐 背景背景颜色背景平铺背景尺寸 圆角矩形元素显示模式块级元素 盒模型内边距外边距 chrome调试工具案例广告版百度热搜 层叠样式表 (Cascading Style Sheets). CSS 能够对网页中元素位置的排版进行像素级精确控制, 实现美化页面的效果. 能够做到页面的样式和结构分离
也就是控制页面展示效果
语法
选择器 {一条/N条声明} 选择器决定针对谁修改 (找谁) 声明决定修改啥. (干啥) 声明的属性是键值对. 使用 ; 区分键值对, 使用 : 区分键和值.
引入方式
内部样式表
将css嵌套到html页面中
优点: 这样做能够让样式和页面结构分离.
缺点: 分离的还不够彻底. 尤其是 css 内容多的时候
行内样式表
通过 style 属性, 来指定某个标签的样式.
只适合于写简单样式. 只针对某个标签生效.
缺点: 不能写太复杂的样式.
这种写法优先级较高, 会覆盖其他的样式.
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
stylep{color: red;/* 这是注释 */}
/style
bodyphello world/ph1 stylecolor: blue; font-size: 80px;你好/h1
/body
/html这个示例说明行内样式表的优先级比内部样式表的优先级高~
外部样式
实际开发中最常用的方式. 创建一个 css 文件. 使用 link 标签引入 css
link relstylesheet href[CSS文件路径]选择器
1. 基础选择器: 单个选择器构成的 标签选择器 类选择器 id 选择器 通配符选择器
2. 复合选择器: 把多种基础选择器综合运用起来. 后代选择器 子选择器 并集选择器 伪类选择器
文档
基础选择器
标签选择器
特点: 能快速为同一类型的标签都选择出来. 但是不能差异化选择
style
p {color: red;
}
div {color: green;
}
/style
p咬人猫/p
p咬人猫/p
p咬人猫/p
div阿叶君/div
div阿叶君/div
div阿叶君/div类选择器
特点: 差异化表示不同的标签 可以让多个标签的都使用同一个标签.
style.blue {color: blue;}
/style
div classblue咬人猫/div
div咬人猫/div可以多个类名会叠加效果
id选择器
和类选择器类似. CSS 中使用 # 开头表示 id 选择器 id 选择器的值和 html 中某个元素的 id 值相同 html 的元素 id 不必带 # id 是唯一的, 不能被多个标签使用 (是和 类选择器 最大的区别)
通配符选择器
使用 * 的定义, 选取所有的标签
* {color: red;
}通配符选择器是在实际应用开发中用来针对页面中所有元素默认样式进行消除主要用来消除边距。
页面的所有内容都会被改成 红色 .
不需要被页面结构调用
作用特点标签选择器能选出所有相同的标签不能差异化选择类选择器能选出一个或多个标签根据需求选择最灵活最常用id选择器能选出一个标签同一个id在一个HTML中只能出现一次通配符选择器选择所有标签特殊情况使用
复合选择器
将基础的选择器进行组合
后代选择器
又叫包含选择器. 选择某个父元素中的某个子元素.
元素1 元素2 {样式声明}元素 1 和 元素 2 要使用空格分割 元素 1 是父级, 元素 2 是子级, 只选元素 2 , 不影响元素 1
/head
!-- 将有序列表改成红色 --
style/* 第一种方法 *//* ol li {color: red;} *//* 第二种方法 *//* .hobby li {color: red;} *//* 第三种方法 */
li a{color: red;
}
/stylebodyulli吃饭/lili吃饭/lili吃饭/li/ulol classhobbyli吃饭/lili吃饭/lilia href#吃饭/a/li/ol
/body/html伪类选择器
使用来定义元素状态的
链接伪类选择器
a:link 选择未被访问过的链接a:visited 选择已经被访问过的链接a:hover 选择鼠标指针悬停上的链接a:active 选择活动链接(鼠标按下了但是未弹起)!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title!-- 需求默认展示黑色当鼠标悬停到上卖弄的时候此时展示红色当鼠标按下去但是鼠标没有弹起来此时展示绿色 --stylea{color: black;}a:hover{color: red;}a:active{color: green;}input{color: blue;}input:hover{color: aqua;}input:active{color: yellow;}/style
/head
bodya href#不跳转/abrinput typebutton value按钮 name id
/body
/html选择器作用注意事项后代选择器选择后代元素可以是孙子元素子选择器选择子元素只能选亲儿子不能选孙儿子并集选择器选择相同样式的元素代码重用链接伪类选择器选择不同状态的链接a:hoverfocuse伪类选择器选择被选中的元素input:focus
字体设置
参考文档CSS 参考手册 (w3school.com.cn)
stylediv{font-family: 宋体;font-size: 80px;}/style设置文本颜色
color: red;
color: #ff0000;
color: rgb(255, 0, 0);粗细
font-weight 样式
font-style 文本对齐
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyleh1{text-align: left;}h2{text-align: center;text-decoration: overline;}h3{text-align: right;text-decoration: line-through;}p{/* text-indent: 20px; */text-indent: 2em;text-decoration: underline;line-height: 200px;}a{text-decoration: none;}/style
/head
bodyh1靠左/h1h2居中/h2h3靠右/h3p哥别学了。我承认我被卷破防了我再也不和你比学习了我彻彻底底的被击败了就像小丑一样落荒而逃和你相比我的努力实在是太可笑了没有意义的我已经认识到了无论我怎么努力也不可能超过你就算我一天学25个小时也永远追不上你的进度看着你的笔尖落在算草纸上就好像刀尖划在我的自尊心上一样我彻彻底底的被击败了甚至没有一点还手的能力。就这样吧我天生不是这块料书已经出门的时候被我扔垃圾桶里了面对天书一样的数学你谈笑间就的出答案而我抓耳挠腮憋红了脸只能说一句这道题是不是应该…这么做你无情的嘲笑把我的内心深处的自尊打的粉碎是我错了一开始就错了从我决定跟着你去图书馆偷偷看你学习的进度的时候就错了妄图和你追求同样的进度就好比和霍金比赛跑步和科比直升机驾驶一样荒唐无稽。那就到此为止吧再继续学就不礼貌了你是未来之星国家栋梁是成语里面的学富五车才高八斗是都市小说里的城市之光是俗语里的天秀之人是粤语里的巴鸠撚闭是武侠小说里的人中龙是吾日三省吾身的自律者是相亲节目里面的心动嘉宾是自然界的丛林之王是世间所有丑与恶的睡弃者是世间所有美与好的创造者一想到我与你这群优秀的人呼吸同一股空气我就忍不住羞耻与自卑。再见我去睡觉了。/p
a href#不跳转/a
/body
/html背景
背景颜色
background-color: [指定颜色]##### 背景平铺
background-repeat: [平铺方式]背景尺寸
background-size: length|percentage|cover|contain圆角矩形
通过 border-radius 使边框带圆角效果.
border-radius: length;length 是内切圆的半径. 数值越大, 弧线越强烈
border-radius: 10px 20px 30px 40px;
等价于
border-top-left-radius:10px;
border-top-right-radius:20px;
border-bottom-right-radius:30px;
border-bottom-left-radius:40px;元素显示模式
块级元素行内元素
块级元素
h1 - h6
p
div
ul
ol
li特点 独占一行 高度, 宽度, 内外边距, 行高都可以控制. 宽度默认是父级元素宽度的 100% (和父元素一样宽) 是一个容器(盒子), 里面可以放行内和块级元素
stylea{display: block;}/style
/head
bodya href#链接1/aa href#链接2/a
/body
/html盒模型 stylediv{width: 200px;height: 100px;/* border-color: black;border-style: solid;border-width: 10px; */border: black solid 10px;box-sizing: border-box;}/style
/head
bodydiv/div
/body内边距
padding 设置内容和边框之间的距离. stylediv{width: 200px;height: 100px;/* padding-left: 5px;padding-right: 5xp;padding-top: 5px;padding-bottom: 5px; */padding: 5px 5px 5px 5px;}/style
/head
bodydiv这是一个div/div
/body
/html外边距 stylediv{border: solid green 5px;width: 200px;height: 100px;margin: auto;text-align: center;}/style
/head
bodydivsasas/divdivsasaa/divdivaasas/div
/body
/htmlchrome调试工具
有两种方式可以打开 Chrome 调试工具 直接按 F12 键 鼠标右键页面 检查元素 案例
广告版
!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle.box{width: 308px;height: 204px;border: #d8dad8 solid 2px;}.title{padding-left: 40px;border-bottom: 2px dotted #e8ebe8;}.item{font-size: 16px;flood-color: #898b76;padding-left: 25px;line-height: 28px;padding-top: 10px;}/style
/headbodydiv classboxdiv classtitle广告版/divdiv classcontentdiv classitem赔钱清仓甩卖全场一律一折/divdiv classitem赔钱清仓甩卖全场一律一折/divdiv classitem赔钱清仓甩卖全场一律一折/divdiv classitem赔钱清仓甩卖全场一律一折/div/div/div
/body/html百度热搜
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestylea{color: blue;text-decoration: none;}a:hover{text-decoration: underline;}table{width: 536px;}.title .col-1{font-size: 20px;font-weight: bolder;}.col-1{width: 80%;text-align: left;}.col-2{width: 20%;text-align: center;}.icon{background-image: url(./刷新.png);width: 24px;height: 24px;background-size: 100% 100%;display: inline-block;vertical-align: bottom;}.content{font-size: 18px;line-height: 40px;}.content .col-1,.content.col-2{border-bottom: 2px solid #f3f3f3;}.num{font-size: 20px;color: #fffff3;}.first{background-color: #f54545;padding-right: 8px;}.second{background-color: #ff8547;padding-right: 8px;}.third{background-color: #ffac38;padding-right: 8px;}.other{background-color: #8eb9f5;padding-right: 8px;}/style
/head
bodytable cellspacing0pxth classtitle col-1百度热榜/thth classtitle col-2a href#换一换span classicon/span/a/thtr classcontenttd classcol-1span classnum first1/spana href#浙大回应不开除强奸犯学生/a/tdtd classcol-2474万/td /trtr classcontenttd classcol-1span classsecond first2/spana href#浙大回应不开除强奸犯学生/a/tdtd classcol-2474万/td /trtr classcontenttd classcol-1span classthird first3/spana href#浙大回应不开除强奸犯学生/a/tdtd classcol-2474万/td /trtr classcontenttd classcol-1span classother first4/spana href#浙大回应不开除强奸犯学生/a/tdtd classcol-2474万/td /tr/table
/body
/html接下来会持续更新敬请期待~
