主要内容：
1.css书写格式
2.基本选择器
3.复合选择器
<!-- html 架构
css (表现)样式
js 行为
css 层叠样式表
样式名称:样式值;
行内样式表(标签(元素)样式表)
作用:对单个元素进行样式的定义
特点:单个元素样式没问题,如果设置页面上多个元素时,只能进行复制粘贴,开发成本较大(不推荐在开发中使用)
内部样式表:
作用:对一个或一组相同特点的标签进行样式的定义
特点:易于修改与更新,修改一个样式,改变多个
样式表分为两部分:
p叫做选择器
{}声明块
问:跨网页使用同一个样式
给demo2和test1加样式
外部样式表:
作用:对整个网站进行样式的声明
特点:用到浏览器的缓存机制,第一次加载网站其中一个页面的时候,加载慢(图片,js,css文件缓存到浏览器中),访问当前网站其他页面时,缓存文件已经在本地浏览器中了,所以加载快
语法:<link rel="stylesheet" href="css文件路径"/>
开发过程中 经常使用外部样式表 , 习惯性建立一个css文件夹用来装css文件
-->
<p >我是一个p</p>
<div>我是div</div>
<h1>I am h1</h1>
<p>我是一个p2</p>
<p>我是一个p3</p>
<p>我是一个p4</p>
<p>我是一个p5</p>
<p>我是一个p6</p>
/*
今天天下三分 改成绿色 60px
div{
font-size:50px;
color:red;
基本选择器分为三种:
eg:h1 p div ; h1{} ....
1.元素(标签)选择器:
通过元素(标签)名称获取一个或一组元素标签
2.id选择器
获取一个标签并给其添加样式时
给此诚危急存亡之秋也 益州.. 加浅绿 50px
3.class(类选择器)
获取一个或一组标签进行添加样式
}*/
/*#three{
color:green;
font-size:60px;
}*/
.sgr{
color:#0f0;
font-size:50px;
}
</style>
</head>
<body>
<h1>出师表-残</h1>
<div>先帝创业未半而中道崩殂</div>
<div class="sgr">此诚危急存亡之秋也</div>
<div id="three">今天天下三分</div>
<div class="sgr">益州疲弊</div>
<div>然侍卫之臣不懈于内</div>
<div>中指支持王身于外者</div>
<style>
/*给div2p1设置样式 颜色 大小
.dkbl{
color:darkblue;
font-size:55px;
}
如果class属性需要加两个值得话 空格分开
让class为dkbl的div改变颜色 大小
复合选择器:
交集选择器
写法:选择1选择器2选择器3选择器n{
}
定义:同时满足多个条件的选择器;
div.dkbl.aaa{
color:darkblue;
font-size:55px;
}
并集选择器(选择器分组)
eg:让所有p h1 span id为red的元素 变色和修改尺寸
写法:选择1,选择器2,选择器3,选择器n{
}
定义:分别满足多个调节的选择器;
*/
p,h1,span,#red{
color:#f00;
font-size:40px;
}
</style>
</head>
<body>
<div id="red">div1</div>
<div class="dkbl">div2</div>
<div>div3</div>
<p class="dkbl">p1</p>
<div class="dkbl aaa">div4</div>
<div>div5</div>
<p>p2</p>
<h1>h1</h1>
<span>span1</span>
741
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
