CSS day1

第一章

1.CSS初始

CSS(Cascading Style Sheets) 通常称为CSS样式或层叠样式表,主要用于版面的布局和外观显示样式,网页的美容师

2.引入CSS样式表

2.1.行内样式(内联样式)

通过标签的style属性设置元素的样式

<h1 style="color:pink;font-size:12px;">行内样式表</h1>

只能控制当前的标签和以及嵌套在其中的字标签,造成代码冗余

没有实现结构与样式分离

2.2.内部样式表(内嵌样式表)

是将CSS代码集中写在HTML文档的head头部标签中,并用style标签定义

只能控制当前页面

没有彻底分离

<head>
    <style type="text/css">
        div {
          color:red;
          font-size:12px;   
        }
    </style>
</head>

2.3.外部样式表(外链式)

是将所有的样式放在一个或者多个以.CSS为扩展名的外部样式表文件中

通过link标签将外部样式表文件链接到HTML文档中

<head><link rel="stylesheet" href="css文件路径" type="text/css" /></head>

实现了结构与样式完全分离,样式共享

3.选择器

用于选择标签,把我们想要的标签选择出来,选对人,做对事

3.1.基础选择器

标签选择器(元素选择器):能够快速为页面中同类型的标签统一样式,不能够差异化样式。

类选择器

类选择器是可以多次重复使用

<head>
<style type="text/css">
    .blue {
        font-size:100px;
        color:blue;
    }
    .red {
        color:red;
    }
</style>
</head>
<body>
    <span class="blue">G</span>
    <span class="red">O</span>
    <span>O</span>
    <span>g</span>
    <span>l</span>
    <span class="red">e</span>
</body>

多类名选择器

<head>
<style type="text/css">
    .blue {
        font-size:100px;
        color:blue;
    }
    .red {
        color:red;
    }
    .font100 {
        font-size:100px;
    }
</style>
</head>
<body>
    <span class="blue font100">G</span>
    <span class="red">O</span>
    <span>O</span>
    <span>g</span>
    <span>l</span>
    <span class="red">e</span>
</body>

id选择器

id元素是唯一的,只能对应于文档中某一个具体的元素。

id选择器与类选择器最大的区别在于使用次数

<head>
<style type="text/css">
    #blue {
        font-size:100px;
        color:blue;
    }
    #red {
        color:red;
    }
</style>
</head>
<body>
    <span id="blue">G</span>
    <span id="red">O</span>
    <span>O</span>
    <span>g</span>
    <span>l</span>
    <span>e</span>
</body>

通配符选择器

通配符选择器用*表示,*表示所有的标签,会匹配页面所有元素,不建议随便使用

* {
    pading:0;   /*内边距为0*/
    margin:0;   /*外边距为0*/
}

4.font字体

font-size:12px    字体大小

font-family:"Microsoft Yahei"       字体样式

font-weight: normal                  默认值为normal,bold加粗,100-900  400等于normal,700等于bold (字体粗细)   

font-style: normal                       默认值为normal,italic 倾斜    字体样式

font :"font-size   font-weight  font-size/line-height   font-family"         font:italic 700 20px  "Microsoft Yahei"   其中不需要的设置的属性可以省略(取默认值),但必须保留font-size和font family属性

5.外观属性

color:文本颜色       预定义颜色(red,blue,green)  十六进制(#FF0000,#FF6600,#29D794)  RGB代码(rgb(255,0,0),rgb(100%,0%,0%))

text-align:文本水平对齐  left 左,right 右 ,center 居中

line-height:行间距,一般行距比字号大7.8像素左右

text-indent:首行缩进 ,单位用em字符宽度的倍数,1em就是1一个汉字的宽度

text-decoration:文本装饰    nore默认值取消下划线,underline定义文本下划线,overline定义文本上的一条线(不常用),line-through穿过文本的一条线(不常用)

 

 

 

 

 

 

 

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

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值