企业网站 三网系统,网站内链符号,网站建设排期表,除了seo还可以做哪些推广呢找往期文章包括但不限于本期文章中不懂的知识点#xff1a; 个人主页#xff1a;我要学编程程(ಥ_ಥ)-CSDN博客 所属专栏#xff1a;速通前端 目录
CSS的介绍
基本语法规范
CSS选择器
标签选择器
class选择器
id选择器
复合选择器
通配符选择器
CSS常见样式
颜…找往期文章包括但不限于本期文章中不懂的知识点 个人主页我要学编程程(ಥ_ಥ)-CSDN博客 所属专栏速通前端 目录
CSS的介绍
基本语法规范
CSS选择器
标签选择器
class选择器
id选择器
复合选择器
通配符选择器
CSS常见样式
颜色 color
字体大小 font-size
边框 border
宽度 与 高度
内边距
外边距 CSS的介绍
CSS(Cascading Style Sheet)层叠样式表用于控制页面的样式。CSS能够对网页中元素位置的排版进行像素级精确控制实现美化页面的效果。能够做到页面的样式和结构分离。简单理解CSS就是类似于对页面进行化妆让页面变得更加好看。
基本语法规范
选择器{一条/N条声明}
1、选择器决定针对谁修改 (找谁)2、声明决定修改啥(干啥)3、声明的属性是键值对使用区分键值对使用区分键和值。
既然CSS是化妆那首先得要对象才行这个对象就是HTML的代码。
CSS有三种引入方式引入到HTML的代码中
引入方式描述行内样式在标签内使用style属性属性值是css属性键值对内部样式定义style标签在标签内部定义css样式外部样式定义link标签通过href属性引入外部的css文件
代码演示
1、行内样式 2、内部样式 3、外部样式 三种引入方式的对比
行内样式只适合于写简单样式只针对某个标签生效。缺点是不能写太复杂的样式。
内部样式会出现大量的代码冗余不方便后期的维护所以不常用。
外部样式html和css实现了完全的分离企业开发常用方式。
注意内部样式虽然可以写在任何地方但我们常是写在 head 标签中。
CSS选择器
CSS选择器的主要功能就是选中页面指定的标签元素选中了元素才可以设置元素的属性。
CSS选择器主要分以下几种 1、标签选择器 2、class选择器 3、id选择器 4、复合选择器 5、通配符选择器
下面我们一 一来学习
标签选择器 class选择器
class是标签的一个属性可以认为有相同class的标签被认为是同一组在此基础上我们就可以进行一些列的其他操作比较方便。 注意
1、类名是可以随便取的但不能是数字。
2、一个类可以被多个标签使用一个标签也能使用多个类(多个类名要使用空格分割这种做法可以让代码更好复用)
id选择器 复合选择器
复合选择器是通过多个标签唯一的那个标签然后进行设置相关属性的。和在文件夹中查找某个文件差不多。 如果我们只想将 有序列表下的div设置成红色就可以使用复合选择器。 如果想更详细的一点的话可以写成 body ol div 或者直接将 html 给包裹进来都是没问题的。
注意
1、上面的 ol 与 div 可以是任意选择器的组合也可以是任意数量选择器的组合。
2、这里的标签不一定要是相邻的标签例如父标签-子标签。可以直接是 父标签-孙子标签。
3、如果想要选择多种标签可以使用 来分隔。
通配符选择器
这里的通配符和我们在Java中学习的通配符是一样的都是可以去代表所有只不过Java中的通配符只能作为接收方而不能是发送方与多态一样向上转型可以但是向下转型就会失败。而这里的通配符是全部都行。 这里通配符是采用 *。
CSS常见样式
颜色 color
color 是用来设置字体的颜色的颜色的表示方式有三种。第一种就是我们前面直接使用英文单词去表述的第二种是使用三原色的参数来设置的第三种是在第二种的基础上使用十六进制的数字来表示的。
第一种前面有因此这里不作演示我们直接来看第二种与第三种的方式。
1、使用三原色
三原色rgb指的是 red、green、blue三种颜色。通过参数来调整三者的占比从而实现不同的颜色。 如果要变为绿色的话就是(0, 255, 0)。
2、使用十六进制数
因为rgb的参数范围是(0,255)可以用2^8来表示如果把2^8看成比特位的话就是可以用8个比特位来表示而一个十六进制位可以表示4位二进制即 两个十六进制位可以表示上述rgb的参数范围。 字体大小 font-size 边框 border
边框是一个复合属性常用的包括 边框粗细、边框样式、边框颜色。既可以一起同时设置也可以分开设置三者。
样式说明举例border-width设置边框粗细取数值border-style设置边框样式dotted点状border-color设置边框颜色与color是相同的有三种方式 上面是三者分开设置的下面来尝试三者一起设置。 注意并不只是div才能设置边框几乎所有的标签都是可以设置边框的。
宽度 与 高度
width 设置宽度、height 设置高度。 注意只有块级元素可以设置宽高。常见的块级元素有: h1-h6、P、div等常见的行内元素有span、a。块级元素是独占一行的因此可以设置其相关的属性而行内元素是不能独占一行的也就是会和其他的元素一起占据一行如果去设置其的宽高那别的元素也需要改变这就不合理因此行内元素不能设置宽高。当然我们也可以使用 display 属性来修改元素的显示模式。
display : block 改成块级元素display : inline 改成行内元素。 内边距
padding内边距其含义是内容和边框之间的距离。
内容默认是顶着边框来放置的可以用padding来控制这个距离。 padding也是一个复合样式可以对四个方向分开设置。
padding-top顶部、padding-bottom底部、padding-left左部、padding-right右部 当然也可以设置边框为实线去观察。 外边距
margin外边距其含义是元素与元素之间的距离。同样元素与元素之间默认也是挨着的。 margin也是一个复合样式,可以给四个方向都加上外边距。与内边距类似这里就不再演示了。
前面的样式涉及到了一个著名的IE盒子模型 好啦本期 速通前端篇 —— CSS 的学习之旅 就到此结束啦我们下一期再一起学习吧
