css知识点
一:css样式
1.行内样式:在html标记(<p>)中采用一个style属性,直接添加css样式风格
<body>
<p style="font-family:宋体;color:red;font-size:18px">周杰伦</p>
<p style="font-family:宋体;color:red;font-size:18px">范特西</p>
<p style="font-family:宋体;color:red;font-size:18px">叶惠美</p>
</body>
缺点：如果<p>标记很多..在需要改变css样式的时候,那么每个<p>标记都需要改变,很不方便..，
所以就引入了内嵌式
2.内嵌式:在页面中采用一个style标记,将css部分单独分离出来...
<head>
<style type="text/css">
p{
font-family:黑体;
color:#FF0000;
}
</style>
</head>
<body>
<p>周杰伦</p>
<p>范特西</p>
<p>八度空间</p>
<p>叶惠美</p>
</body>
3.链接式:对于一整个网站来说..每个网页都需要一种统一的样式...那么就需要链接式了。
第一步：
写一个edong.css文件
h2{
font-family:红色;
color:#FF0000;
}
p{
font-family:黑体;
color:#FF0000;
}
第二步:
<head>
<link href="edong.css" type="css/text" rel="stylesheet">
</head>
<body>
<h2>周杰伦</h2>
<h2>范特西</h2>
<p>八度空间</p>
<p>叶惠美</p>
</body>
4.导入样式于链接样式相同
<head>
<style type="text/css">
@import url(edong.css);
</style>
</head>
<body>
<h2>周杰伦</h2>
<h2>范特西</h2>
<p>八度空间</p>
<p>叶惠美</p>
</body>
二:css选择器
1.标记选择器:对页面中所有标记使用同一种css风格
h2{
font-family:红色;
color:#FF0000;
}
2.类别选择器:对特殊的一些标记进行样式控制,运用在不同标记中
规范:.class(.+类别选择器名称,名称随便定义
<style type="text/css">
.first{
font-family:红色;
color:#FF0000;
}
.second{
font-family:蓝色;
color:#FF0000;
}
.third{
font-family:紫色;
color:#FF0000;
}
</style>
<body>
<p class="first">八度空间</p>
<p class="second">叶惠美</p>
<h2 class="third">张柏</h2>
</body>
3.id选择器:用于页面中某一个特殊的标记.
注意：
正确的方式是每一个id选择器只能对应一个标记,因为在用javascript时,
会用到document.getElementById("") 只会找对应的一个id。所以严格规定是一个Id选择器是不能出现在多个标记中
<style type="text/css">
#one{
font-family:红色;
color:#FF0000;
}
#two{
font-family:蓝色;
color:#FF0000;
}
#three{
font-family:紫色;
color:#FF0000;
}
</style>
<body>
<p id="one">八度空间</p>
<p id="two">叶惠美</p>
<h2 id="three">张柏</h2>
</body>
4.集体选择器:将很多不同样式选择器放在一起
<head>
<style type="text/css">
h1,h2,h3,h4{
font-family:红色;
color:#FF0000;
}
h2.special,special,#one{
text-decoration:underline;
}
</style>
</head>
<body>
<h1>八度空间</h1>
<h2 class="special">叶惠美</h2>
<h3>周杰伦</h3>
<h4>范特西</h4>
<p class="special">张柏</p>
<p id="one">qwnbc</p>
</body>
5.选择器嵌套:表示在某个标记里面的子标记的一些样式风格(两个标记之间用空格隔开)
<head>
<style type="text/css">
p b{
font-size:18px;
text-decoration:underline;
color:#FF0000;
}
</style>
</head>
<body>
<p>最近还好吗？<b>不能说的秘密</b>恋人未满..</p>
<b>你要离开我知道很简单..</b>
</body>
6.子选择器:某标记只对其子标记起作用，而孙标记则毫无影响.
<head>
<style type="text/css">
ul.myList>li>a{
font-size:18px;
text-decoration:underline;
color:#FF0000;
}
</style>
</head>
<body>
<ul class="myList">
<li>
<a></a href="http://localhost:3306/user">连接mysql数据库</a>
<!--样式对里面这部分不起作用-->
<ul>
<li><a href="#">链接一</a></li>
<li><a href="#">链接二</a></li>
<li><a href="#">链接三</a></li>
</ul>
</li>
</ul>
</body>
子选择器与嵌套选择器的区别:将上面的样式部分改成嵌套选择器样式,结果就会不同..
用空格取代">"
<head>
<style type="text/css">
ul.myList li a{
font-size:18px;
text-decoration:underline;
color:#FF0000;
}
</style>
</head>
结果不管是子标记还是孙标记都会改变样式
分享到：
相关推荐
【CSS基础学习】是网页设计领域中的重要环节，它是一种用于描述HTML或XML（包括如SVG、MathML等各种XML方言）文档样式的样式表语言。CSS（层叠样式表）让网页设计者能够分离内容与表现，使得网页设计更加灵活且易于...
在IT领域，CSS...总结，学习CSS基础不仅涉及语法和选择器，还包括布局、响应式设计以及预处理器的使用。通过不断实践和了解这些概念，初学者可以逐步提升CSS技能，从而更好地设计和构建美观、功能完善的网页。
DIV+CSS教程——第一天XHTML_CSS基础知识
本“CSS基础学习源码”是一个适合初学者的资源包，提供了丰富的实践材料，帮助理解并掌握CSS的基础知识。 首先，我们来详细探讨CSS的基础概念： 1. **选择器与声明**：CSS的核心在于选择器和声明。选择器用于定位...
### CSS基础教程知识点详解 #### 一、CSS简介 **CSS**，全称为 **Cascading Style Sheets**（级联样式表），是一种用于定义HTML文档布局的语言。它可以帮助开发者更好地控制网页的外观，如字体、颜色、间距、大小...
书名：CSS基础教程 作者：（英）柯林森 著，刘志忠 等译 来源：人民邮电出版社 出版时间：2007年09月 ISBN:9787115164629 定价：49元 内容介绍： 本书是优秀的CSS 入门书，重点讲述了如何使用CSS 实现基于Web ...
【CSS基础知识详解】 CSS，全称为Cascading Style Sheets，中文通常翻译为“层叠样式表”，是用于控制网页布局和样式的规范。它弥补了HTML在表现层设计上的局限性，让网页设计更加灵活多样。自IE 3.0开始，浏览器...
### CSS基础知识解析 #### 一、CSS简介 - **1.1 HTML的局限性** HTML是一种用于构建网页内容的标准标记语言。它主要用于定义网页内容的结构和意义，例如使用`<h1>`标签来表示一级标题，使用`<p>`标签来表示段落...
HTML+CSS 基础知识点总结 HTML+CSS 是前端开发的基础技术，掌握 HTML、CSS 和 JavaScript 语言是必不可少的。下面是 HTML+CSS 基础知识点总结： 1. HTML 是网页内容的载体，内容就是网页制作者放在页面上想要让...
在"前端CSS基础——常规流中练习对应图片代码"中，你可能会看到如何通过CSS控制元素在常规流中的位置和大小。例如，可以使用`display`属性来改变元素的行为，将一个内联元素转换为块级元素，或者创建一个内联块级...
《HTML XHTML CSS基础教程（第6版）》是由著名IT教育家Elizabeth Castro编著的一本经典教程，专门针对初学者设计。这本书详细介绍了网页开发的基础技术，包括HTML、XHTML和CSS，帮助读者掌握构建现代网页的核心技能...
**CSS基础** 1. **选择器与声明**：CSS通过选择器（如元素选择器、类选择器、ID选择器等）来定位HTML元素，然后用声明（属性：值）来设置样式。 2. **盒模型**：CSS盒模型包括内容、内边距、边框和外边距，影响...
css基础教程，适合新手使用，仅供参考
CSS，层叠样式表，是用于控制网页元素样式的重要语言。在这篇关于"CSS基础选择器"的讲解中，我们将深入理解CSS选择器的概念以及如何使用它们来定位并应用样式到HTML...这样可以帮助你更好地理解和应用CSS基础选择器。
CSS基础-介绍及语法，css入门必备资料
### CSS基础代码详解 #### CSS入门精要：掌握核心概念与实践技巧 **CSS（Cascading Style Sheets）**，即层叠样式表，是一种用于描述网页文档（如HTML或XML）外观和格式的标记语言。它使得网页设计更加灵活、高效...
html + css 基础学习html + css 基础学习html + css 基础学习html + css 基础学习html + css 基础学习html + css 基础学习html + css 基础学习html + css 基础学习html + css 基础学习html + css 基础学习html + css...
**CSS基础代码详解** 在网页设计中，CSS（Cascading Style Sheets）是不可或缺的一部分，它用于控制网页的布局和样式。本资料包包含了作者学习CSS时编写的代码，非常适合CSS初学者作为学习素材。通过阅读和理解这些...
DIV+CSS基础教程全攻略，让你熟练如何更好的掌握DIV+CSS
【CSS基础知识】是针对初学者入门的一门课程，旨在教授如何使用CSS来控制网页的样式和布局。CSS，即层叠样式表（Cascading Style Sheets），是一种样式语言，用于描述HTML或XML（包括如SVG、MathML等各种XML方言）...