css-1

最新推荐文章于 2022-12-01 16:35:04 发布

Hunter_LIFE

最新推荐文章于 2022-12-01 16:35:04 发布

阅读量383

点赞数

本文链接：https://blog.csdn.net/Hunter_LIFE/article/details/56486565

版权

CSS 层叠式样式表

页面布局+修饰
1、优点
修改简单
可以独立存在（多个页面可以同时使用）

2、分类
(1)浏览器缺省(默认)
(2)内联样式(作用于当前标记)
(3)内部样式(作用于当前页面)
(4)外部样式(作用于整个网站)

3、内联样式
<p style="属性1:属性值1;属性2:属性值2;">天猫</p>

字体样式：
颜色：color:red;
字号大小： font-size:12px;
多个属性之间用 ; 隔开
谷歌浏览器最小的字号为12px

4、内部样式
<head>
<style type="text/css">
选择器{属性:属性值;}
</style>
</head>

选择器
(1)标记选择器
标记名称{属性:属性值}
(2)类选择器
<head>
<style type="text/css">
.tmall{属性:属性值;}
</style>
</head>
<span class="tmall">天猫</span>
<span class="taobao">淘宝</span>

class="" 命名规则：第一个字符不能为数字;第一个字符可以是链接符 (-) ,下划线(_)，其他的符号都不行

菜单： menu
导航: nav
头部： top
底部: footer
新闻列表 : news_list
新闻详情 : news_info
内容： content
class="odd tmall" 类可以有多个（优先读取的是样式表下面的类样式）
/* 注释 */

(3)ID选择器
#tm{color:#000;}
<span id="tm">天猫</span>
从单纯的css中,id名可以重复
id主要用于 js ,jquery。 id名称不能重复

选择器的优先级比较
标记选择器 < 类选择器
类选择器 < ID选择器
总结：标记选择器 < 类选择器 < ID选择器

5、外部样式
(1)新建外部样式表 index.css
@charset "utf-8";
样式
选择器{属性：属性值}

(2)引入外部样式表
<link rel="stylesheet" href="index.css" type="text/css" />
同一外部样式表可以嵌入多个页面；
一个页面可以引入多个外部样式表；
各个排版样式的优先级
内联样式 > 内部样式

内部样式外部样式(按照html页面中上下顺序)

小结：了解css的页面布局，学习了css的3种样式，内联样式，内部样式，外部样式，还有选择器的优先级比较。

Hunter_LIFE

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css-1

CSS 层叠式样式表页面布局+修饰1、优点修改简单可以独立存在（多个页面可以同时使用）2、分类(1)浏览器缺省(默认)(2)内联样式(作用于当前标记)(3)内部样式(作用于当前页面)(4)外部样式(作用于整个网站)3、内联样式天猫字体样式：颜色：color:red;字号大小： font-size:12px;多个属性之间用
复制链接

扫一扫

css-1

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