第一周

三大样式表分为:内部样式,外部样式和行内式。

行内式权重最高,外部样式需要通过link标签(单标签)进行引入,语法格式必须放入head标签内。

选择器有什么用?选择标签用的。

CSS基础选择器主要分为:标签选择器,类选择器,id选择器,多类名选择器,通配符选择器。

标签选择器按照标签名进行分类,类选择器通过"  . "来标识,class="类名"进行调用。

类选择器通过”#“标识,元素的id是唯一的。

通配符选择器能匹配到页面全部元素,作用范围最广,*{  }。

font-size属性用于设置文本字号。

font-family属性用于设置字体。

font-weight属性用于设置字体粗细,其属性值有normal,bold,bolder,lighter,100-900;除此之外设置字体粗细还可以使用b标签或者strong标签。

font-style属性用于设置字体风格,其属性值有normal,italic,oblique;初次之外还可以使用i或者em标签实现功能。

font:综合设置字体样式,选择器{font: font-style  font-weight  font-size/line-height  font-family;}。

使用font属性时,必须按上面语法格式中的顺序书写,不能更换顺序,各个属性以空格隔开。

color属性:用于设置文本颜色,取值方式有三种包括颜色值,十六进制和RGB。

line-height属性:用于设置行间距,常用单位有px,em和%。

text-align属性:用于设置文本内容的水平对齐,属性值有left,right,center。

text-indent属性:用于设置首行文本的缩进 。

text-decortion属性:用于设置文本的装饰,属性值有none,underline(下划线),overline(上划线),line-through。

复合选择器由两个或多个基础选择器组成,其目的是为了选择更精确的目标标签。

CSS复合选择器包括交集选择器,并集选择器,后代选择器,子元素选择器,伪类选择器,链接伪类选择器。

交集选择器由标签选择器和类选择器组成,书写格式为”标签名.类名{}“,之间不可以有空格或其他符号,(使用频率低)。

并集选择器,用于集体声明,书法格式通过逗号隔开,如:.one, p , #test {color: #F00;} ,(被选择的标签全为红色)。

后代选择器又被称为包含选择器,它可以选择包含在内的标签,中间通过空格隔开。

子元素选择器,通过">"进行连接,子级标签在父级标签之后。

伪类选择器,:link{   },可以给链接添加特殊效果。

链接伪类选择器,包括:link /* 未访问的链接 */ ,:visited /* 已访问的链接 */ ,:hover /* 鼠标移动到链接上 */ ,:active /* 选定的链接 */   (lv的包包hao)

选择器的优先级:就近原则,css中权重最高的样式为行内样式,就是以style=“”方式直接加入到HTML标签内的样式,其在css优先级中具有最高的权重,

id选择器

类选择器

标签选择器

通配符选择器

块级元素(block-level)

特点:独占一行或者多行,可以设置宽度,高度,对齐,外边距,内边距等属性,可以容纳内联元素和其它块元素,常用于网页布局及结构的搭建。

常见标签有:h1-h6,p,div,ul,ol,li等标签

行内元素(inline-level)又称内联元素

特点:仅仅靠自身字体大小或图像尺寸来支撑结构,一般不可以设置宽度,高度,对齐等属性,和相邻行内元素在同一行上,水平方向可以设定margin和padding值,但是垂直方向无效,除了a标签,行内元素只可以容纳文本和其他行内元素,常用于控制页面文本的样式。

常见标签有:a,strong,b,em,i,del,ins,s,u,span。

行内块元素(inline-block)

在行内元素中有几个特殊的标签——<img />、<input />、<td>,可以对它们设置宽高和对齐属性,有些资料可能会称它们为行内块元素。

行内块元素的特点:
(1)和相邻行内元素(行内块)在一行上,但是之间会有空白缝隙。
(2)默认宽度就是它本身内容的宽度。
(3)高度,行高、外边距以及内边距都可以控制。

标签显示模式转换 display

块转行内:display:inline;

行内转块:display:block;

块、行内元素转换为行内块: display: inline-block;

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值