Java EE 进阶：2.2 CSS

目录2.CSS2.1 CSS 介绍2.1.1 什么是 CSS2.1.2 基本语法规范2.1.3 引入方式2.1.4 规范2.2 CSS 选择器2.3 常用 CSS2.3.1 color2.3.2 font-size2.3.3 border2.3.4 width/height改变显示模式2.3.5 内边距2.3.6 外边距更多实操样例和更为详细的内容参考下面这篇博客前端基础——CSS保姆级课堂笔记2.CSS2.1 CSS 介绍2.1.1 什么是 CSSCSSCascading Style Sheet层叠样式表用于控制页面的样式CSS 能够对网页面中元素位置的排版进行像素级精确控制实现美化页面的效果能够做到页面的样式和结构分离CSS 可以理解为“东方四大邪术”之化妆术对页面的展示进行“化妆”CSS 前→CSS 修饰后2.1.2 基本语法规范选择器{一条/N条声明}选择器决定针对谁修改找谁声明决定修改啥干啥声明的属性是键值对使用区分键值对使用区分键和值style p { /* 设置字体颜色 */ color: red; /* 设置字体大小 */ font-size: 30px; } /style phello/p注意CSS 要写到 style 标签中后面还会介绍其他写法style 标签可以放到页面任意位置一般放到 head 标签内CSS 使用 /* */ 作为注释使用 ctrl / 快速切换2.1.3 引入方式CSS 有 3 种引入方式语法如下表所示引入方式语法描述示例行内样式在标签内使用 style属性属性是 css 属性键值对div stylecolor:green绿色/div内部样式定义style标签在标签内部定义 css 样式styleh1{…}/style外部样式定义link标签通过href属性引入外部 css 文件link relstylesheet href[CSS 文件路径]3 种引入方式对比1.内部样式会出现大量的代码冗余不方便后期的维护所以不常用课堂上为了方便讲解使用该方式2.行内样式只适合于写简单样式只针对某个标签生效缺点是不能写太复杂的样式3.外部样式html 和 css 实现了完全的分离企业开发常用方式2.1.4 规范样式大小写虽然 CSS 不区分大小写我们开发时统一使用小写字母空格规范冒号后面带空格选择器和 { 之间也有一个空格2.2 CSS 选择器CSS 选择器的主要功能就是选中页面指定的标签元素选中了元素才可以设置元素的属性就好比 SC2,War3 这样的游戏需要先选中单位再指挥该单位行动CSS 选择器主要分以下几种1.标签选择器2.class 选择器3.id 选择器4.复合选择器5.通配符选择器我们通过代码来学习 CSS 选择器的使用div classfont32我是一个divclass为font32/div div classfont32我是一个divclass为font32/div diva href#我是一个div/a/div ul liaaa/li libbb/li lia href#ccc/a/li /ul ol li1111/li li2222/li li3333/li /ol button idsubmit提交/button1.标签选择器/* 选择所有的a标签设置颜色为红色 */ a { color: red; } /* 选择所有的div标签设置颜色为绿色 */ div { color: green; }2.类选择器/* 选择class为font32的元素设置字体大小为32px */ .font32 { font-size: 32px; }一个类可以被多个标签使用一个标签也能使用多个类多个类名要使用空格分割这种做法可以让代码更好复用3.ID 选择器/* 选择id为submit的元素设置颜色为红色 */ #submit { color: red; }id 是唯一的不能被多个标签使用是和 类选择器 最大的区别4.通配符选择器/* 设置页面所有元素颜色为红色*/ * { color: red; }5.复合选择器/*只设置 ul标签下的 li标签下的 a标签颜色为红色*/ ul li a { color: blue; }1.以上三个标签选择器 ullia 中的任意都可以替换成类选择器或者 id 选择器可以是任意选择器的组合也可以是任意数量选择器的组合2.不一定是相邻的标签也可以是“孙子”标签3.如果需要选择多种标签可以使用分割如 pdiv{ }表示同时选中 p 标签和 div 标签逗号前后可以是以上任意选择器也可以是选择器的组合2.3 常用 CSS更多样式可以参考 文档或者 w3school 也挺不错的在这里也可以亲自运行尝试接下来学习一些常见的 CSS 样式准备如下 htmldiv classtext1我是文本1/div2.3.1 colorcolor设置字体颜色.text1{ color: red; }颜色有如下几种表达方式英文单词如 red,bluergb代码的颜色如 rgb(255,0,0)十六进制的颜色如 #ff00ff2.3.2 font-sizefont-size设置字体大小.text1{ font-size: 32px; }2.3.3 borderborder边框边框是一个复合属性可以同时设置多个样式不分前后顺序浏览器会根据设置的值自动判断.text1{ border: 1px solid purple; }以上 border 属性的对应设置的维度分别为边框粗细边框样式边框颜色也可以拆开来设置样式说明取值border-width设置边框粗细数值border-style设置边框样式①dotted点状②solid实线③double双线④dashed虚线border-color设置边框颜色同 colorborder1px solid purple就等同于以下代码.text1 { /* border: 1px purple solid; */ border-width: 1px; border-style: solid; border-color: purple; }2.3.4 width/heightwidth设置宽度height设置高度只有块级元素可以设置宽高块级元素是 HTML 标签的一种显示模式对应的还有行内元素常见块级元素h1-h6pdiv 等常见行内元素a span块级元素独占一行可以设置宽高比如同样是宽500px高200pxdiv 作为行内元素就正常生效而 span 作为块级元素就无法生效改变显示模式使用 display 属性可以修改元素的显示模式displayblock 改成块级元素[常用]displayinline 改成行内元素[很少用].text1 { width: 500px; height: 200px; }2.3.5 内边距注意内边距和外边距都是相对的概念~~padding内边距设置内容和边框之间的距离内容默认是顶着边框来放置的用 padding 来控制这个距离.text1 { padding: 20px; }padding 也是一个复合样式可以对四个方向分开设置padding-yoppadding-bottompadding-leftpadding-right2.3.6 外边距margin外边距设置元素和元素之间的距离.text1 { margin: 20px; }margin 也是一个复合样式可以给四个方向都加上外边距margin-topmargin-bottommargin-leftmargin-right