CSS基础学习

what?

答:层叠样式表,是一种用来表现HTML或XML等文件样式的计算机语言。CSS不仅课可以静态的装饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。在新闻发布系统就是使用CSS对页面进行美化的。

知识介绍

选择器

1、ID选择器
对于ID大家其实并不陌生,一个元素的ID是唯一的,而且这个选择是在CSS中经常使用,而且具有较高的级别,一般在CSS中编写使用“#”代表。
例如:

#search {
    height: 27px;
}

<div id="searchres" >
</div>

2、类别选择器
说起类(class)他可是很出名的,而这里的类别选择器也是常用的选择器之一,用class表示,在CSS中,使用“.”进行表示。
例如:

.search {
    height: 27px;
}

<div class="searchres" >
</div>

3、标签选择器
首先要知道什么是标签?
答:标签限定了文档的开始和结束点,在他们之间是文档的头部与主体。例如:p标签,a标签等等
例如:

li{
    text-align:center;
    margin:20px;
}

<li><a href="#">首&nbsp;&nbsp;&nbsp;&nbsp; 页</a></li>
<li><a href="#">体育新闻</a></li>
 <li><a href="#">财经新闻</a></li>
<li><a href="#">社会新闻</a></li>

4、后代选择器
后代选择器也称为包含选择器,用来选择特定元素或元素组的后代,将对父元素的选择放在前面,对子元素的选择放在后面,中间加一个空格分开。后代选择器中的元素不仅仅有两个,也可以是多个,这个和口头上说的后代有相同的含义。
例如:

#newscontent .con{
    text-indent:2em;/*让段落首行缩进2个字符*/
    line-height:20px;/*行间距*/
}
<div id="newscontent" class="commonfrm">
	<p>
            <asp:Label ID="lblContent" runat="server" Text=""></asp:Label>
        </p>
    </div>

有这么多的选择器,在使用的时候又是如何区分他们的等级的呢?
优先级:ID选择器 > 类选择器 > 标签
后代选择器一般要根据它是由那几个选择器一起使用的。

PS:当样式出现矛盾的时候,与css样式的排列顺序有关系,以后面的顺序为主

链接

在B/S中a标签经常使用,那么对于a标签你有那些了解呢?

  • a:link - 正常,未访问过的链接
  • a:visited - 已访问过的链接
  • a:hover - 鼠标放在链接上时
  • a:active - 链接被点击的那一刻

PS:
hover必须在:link和 a:visited之后定义才有效。
active必须在hover之后定义是有效的。

盒子模型
  • margin(外边距) - 清除边框外的区域,外边距是透明的。
  • border(边框) - 围绕在内边距和内容外的边框。
  • padding(内边距) - 清除内容周围的区域,内边距是透明的。
  • content(内容) - 盒子的内容,显示文本和图像。 (图中蓝色区域)

在使用的浏览器中一般都会有盒子模型,只需要按一下F12,就可以找到盒子模型啦。
例如:
在这里插入图片描述

评论 79
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值