三亚学做网站培训,二手车网站开发过程,德州市建设局网站,国外购物网站app目录
一、CSS介绍
1、什么是CSS#xff1f;
编辑2、基本语法规范
3、引入方式
4、规范
二、CSS选择器
1、标签选择器
2、类#xff08;class#xff09;选择器
3、id选择器
4、通配符选择器
5、复合选择器
三、常用CSS
1、color
2、font-size
3、border
4…目录
一、CSS介绍
1、什么是CSS
编辑2、基本语法规范
3、引入方式
4、规范
二、CSS选择器
1、标签选择器
2、类class选择器
3、id选择器
4、通配符选择器
5、复合选择器
三、常用CSS
1、color
2、font-size
3、border
4、width / height
5、padding
6、外边距 一、CSS介绍
1、什么是CSS CSSCascading Style Sheet层叠样式表用于控制页面的样式。CSS 能够对网页中元素位置的排版进行像素级精确控制实现美化页面的效果能够做到页面的样式和结构分离。 CSS可以理解为 “东方四大邪术” 之化妆术可以对页面的展示进行 “化妆”。如图
2、基本语法规范 选择器 {一条 / N条声明} 1、选择器决定针对谁修改找谁。 2、声明决定修改啥干啥。 3、声明的属性是键值对使用 ; 区分键值对使用 : 区分键和值。 举个栗子
stylep {/* 设置字体颜⾊ */color: red;/* 设置字体⼤⼩ */font-size: 30px;}
/stylephello/p 注意 1、CSS 要写到 style 标签中后面还会介绍其他的写法。 2、style 标签可以放到页面任意位置但一般放到 head 标签内。 3、CSS 使用 /* */ 作为注释。使用Ctrl / 快速切换。 3、引入方式 CSS有3中引入方式语法如下表格所示 3种引入方式的对比 1、内部样式会出现大量的代码冗余不方便后期的维护所以不常用。 2、行内样式只适合于写简单样式只针对某个标签生效缺点是不能写太复杂的样式。 3、外部样式html 和 css 实现了完全的分离企业开发常用方式。 4、规范 样式大小写虽然 CSS 不区分大小写但我们在开发时统一使用小写。 空格规范1冒号后面带空格2选择器和 “ { ” 之间也有空格。
二、CSS选择器 CSS 选择器的主要功能就是选中页面指定的标签元素选中了元素才可以设置元素的属性。
CSS选择器主要分以下几种 1、标签选择器 2、class选择器 3、id选择器 4、复合选择器 5、通配符选择器 下面通过代码来学习 CSS选择器 的使用代码如下
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
bodydiv classfont32我是⼀个div, class为font32/divdiv classfont32我是⼀个div, class为font32/divdiva href#我是⼀个div/a/divulliaaa/lilibbb/lilia href#ccc/a/li/ulolli1111/lili2222/lili3333/li/olbutton idsubmit提交/button
/body
/html 现在的网页是这样的如图 1、标签选择器 代码 style/* 选择所有的a标签, 设置颜⾊为红⾊ */a {color: red;}/* 选择所有的div标签, 设置颜⾊为绿⾊ */div {color: green;}/style 结果如下 可以看到我们对 div 标签都想设置成绿色但最后一个 div标签 里面有个 a 标签CSS 里面的代码想把 a 标签的内容设置成 红色所以如果修改的标签相同内标签优先。
2、类class选择器 代码如下 /* 选择class为font32的元素, 设置字体⼤⼩为32px */ .font32 {font-size: 32px;} 执行结果 可以看到包含 class类属性 是font32的字体都变大了。CSS的选择器 style 内是使用 . 来标识类的例如上面的代码.font32 注意 一个类可以被多个标签使用一个标签也能使用多个类多个类名要使用空格分割这种做法可以放代码更好复用。
3、id选择器 代码 /* 选择id为submit的元素设置颜色为红色 */#sumbit {color: red;} 结果如下 可以看到提交按钮变成红色了。 注意id是唯一的不能被多个标签使用是和 类选择器 最大的区别
4、通配符选择器 代码如下 /* 设置页面所有颜色为红色 */* {color: red;} 结果如下 可以看到除了标签选择器内的元素其他的内容全部变成红色了。
5、复合选择器 代码如下 /*只设置 ul标签下的 li标签下的 a标签, 颜⾊为红⾊*/ul li a {color: blue;} 结果如下 注意 1、以上三个标签选择器 ul li a 中的任意都可以替换成类选择器或者 id 选择器可以是任意选择器的组合也可以是任意数量选择器的组合。 2、不一定是相邻的标签也可以是 “孙子”标签。 3、如果需要选择多种标签可以使用 “ , ” 分割如 pdiv { } 表示同时选中 p标签 和 div标签。逗号前后可以是以上任意选择器也可以是选择器的组合。 三、常用CSS 接下来学习一些常见的 CSS 样式准备如下html div classtext1我是文本1/div 结果如下 1、color color是用来设置字体颜色的代码如下 .text1 {color: red;} 结果如下 颜色有如下几种表达方式 1、英文单词如redblue等。 2、rgb代码颜色如 rgb255,0,0。红、蓝、绿用这三个颜色通过不同的比例就可以构成所有的颜色了 3、十六进制的颜色如 #ff00ff 。 2、font-size 代码如下 .text1 {font-size: 32px;} 结果如下 3、border border 是边框边框是一个复合属性可以同时设置多个样式不分前后顺序浏览器会根据设置的值自动判断。 代码 .text1 {border: 1px solid purple;} 结果如下 以上 border 属性的对应设置的维度分别为边框粗细边框样式边框颜色也可以拆分来设置如下
样式说明取值border-width色值边框粗细数值border-style设置边框样式 dotted点状 solid实现 double双线 dashed虚线 border-color设置边框颜色通color 上面的代码也相当于下面的代码 /* border: 1px solid red; */border-width: 1px;border-style: solid;border-color: red; 执行结果如下 和上面的一样。
4、width / height width设置宽度。height设置高度 只有块级元素可以设置宽高。 1、块级元素是HTML标签的一种显示模式对应的还有行内元素。 2、常见块级元素h1~h6,、p、div等。 3、常见行内元素a、span 4、块级元素独占一行可以设置宽高。 5、行内元素不占一行不能设置宽高。 改变显示模式使用 display 属性可以修改元素的显示模式。 1、display: block 改成块级元素常用。 2、display: inline 改成行内元素很少有。 代码 .text1 {width: 200px;height: 100px;} 结果如下边框变成下面这样了 5、padding padding内边距设置内容和边框之间的距离。 内容默认是顶着边框来放置的用 padding 来控制这个距离。如图 代码 .text1 {padding: 20px;} 结果 现在的内容不是挨着边框的了。 padding也是一个复合样式可以对四个方向分开设置。 1、padding-top 2、padding-bottom 3、padding-left 4、padding-right 6、外边距 是设置元素和元素之间的距离。 div classtext1我是文本1/divdiv classtext1我是文本2/div
原来 添加下面代码 .text1 {margin: 20px;} 结果 可以看到边框和边框之间分隔开了。 都看到这了点个赞再走吧谢谢谢谢谢
