CSS简介

CSS(Cascading Style Sheets)层叠样式表。

 

·传统HTML页面排版和显示效果设置方面的问题。

·引入CSS后:Html标记专门用于定义网页的内容,而是用CSS来设置其效果。

 

CSS分类:

内嵌样式(Inline Style):以属性形式直接在HTML标记中给出,用于设置该标记所定义的信息效果。例如:

 <body style ="background-color:#ccffee;">

       <p style = "font-size:16px;color:red">第一段</p>

 </body>

 

内部样式表(Internal Style Sheet):在<head>标记中给出,可以同时设置多个标记所定义的信息效果。对当前页面有效,例如:

<html>

<head>

     <style type = "text/css">

          body{background-color:#ffeecc}

          p.mystyle1{font-size:20px;font-color:blue}

          p.mystyle2{font-size:40px;font-color:red;text-align:center}

     </style>

</head>

<body>

     <p class="mystyle1">第一段文字</p>

     <p class="mystyle2">第二段文字</p>

</body>

</html>

 

外部样式表(External Style Sheet):保存在外部文件中,在使用的HTML页面中可以引用,它的文件后缀为.css格式。可以被用到多个HTML页面中。

m1.css代码如下:

body{background-color:blue}

p.style1{font-size:20px;font-color:yellow}

p.style2{font-style:italic;font-size:30px;font-color:red;text-align:center}

 

03.html代码如下:

<html>

   <head>

       <link href="m1.css" rel="stylesheet" type="text/css">

   </head>

<body>

   <p class="style1">第一段</p>

   <p class="style2">第二段</p>

</body>

</html>

 

·样式设置优先级:(从高到低)

内嵌样式表——内部样式表——外部样式表——系统默认样式表

 

 

CSS的组成部分:

·选择器(Selector)

·属性名(Property Name)

·属性值(Value)

 

特殊:.mystyle{font-size:20px}//使用于所有标签

 

 

CSS字体属性:用于设置字体的类型、大小、颜色及显示风格等

如:font-family:宋体

      font-size:20px或20pt

      font-style:normal或Italic,oblique//斜体

      font-weight:normal或bold//加粗

      font(可以一次性定义多个属性)

 

CSS常用文本属性:用于设置文本的对齐和缩进方式、行高、字间距、文本颜色和修饰效果。

如:text-align:center //文本对齐方式

      text-indent= //设置首行缩进

      line-height= //行高

      letter-spacing=2em//字符间距 2字符

 

 

DIV(division)是一个HTML标记,用于表示一块可显示HTML信息的区域。如果不使用任何CSS样式的话,标记的效果与p标记相同。

<div>第一段</div>

<div align="center">第二段</div>

 

使用CSS+div可实现结构化的页面布局。

     

 

 

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

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值