CSS样式表

最新推荐文章于 2021-06-03 10:22:28 发布

♡-流浪孩

最新推荐文章于 2021-06-03 10:22:28 发布

阅读量161

点赞数

分类专栏： Java Web 文章标签： css html javascript

本文链接：https://blog.csdn.net/qq_43321732/article/details/113112705

版权

Java Web 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

CSS样式表

css规则

在这里插入图片描述

css选择器

CSS选择器常用的是标记选择器、类别选择器、id选择器等

标记选择器

CSS标记选择器就是声明页面中哪些标记采用CSS样式

例：定义a标记选择器，该标记选择器定义超链接的字体与颜色

<style>
    a{
        font-size:9px;
        color:#F93;
    }
</style>

类别选择器

标记选择器是的页面中的所有相同类型元素的效果都一样，这时候就需要引入类别选择器

类别选择器的名称由用户定义，并以“.”号开头；要应用类别选择器的HTML标记，只需使用class属性来声明即可

格式：

<style>
    .one{
        font-size:24px;
        font-family:宋体;
        color:red;
    }
</style>


<h2 class = "one">应用了选择器one</h2>

id选择器

通过html页面中的id属性来选择增添样式，与类别选择器基本相同

由于HTML页面中不能包含两个相同的id属性，因此定义的id选择器也就只能被使用一次

命名id选择器要以“#”号开头，后加HTML标记中id属性值

<style>
    #first{
        font-size:18px;
    }
</style>
<body>
    <p id = "first">
        id选择器
    </p>
</body>

在页面中包含css

1、行内样式

<table width="200" border="1" align="center">	
<tr>
<td><p style="color:#F00; font-size:36px;">行内样式一</p></td>
</tr>
<tr>
 <td><p style="color:#F00; font-size:24px;">行内样式二</p></td>	
</tr>
<tr>
<td><p style="color:#F00; font-size:18px;">行内样式三</p></td>
</tr>
<tr>
 <td><p style="color:#F00; font-size:14px;">行内样式四</p></td>
</tr>
</table>

2、内嵌式

内嵌式就是在页面中使用< style > < /style >标记将css样式包含在页面中

3、链接式

链接外部css样式是最常用的一种引用样式表的方式，将css样式表定义在一个单独的文件中，后再HTML页面中通过< link>标记引用，是一种最有效的使用css样式的方式

< link>标记的语法结构如下

在这里插入图片描述

CSS 3的新特征

1、模块与模块化结构

在这里插入图片描述

♡-流浪孩

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
CSS样式表

CSS样式表css规则css选择器CSS选择器常用的是标记选择器、类别选择器、id选择器等标记选择器CSS标记选择器就是声明页面中哪些标记采用CSS样式例：定义a标记选择器，该标记选择器定义超链接的字体与颜色<style> a{ font-size:9px; color:#F93; }</style>类别选择器标记选择器是的页面中的所有相同类型元素的效果都一样，这时候就需要引入类别选择器类别选择器的名称由用户定
复制链接

扫一扫

专栏目录