注:本文内容为本人学习慕课网前端知识时整理摘录,方便后续查阅。具体可访问原链接
1.认识CSS样式
CSS全称为“层叠样式表 (Cascading Style Sheets)”,它主要是用于定义HTML内容在浏览器内的显示样式,如文字大小、颜色、字体加粗等,当然最重要的还是页面布局。
如下列代码:
p {
font-size: 12px;
color: red;
font-weight: bold;
}
使用CSS样式的一个好处是通过定义某个样式,可以让不同网页位置的文字有着统一的字体、字号或者颜色等
2.CSS样式的优势
为什么使用css样式来设置网页的外观样式呢?下面示例部分有一段文字,我们想把“超酷的互联网”、“服务及时贴心”、“有趣易学”这三个短语的文本颜色设置为红色,这时就可以通过设置样式来设置,而且只需要编写一条css样式语句。
第一步:把这三个短语用<span></span>括起来。
第二步:在style标签(type为text/css)里写入下列代码:
span {
color:red;
}
观察结果窗口文字的颜色是否变为红色了。
示例:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>CSS样式的优势</title>
<style type="text/css">
span {
color:red;
}
</style>
</head>
<body>
<p>慕课网,<span>超酷的互联网</span>、IT技术免费学习平台,创新的网络一站式学习、实践体验;
<span>服务及时贴心</span>,内容专业、<span>有趣易学</span>。
专注服务互联网工程师快速成为技术高手!</p>
</body>
</html>
结果:
3.CSS代码语法
css 样式由选择符和声明组成,而声明又由属性和值组成,如下图所示:
选择器:指明网页中要应用样式规则的元素,如本例中是网页中所有的段(p)的文字将变成蓝色,而其他的元素(如ol)不会受到影响。
声明:在英文大括号“{}”中的的就是声明,属性和值之间用英文冒号“:”分隔。当有多条声明时,中间可以英文分号“;”分隔,如下所示:
p {font-size:12px; color:red;}
注意:
(1)最后一条声明可以没有分号,但是为了以后修改方便,一般也加上分号。
(2)为了使用样式更加容易阅读,可以将每条代码写在一个新行内,而不要像上面那个样两个属性放到同一行书写
4.CSS注释代码
就像在Html的注释一样,在CSS中也有注释语句:用/注释语句/来标明(Html中使用)。就像下面代码:
<style type="text/css">
/*设置段落默认格式*/
p{
font-size:12px;/*设置文字字号为12px*/
color:red;/*设置文字颜色为红色*/
}
</style>
阿里云推广:
通用代金券领取链接:https://promotion.aliyun.com/ntms/yunparter/invite.html?userCode=qtyyc38p
优惠链接:(总有一款适合你)
1)【开年HI购季】爆款云产品5折:https://www.aliyun.com/acts/product-section-2019/new-users?userCode=qtyyc38p
2)【助力企业上云】性能级主机2-5折:https://promotion.aliyun.com/ntms/act/enterprise-discount.html?userCode=qtyyc38p
3)【全民云计算】云主机低至2折:https://promotion.aliyun.com/ntms/act/qwbk.html?userCode=qtyyc38p
4)【商标注册服务】低至300元:https://tm.aliyun.com/?userCode=qtyyc38p
5)【超高返现】购物车全产品返25%:https://promotion.aliyun.com/ntms/act/shoppingcart.html?userCode=qtyyc38p
6)【阿里云自营建站】买一年送一年:https://www.aliyun.com/jianzhan/?userCode=qtyyc38p