css

it2022-05-05  129

css

结构层+行为层+表现层(css)

1.css要写在style里面

2.选择器 基本选择器 标签选择器:选中对应的标签,可能会有多个 标签名 id选择器:id名不可重复 # 类选择器:可以重复 .

复合选择器: 后代选择器:p a{} 子选择器:p>a{} 通配符:* 选中所有元素 并集选择器:p,div,h1,.box,#im{} 交集选择器:span#s

区别:-熟悉 span,#s:span标签和id为s的标签 span>#s:span标签的子元素中id为s的标签 span #s:span标签的后代元素中id为s的标签 span#s: span标签中id为s的标签

优先级:id>class>tag -熟练掌握

3.css在网页中的引入方式 内部引入, 外部引入 行内样式

优先级: 行内>内部>外部 行内样式优先级最大,style和link谁在下面谁起作用

小结: 选择器:id,class,tag,后代,子选择器,并集,交集,通配符 网页中的三种引入方式:内部,外部,行内

4.文本和字体样式 选择器{ 属性:值; 属性:值 }

字体: color,text-align,text-indent,line-height,text-decoration 文本: font-family 设置字体类型 font-family:“隶书”; font-size 设置字体大小 font-size:12px; font-style 设置字体风格 font-style:italic; font-weight 设置字体的粗细 font-weight:bold; font 在一个声明中设置所有字体属性 font:italic bold 36px “宋体”; 合写:font:italic bold 36px “宋体”;

文字水平垂直居中盒子:text-align:center;line-height:(盒子的宽度)px; 内边距属性:padding 不能使用auto img src:图片 link rel外部 a href链接 标签的缝隙可以使用*{padding:0;margin:0;}清除默认边框 color颜色 text-align (center)位置居中 text-indent:px 首行缩进…像素 line-height 行高 font-family 字体样式 font-size字体大小 font-style 字体风格 font-weight字体粗细(font字体属性) text-decoration 装饰

鼠标样式: default 默认光标(箭头) pointer 超链接的指标(手) wait等待的效果 help 指示可用的帮助 text指示文本 cross hair 鼠标呈现十字状

注释:开始/* 结束 */ 不显示

vertical-align:middle图片居中 display:inline-block 行内块级元素

target="_blank"页面跳转新页面 target="_self"页面跳转当前页面


最新回复(0)