CSS学习(一)

1. CSS简单介绍

    css主要是修饰页面的样式和布局。为什么会选择css去做呢?css可以单独作为一个外部引入文件,对多个页面都可以进行修饰。

2. css的用法

 

selecor:要修饰的元素类型,譬如h1

declaration:修饰的样式内容,多个declaration要用';'号隔开,以分号结尾。

property:元素的属性

value:元素的值

eg1.

==================================

<html>

   <head></head>

   <stlyle>

     h1{color:blue;font-size:12px;}

   </style>

   <body>

       <h1>this is my first css test</h1>

   </body>

</html>

==================================

该文作用的h1标签将会按照样式中的颜色和字体大小。

3. css中id和class

如果在文件中给某一些元素指定id(class)值,样式修饰时即可根据id(class)来做统一修饰。

eg2.

==================================

<html>

   <head></head>

   <stlyle>

     #id1{color:blue;font-size:12px;}

   </style>

   <body>

       <h1 id="id1">this is my first css test</h1>

   </body>

</html>

==================================

 

class的使用:

eg3.

==================================

<html>

   <head></head>

   <stlyle>

     .class1{color:blue;font-size:12px;}     //针对所有元素中出现的class1起作用

     h2.class1{color:red;font-size:12px;}  //针对某一个元素下的class起作用

   </style>

   <body>

       <h1 class="class1">this is my secode css test</h1>

       <h2 class="class1">this is my third css test</h2>

   </body>

</html>

==================================

4. 如何引用CSS

  引用CSS有三种途径:

  <1> 直接作用标签元素

     参考以上。

  <2> 内嵌引入CSS样式

     参考以上,可以放在<head> <body>等位置

  <3> 外部引入CSS文件

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值