CSS基础(一)

CSS(Cascading style sheet)  层叠样式表:用来对页面添加样式

 

一、CSS的四种导入方式

行内样式: <h1 style=”color:blue;font-size:50px;”>蓝色</h1>

嵌入样式:在head中添加一个style标签

引入样式:创建一个CSS后缀的文件,在head中添加link标签,case是要引入的CSS文 件:<linkrel=”stylesheet”  type=”text/css”  href=”case.css”/>

导入样式:在已有的CSS文件中导入另一个CSS文件

@import url(”b,css”);

 

二、CSS的选择器

标签选择器:选择页面中所有的p标签

P{

Color:red;

}

ID选择器:根据ID选择要修改的标签,每个页面中每个ID都是唯一的。

#ID{

Color:red;

}

类选择器:选择页面上所有class为cla的标签

.cla{

Color:red;

}

交叉选择器:class=hd的p标签,交叉选择器之间无空格

P.hd{
}

子代选择器(父子选择器、包含选择器):选择id为box的p标签,空格表父子关系

#box p{

}

群组选择器:class为hd,标签名是span,id是two的

.hd,span,#two{

}

通用选择器:选择页面中所有的元素

*{

}

 

三、伪类选择器:选择的是元素的状态

选择id为link的标签,将其设置为当鼠标放在这个标签上时,将其颜色置为红色。

#link:hover{

Color:red;

}

当id为link的标签曾经被访问过时,将其颜色置为紫色;

#link:visited{

Color:purple;

}

 

四、CSS的继承性和叠加性

继承性:子级元素会继承父级元素身上的文字相关样式。

叠加性:不同的选择器给同一个元素添加的不同样式可以同时生效。当添加了相同类 型的样式时,会根据选择器的优先级生效。

 

五、CSS选择器的优先级

无任何干扰条件时,继承的样式<浏览器默认样式<通用选择器<标签选择器<class选择器<id选择器<子代选择器<行内样式。

选择范围越小,选择的越精准,优先级越高。

 

六、行级元素、块级元素

块级元素:

1. 能设置宽高

2. 独占一行,不和其他元素待在同一行

 

行级元素:

1. 不能设置宽高

2. 能和其他行级元素待在一行

3. 常见的行级元素:  a  span  strong   em u

 

行内块级元素:

1. 能设置宽高

2. 能和其他元素待在一行

3. 常见的行内块级元素:img 表单

 

七、CSS控制文字样式

文字水平方向位置:text-align:center/right/left

行高:line-height,文字在行中是垂直居中的

首行缩进:text-indent: 10px;  缩进10像素

大小设为em时em参照文字大小,与文字大小一致

字体倾斜:font-style:italic;

字符间距:letter-spacing:10px;

字体粗细:font-weight:700;//加粗

 

*网页开发三部曲(静态网页)

1. 根据内容选标签,将内容放到页面中

2. 给元素加样式

3. 给元素定位置

 

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值