2-1 CSS基础知识

发布于:2022-12-18 ⋅ 阅读:(430) ⋅ 点赞:(0)

CSS样式表

内部表样式

通常位于<head>中间</head>,通过使用<style></style>标签更改各类型的样式规则,作用范围为整个文档 一次可放多个选择器

<style>选择器 {属性名称1:属性值1;属性名称2:属性值2}</style>

栗子:

<style>

p{

    color:green

    font-size:15

   background-color:pink

}

h1{

    color:green

    font-size:50

   background-color:blue

}

</style>

内联样式表

用style在元素内部添加属性更改样式,多个属性用逗号分隔开

<元素名 style = “属性名称1:属性值1;属性名称2:属性值2;”>

————————————————————————

CSS属性                            含义                  参考值

background-color          背景色               red blue

color                               前景色               white black

font-size                        字体大小            15px表示15像素大小的字体

border                           边框                    数字1,2可表示边框大小

width                             宽度                    加xp的的数字表示像素

height                            高度                    可用数字也可以用像素

——————————————————————————

外部样式表

外部样式表为独立的CSS文件,后缀名为.css或.CSS

<head><link>在其中引用可以作用于整个文档</link></head>

外部CSS文件不用使用<style></style>标记

栗子:

<link rel =“stylesheet” href=“cs.css”>

表格优先级:

内联样式表 > 内部样式表 > 外部样式表

三表都没有,使用默认状态

CSS选择器

元素选择器

栗子:

p{

}

 ID选择器

#ID名称{属性名称1:属性值1·····}

栗子:

类选择器

<style>

.class类名{

属性名:属性值

}

</style>

属性选择器

元素名称[元素属性] {属性名称1:属性值1;属性名称2:属性值2}

栗子;

将href为www.cc.com的超链接设置为蓝色字样

a[href = “www.cc.com”] { color :green; }


网站公告

今日签到

点亮在社区的每一天
去签到