<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<!-- 2.内部样式:在style元素内写的样式 -->
<style>
/*选择所有的h2，声明它们的样式。*/
h2{
color:blue;
}
</style>
<!-- 3.外部样式 :在独立的CSS文件中写样式，并将其引入到当前网页中。-->
<link rel="stylesheet" href="my.css"/>
</head>
<body>
<!-- 内联样式:在元素的style属性中直接写样式。 -->
<h1 style="color:red;">CSS</h1>
<h2>CSS的使用方式</h2>
<p>1.内联样式</p>
<p>2.内部样式</p>
<p>3.外部样式</p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
/*1.继承性:子元素可以继承父元素的样式。
字体、颜色可以继承。其他不可以*/
body{
font-family:
"微软雅黑","文泉驿正黑","黑体";
}
/*2.层叠性:先后给一个元素增加不同的声明时，它们的效果会叠加在一起。*/
h1{
color:red;
}
/*...*/
h1{
font-size:50px;
}
/*3.优先级:先后多次给一个元素增加相同的声明，效果以后者为准(就近原则)。*/
h2{
color:green;
}
/*...*/
h2{
color:yellow;
}
</style>
</head>
<body>
<h1>苍老师</h1>
<h2>范传奇</h2>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
/*1.类选择器:根据class选择一批元素。*/
.female{
color:pink;
}
/*2.id选择器:根据id选择唯一的元素。*/
#p4{
color:blue;
}
/*3.选择器组:写出一组选择器，可以选中每个选择器所对应的目标的并集。*/
.female,#p4{
font-weight: bold;
}
/*4.派生选择器*/
/*4.1选择某元素下满足条件的子孙*/
#p5 b{
font-size: 30px;
}
/*4.2选择某元素下满足条件的儿子*/
#p5>b{
color: red;
}
/*5.伪类选择器:根据元素的状态选择在这个状态下的*/
/*5.1选择未访问过的超链接*/
a:link{
color:green;
}
/*5.2选择已访问过的超链接*/
a:visited{
color:red;
}
/*5.3选择激活态(正在点)的按钮*/
#b1:ACTIVE{
background-color:yellow;
}
/*5.4选择有焦点(闪烁的光标)的文本框*/
#t1:FOCUS{
background-color:green;
}
/*5.5选择鼠标悬停的图片*/
img:hover{
width:250px;
height:250px;
}
</style>
</head>
<body>
<p class="female">苍老师</p>
<p>王老师</p>
<p class="female">吉泽老师</p>
<p id="p4">赵老师</p>
<p id="p5">北京市<u>海淀区<b>北三环</b>西路</u>甲18号<b>中鼎大厦</b>B座8层</p>
<p>
<a href="http://www.baidu.cn">百度</a>
<a href="http://www.xb.cn">瞎编</a>
</p>
<p>
<input type="button" value="百度一下" id="b1"/>
</p>
<p>
<input type="text" id="t1"/>
</p>
<p>
<img src="../images/01.jpg"/>
</p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
/*1.单个边设置边框
left/right/top/bottom*/
h1{
border-left:10px solid blue;
}
/*2.四个边一起设置边框*/
p{
border:1px dashed red;
}
/*3.内容溢出时的处理:
默认不会溢出，因为p的高度会自适应，
即内容越多它就越高。只有给它设置了
固定的高度时它才会可能溢出。*/
p{
width:400px;
height:50px;
overflow: auto;
}
</style>
</head>
<body>
<h1>苍老师</h1>
<p>
优秀的电影演员。
同时他也是一名摄影爱好者，
他拍的片都很么么哒。他最擅长
捕捉肉体和灵魂的契合点，可以
折射出对人性的思考与鞭挞!
</p>
</body>
</html>
分享到：
相关推荐
"HTML+CSS总结" HTML（HyperText Mark-up Language）是目前网络上应用最为广泛的语言，也是构成网页文档的主要语言。HTML 文本是由 HTML 命令组成的描述性文本，HTML 命令可以说明文字、图形、动画、声音、表格、...
本文将基于“关于图片显示问题的CSS总结”这一主题，深入探讨CSS在处理图片显示时的关键知识点，以帮助开发者更好地理解和解决图片相关的问题。 首先，我们来看CSS中的`background-image`属性，它用于设置元素的...
这个"css总结文件(重要)"显然提供了一些关于CSS的核心概念、实用技巧和实例，对于学习和提升CSS技能非常有帮助。 首先，CSS的基础知识包括选择器、属性和值。选择器是用于指定我们要应用样式规则的HTML元素，例如`p...
dw cs6的css总结
CSS总结.xmind
【CSS总结】 CSS，全称Cascading Style Sheets（层叠样式表），是网页设计中的核心技术之一，用于控制网页元素的样式、布局和呈现。它与HTML或XML等标记语言结合使用，为网页添加视觉效果和结构化表现。在本篇内容...
这份"前端jscss总结笔记"涵盖了这两个主题的核心知识点，旨在帮助开发者深入理解和掌握它们。 JavaScript部分： 1. **基础语法**：包括变量声明（var、let、const）、数据类型（Number、String、Boolean、Null、...
### 总结 HTML和CSS的学习是成为一名前端开发者的基石。理解基本元素和样式规则，掌握布局技巧，以及了解响应式设计和预处理器的使用，将有助于创建出专业且用户友好的网页。通过不断实践和探索，可以逐步深化对这两...
在“css总结1”中，我们探讨了几种引入CSS样式的方法以及一些基本的CSS属性。 首先，让我们来看一下CSS样式的组成。一个CSS规则通常由两部分构成：选择器和声明。选择器指向你想要应用样式的HTML元素，如`h3`或`p`...
css总结很全，前端小白学习必备。后期还会发JS的。赚点积分
css学习总结思维导图
高效的CSS、可维护的CSS、组件化的CSS、hack-free CSS 书写高效CSS： 1、使用外联样式替代行间样式或者内嵌样式 2、不推荐使用内嵌样式
在前端开发领域，JavaScript（简称JS）和CSS是构建网页动态效果和美观界面不可或缺的两种技术。本笔记将深入探讨这两者的核心概念、语法特点以及它们在实际开发中的应用。 一、JavaScript概述 JavaScript是一种轻量...
CSS（Cascading Style Sheets）是用于控制网页元素样式的一种语言，对于自定义Liferay的主题和布局至关重要。以下是对Liferay CSS调整的一些关键点的详细说明： 1. **导航条背景色更改**：在`custom_common.css`...
HTML和CSS基础知识点总结（xmind编辑的思维导图）
常用的css总结 CSS整块文本溢出省略方案 < style > .wrap { width : 200 px ; white - space : normal ; overflow : hidden ; text - overflow : ellipsis ; display : - webkit - box ; - webkit - ...
对于小白新手入手可借鉴，都是HTML+CSS基础 打好基础才会让代码写的轻松像云上游走，不费吹灰之力学好HTML+CSS
css盒模型难点