1. CSS 介绍CSS(Cascading Style Sheet)层叠样式表, 用于控制页面的样式。CSS 能够对网页中元素位置的排版进行像素级精确控制实现美化页面的效果能够做到页面的样式和 结构分离。CSS 是在 HTML 文档结构的基础上进行样式定义的。HTML 提供了页面的内容和结构标题、段落、表单、图片等。CSS 则用来控制这些内容“如何显示”颜色、大小、位置、间距、动画等。例如在前一个文章中通过 HTML标签的学习我们做出了一个用户登录页面的框架这个页面可以通过 CSS 进行美化即 CSS 可以理解为化妆术对页面展示的内容进行 化妆。文章详情HTML 标签2. 语法规范选择器 {⼀条/N条声明}选择器决定针对谁修改 (找谁)声明决定修改啥. (干啥)声明的属性是键值对. 使用 ; 区分键值对使用 : 区分键和值注意CSS 要写到style标签中(后⾯还会介绍其他写法) style 标签可以放到页面任意位置⼀般放到 head 标签内。【CSS 使⽤ /* */ 作为注释. (使用 ctrl / 快速切换)】示例选择 div 标签作为选择器声明修改 div 标签的内容的{字体颜色字体大小等}通过浏览器运行3. css 引入方式3.1 行内样式在标签内使用 style 属性属性值是 css 属性键值对。示例通过上述的例子也说明 style 遵循就近原则哪个较近就用哪个颜色。行内样式只适合于写简单样式只针对某个标签生效缺点是不能写太复杂的样式。3.2 内部样式定义 style 标签在标签内部定义 css 样式。其实我们前面讲语法规范时所用到的例子就是一个内部样式。语法style 选择器 { 声明属性: 值; ………… } /style不过内部样式不常使用因为会出现大量的代码冗余内部样式只对当前一个 HTML 页面有效如果有10个页面都是相同的样式那么采用内部样式就必须在每一个页面的 style 里把同样的 CSS 代码重新写一遍不方便后期的维护假设你要把全局按钮颜色从蓝色改成红色你需要分别打开 10 个页面手动修改 10 次。3.3 外部样式定义link标签link 标签通常放在 head 中通过href属性引入外部 css 文件。只需改一个 .css 文件所有页面自动生效html和css实现了完全的分离。将样式定义在 style.css 文件中然后通过 link 标签的 href 属性引入 style.css 中的样式其中rel 属性是 relationship关系的缩写。它告诉浏览器当前 HTML 文档与被链接的资源之间是什么关系。例如以下的例子 stylesheet 表示链接到的 style.css 文件与当前页面的关系是“样式表”。通过浏览器运行4. 规范1样式大小写虽然 CSS 不区分大小写我们开发时统⼀使用小写字母。2空格规范冒号后面带空格选择器和 { 之间也有⼀个空格。5.CSS 选择器CSS 选择器的主要功能就是选中页面指定的标签元素选中了元素才可以设置元素的属性5.1 标签选择器标签选择器也叫类型选择器的作用是选中 HTML 页面中所有特定类型的标签并为它们统一设置 CSS 样式。语法直接写标签名后面跟上花括号内的样式规则如以下的代码将所有 div 标签中的文字变成 矢车菊蓝通过浏览器运行发现 div3 并没有变成设置的颜色这是因为浏览器默认给 a 标签设置了独立的颜色样式并且它不会自动继承父元素的 color所以 div3 的文字颜色不变。想要让 a 标签变色可以直接给 a 标签加样式或者可以这样写5.2 id 选择器id 选择器的作用是选中 HTML 页面中具有指定 id 属性的唯一元素/标签并为其应用 CSS 样式。语法在 CSS 中id 选择器以#开头后面紧跟 id 值示例5.3 class 选择器class 选择器的作用是选中 HTML 页面中所有具有指定 class 属性的元素/标签并统一应用 CSS 样式。语法在 CSS 中class 选择器以.开头后面紧跟类名示例5.4 通配符选择器通配符选择器的作用是选中 HTML 页面中的所有元素包括 html、body、div、p、span 等所有标签甚至伪元素等并为它们统一应用 CSS 样式。语法示例——————5.5 复合选择器复合选择器也称为组合选择器的作用是通过多个简单选择器组合在一起更精确、更具体地选中页面中的目标元素。它可以减少 class 或 id 的滥用让 CSS 更具结构化和可维护性。复合选择器将多个简单选择器组合在一起利用元素的特征和 DOM 关系交集、后代、子元素、兄弟等来精确命中目标元素从而实现更精准、更语义化的样式控制。示例示例2无序列表标签 ul 和 有序列表标签 ol如果只想要 a 标签改变样式可以使用 复合选择器来设置6. 常用 CSS样式例如以下的 htmldiv classtest我是文本/div6.1 color设置字体颜色除了上述中 通过 英文单词 表达颜色的方式还可以通过rgb()颜色模式表达RGB 代表 红Red、绿Green、蓝Blue 三个通道每个通道取值范围 0~255或 0%~100%通过混合产生各种颜色。例如 蓝色它的三原色比例如下图红色0绿色0蓝色是255也就是纯蓝色可以通过这个调色盘选出我们想要的颜色还可以使用 hex十六进制 的方式表示甚至可以设置颜色的透明度6.2 font-size设置字体大小6.3 border设置边框边框是⼀个复合属性有上-top 下- bottom 左-left 右-right, 可以同时设置多个样式, 不分前后顺序, 浏览器会根据设置的值自动判断。如以上的 border 属性对应的设置分别是设置 边框粗细边框样式边框颜色。可以拆开来设置border-width设置边框粗细border-style设置边框样式dotted点状solid实线double双线dashed虚线border-color设置边框颜色等同于 colorborder: 2px solid pink;就等同于以下代码:我们说过边框是分上下左右的我们可以分别对它的四个边框进行样式的设置即border-width: 5px;就等于以下的代码我们也可以直接这样写border-width: 2px 3px 5px 3px因为边框默认情况下是按照顺时针方向分别设置边框的即 上右下左。同样的style 和 color 也可以通过上述的两种方式去分别设置样式6.4 width/height设置宽度和高度注意只有块级元素可以设置宽高。因为块级元素独占一行就可以设置宽高而行内元素不独占一行不能设置宽高。对 行内标签设置同样的样式使用 display 属性可以修改元素的显示模式display: block 改成块级元素 [常用]display: inline 改成行内元素 [很少用]将行内标签改为块级标签6.5 padding/marginpadding: 内边距, 设置内容和边框之间的距离。内容默认是顶着边框来放置的用 padding 来控制这个距离margin: 外边距, 设置标签和标签之间的距离。padding 和 margin 是 复合样式, 可以对四个方向分开设置padding/margin-toppadding/margin-bottompadding/margin-leftpadding/margin-right示例想要让标签与标签之间不要挨在一起可以使用 margin 设置外边距让它们的距离分开但是通过上述的设置后块标签之间错位了由于边距标签是复合样式通过上述的 margin 设置后边框的四个方向全都生效了由于这里只是想要让 标签和标签之间不要挨在一起因此单独设置 下bottom 边框即可在 div1 盒子中在嵌套一个 div3 此时给 div3 设置它的 宽度和高度以及边框此时给这个 div3 设置一下它的外边距那么相对于 div1来说就是设置 div1 的内边距padding或者直接在 div3 内设置我们可以通过浏览器去调试一下看看以上边框以及边距的设置效果按 F12我们设置的内容全部在这里显示了。
【HTML+CSS+JavaScript】02 CSS样式
1. CSS 介绍CSS(Cascading Style Sheet)层叠样式表, 用于控制页面的样式。CSS 能够对网页中元素位置的排版进行像素级精确控制实现美化页面的效果能够做到页面的样式和 结构分离。CSS 是在 HTML 文档结构的基础上进行样式定义的。HTML 提供了页面的内容和结构标题、段落、表单、图片等。CSS 则用来控制这些内容“如何显示”颜色、大小、位置、间距、动画等。例如在前一个文章中通过 HTML标签的学习我们做出了一个用户登录页面的框架这个页面可以通过 CSS 进行美化即 CSS 可以理解为化妆术对页面展示的内容进行 化妆。文章详情HTML 标签2. 语法规范选择器 {⼀条/N条声明}选择器决定针对谁修改 (找谁)声明决定修改啥. (干啥)声明的属性是键值对. 使用 ; 区分键值对使用 : 区分键和值注意CSS 要写到style标签中(后⾯还会介绍其他写法) style 标签可以放到页面任意位置⼀般放到 head 标签内。【CSS 使⽤ /* */ 作为注释. (使用 ctrl / 快速切换)】示例选择 div 标签作为选择器声明修改 div 标签的内容的{字体颜色字体大小等}通过浏览器运行3. css 引入方式3.1 行内样式在标签内使用 style 属性属性值是 css 属性键值对。示例通过上述的例子也说明 style 遵循就近原则哪个较近就用哪个颜色。行内样式只适合于写简单样式只针对某个标签生效缺点是不能写太复杂的样式。3.2 内部样式定义 style 标签在标签内部定义 css 样式。其实我们前面讲语法规范时所用到的例子就是一个内部样式。语法style 选择器 { 声明属性: 值; ………… } /style不过内部样式不常使用因为会出现大量的代码冗余内部样式只对当前一个 HTML 页面有效如果有10个页面都是相同的样式那么采用内部样式就必须在每一个页面的 style 里把同样的 CSS 代码重新写一遍不方便后期的维护假设你要把全局按钮颜色从蓝色改成红色你需要分别打开 10 个页面手动修改 10 次。3.3 外部样式定义link标签link 标签通常放在 head 中通过href属性引入外部 css 文件。只需改一个 .css 文件所有页面自动生效html和css实现了完全的分离。将样式定义在 style.css 文件中然后通过 link 标签的 href 属性引入 style.css 中的样式其中rel 属性是 relationship关系的缩写。它告诉浏览器当前 HTML 文档与被链接的资源之间是什么关系。例如以下的例子 stylesheet 表示链接到的 style.css 文件与当前页面的关系是“样式表”。通过浏览器运行4. 规范1样式大小写虽然 CSS 不区分大小写我们开发时统⼀使用小写字母。2空格规范冒号后面带空格选择器和 { 之间也有⼀个空格。5.CSS 选择器CSS 选择器的主要功能就是选中页面指定的标签元素选中了元素才可以设置元素的属性5.1 标签选择器标签选择器也叫类型选择器的作用是选中 HTML 页面中所有特定类型的标签并为它们统一设置 CSS 样式。语法直接写标签名后面跟上花括号内的样式规则如以下的代码将所有 div 标签中的文字变成 矢车菊蓝通过浏览器运行发现 div3 并没有变成设置的颜色这是因为浏览器默认给 a 标签设置了独立的颜色样式并且它不会自动继承父元素的 color所以 div3 的文字颜色不变。想要让 a 标签变色可以直接给 a 标签加样式或者可以这样写5.2 id 选择器id 选择器的作用是选中 HTML 页面中具有指定 id 属性的唯一元素/标签并为其应用 CSS 样式。语法在 CSS 中id 选择器以#开头后面紧跟 id 值示例5.3 class 选择器class 选择器的作用是选中 HTML 页面中所有具有指定 class 属性的元素/标签并统一应用 CSS 样式。语法在 CSS 中class 选择器以.开头后面紧跟类名示例5.4 通配符选择器通配符选择器的作用是选中 HTML 页面中的所有元素包括 html、body、div、p、span 等所有标签甚至伪元素等并为它们统一应用 CSS 样式。语法示例——————5.5 复合选择器复合选择器也称为组合选择器的作用是通过多个简单选择器组合在一起更精确、更具体地选中页面中的目标元素。它可以减少 class 或 id 的滥用让 CSS 更具结构化和可维护性。复合选择器将多个简单选择器组合在一起利用元素的特征和 DOM 关系交集、后代、子元素、兄弟等来精确命中目标元素从而实现更精准、更语义化的样式控制。示例示例2无序列表标签 ul 和 有序列表标签 ol如果只想要 a 标签改变样式可以使用 复合选择器来设置6. 常用 CSS样式例如以下的 htmldiv classtest我是文本/div6.1 color设置字体颜色除了上述中 通过 英文单词 表达颜色的方式还可以通过rgb()颜色模式表达RGB 代表 红Red、绿Green、蓝Blue 三个通道每个通道取值范围 0~255或 0%~100%通过混合产生各种颜色。例如 蓝色它的三原色比例如下图红色0绿色0蓝色是255也就是纯蓝色可以通过这个调色盘选出我们想要的颜色还可以使用 hex十六进制 的方式表示甚至可以设置颜色的透明度6.2 font-size设置字体大小6.3 border设置边框边框是⼀个复合属性有上-top 下- bottom 左-left 右-right, 可以同时设置多个样式, 不分前后顺序, 浏览器会根据设置的值自动判断。如以上的 border 属性对应的设置分别是设置 边框粗细边框样式边框颜色。可以拆开来设置border-width设置边框粗细border-style设置边框样式dotted点状solid实线double双线dashed虚线border-color设置边框颜色等同于 colorborder: 2px solid pink;就等同于以下代码:我们说过边框是分上下左右的我们可以分别对它的四个边框进行样式的设置即border-width: 5px;就等于以下的代码我们也可以直接这样写border-width: 2px 3px 5px 3px因为边框默认情况下是按照顺时针方向分别设置边框的即 上右下左。同样的style 和 color 也可以通过上述的两种方式去分别设置样式6.4 width/height设置宽度和高度注意只有块级元素可以设置宽高。因为块级元素独占一行就可以设置宽高而行内元素不独占一行不能设置宽高。对 行内标签设置同样的样式使用 display 属性可以修改元素的显示模式display: block 改成块级元素 [常用]display: inline 改成行内元素 [很少用]将行内标签改为块级标签6.5 padding/marginpadding: 内边距, 设置内容和边框之间的距离。内容默认是顶着边框来放置的用 padding 来控制这个距离margin: 外边距, 设置标签和标签之间的距离。padding 和 margin 是 复合样式, 可以对四个方向分开设置padding/margin-toppadding/margin-bottompadding/margin-leftpadding/margin-right示例想要让标签与标签之间不要挨在一起可以使用 margin 设置外边距让它们的距离分开但是通过上述的设置后块标签之间错位了由于边距标签是复合样式通过上述的 margin 设置后边框的四个方向全都生效了由于这里只是想要让 标签和标签之间不要挨在一起因此单独设置 下bottom 边框即可在 div1 盒子中在嵌套一个 div3 此时给 div3 设置它的 宽度和高度以及边框此时给这个 div3 设置一下它的外边距那么相对于 div1来说就是设置 div1 的内边距padding或者直接在 div3 内设置我们可以通过浏览器去调试一下看看以上边框以及边距的设置效果按 F12我们设置的内容全部在这里显示了。
