css的样式应用方式&css的选择器
一、简单例子1：
<html>
<head>
<title>.......</title>
<style> /*样式*/
h2{
font-family: 幼园; /*字体*/
color:#ff0000; /*颜色*/
}
p{属性：值 } /* 属性：值形式 */
</style>
</head>
<body>
<h2>.......</h2>
<p>.........</p> /*应用*/
</body>
二、css的样式：1、行内样式；2、内嵌式；3、连接式；4、导入式；
1、行内样式
<p style="color:#0000ff; font-size:20px; text-decoration:underline;"
> .......</p>
2、内嵌式
<html>
<head><title>.........</title>
<style type="text/css">
P{
color:#f00ff;
text-decoration:underline;
}
h2{
}
</head>
<body>
<h2>.......</h2>
<p>..........</p>
</body>
</html>
3、连接式
1.css文件
h2
{
color:#0000ff;
}
p{
color:#ff00ff;
text-decoration:underline;
font-weight:bold;
font-size:20px;
}
<html>
<head><title>......</title>
</head>
<link href="1.css" type="text/css" rel="stylesheet">
<body>
<h2>......................</h2>
<p>........................</p>
</body>
</html>
4、导入式
<html>
<head><title>..............</title>
<style type="text/css">
<!--@import url(1.css)-->
</style>
</head>
<body>
<h2>.................</h2>
<p>...................</p>
</body>
</html>
三、css的选择器 ：标记选择器、类别选择器、ID选择器
1、标记选择器
<style>
h1{
color:red;
font-size:25px;
}
p{
font-size:25px;
}
</style>
2、类别选择器
<html>
<head><title>....</title>
<syle type="text/css">
.one
{
color:red;
font-size:18px;
}
.two
{
color:red;
font-size:20px
}
</style>
</head>
<body>
<p class="one"
>one</p>
<p class="two"
>two</p>
</body>
</html>
3、ID选择器
<html>
<head><title>.......</title>
<style type="text/css">
#one
{
font-size:20px;
font-weight:bold;
}
#two
{
font-size:30px;
color:#009900;
}
</style>
</head>
<body>
<p id ="one"
>one</p>
<p id="two"
>two</p>
</body>
</html>
一个ID不能同时出现在两个标记中，因为会引起脚本错误。
4、选择器的声明方式
(1)集体声明
h1,h2,h3,p
{
color:purple;
font-size:15px;
}
(2)嵌入式声明
p b
{
color:maroon;
text-decoration:underline;
}
<p>....................<b>.............</b>..........................</p>
(3)子选择器的声明
ul1.ul > li > ul > li >a {... : ... ; ... : ... ;}
<ul class="ul1">
<li>..................</li>
<li>..................</li>
<li>..................</li>
<ul>
<li> .............</li>
<li> ......... <a href="........"> ............... </a>
...................</ li>
<li>..............</li>
<ul>
<li>
<ul>
分享到：
相关推荐
**CSS笔记一** 在网页设计领域，CSS（Cascading Style Sheets）是不可或缺的一部分，它负责定义HTML或XML（包括SVG、MathML等各种XML方言）文档的呈现方式。本笔记将深入探讨CSS的基础知识，包括选择器、盒模型、...
"css笔记1"很可能包含了初学者在深入理解CSS时所记录的关键概念、技巧和示例。这份笔记可能涵盖了以下几个重要的知识点： 1. **选择器**：CSS选择器是用于定位HTML或XML文档中的元素的规则。基础选择器如标签选择器...
CSS笔记 CSS（Cascading Style Sheets），即层叠样式表，是一种用于描述网页样式的语言。CSS的出现拯救了混乱的HTML，让HTML专注于结构呈现，而样式交给CSS处理。 一、CSS简介 1.1 CSS的发展历程 从HTML被发明...
css笔记整理（精简） 初识CSS CSS语法 CSS样式引入 css选择器 CSS中的块级元素与行内元素 background 背景(集合样式) font 文字(集合样式) border 边框(复合样式，集合样式) CSS 框模型概述
CSS 笔记 CSS（Cascading Style Sheets）是一种用来表现 HTML 或 XML 等文件样式的计算机语言。它可以静态地美化网页，也可以配合各种脚本语言动态地对网页各元素进行格式化。CSS 能够对网页中元素位置的排版进行...
尚硅谷（李立超）——HTML5&CSS3笔记总结【持续更新】 本文适合前端菜鸟食用，小编自己整理的李立超老师视频的笔记，手打不易，那就望您每年快乐吧。逃） 一、进制 1.十进制（日常使用）： 特点：满10进1 计数：0 1 ...
HTML+CSS学习笔记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），是用于描述HTML或XML（包括如SVG、MathML等各种XML方言）文档样式的样式表语言。它的主要功能是分离网页的内容（HTML或其他标记语言）与表现形式，...
DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">`。 - **元数据与编码**：`;charset=UTF-8">`用于声明文档的字符编码，确保浏览器正确...
个人css学习笔记 精华版 CSS学习笔记中涵盖了CSS的基本概念、分类、基本语法、常用属性等知识点。下面将对这些知识点进行详细的解释和总结。 什么是CSS？ CSS（Cascading Style Sheet）是一种样式表语言，用于...
在案例中，我们看到一个`div`被赋予了`.style1`的类，通过CSS设置了它的宽度、高度、边框和外边距，从而创建了一个具有特定尺寸和样式的容器。 接着，我们了解CSS。CSS允许我们将样式与HTML内容分离，使得页面设计...
1. **过渡和动画**：`transition`用于平滑地改变一个或多个CSS属性，`animation`可以创建更复杂的动画效果。 2. **伪类和伪元素**：如`:hover`、`:active`、`:focus`用于元素的不同状态，`::before`和`::after`可以...
学习HTML和CSS的笔记学习HTML和CSS的笔记学习HTML和CSS的笔记 学习HTML和CSS的笔记学习HTML和CSS的笔记学习HTML和CSS的笔记 学习HTML和CSS的笔记学习HTML和CSS的笔记学习HTML和CSS的笔记 学习HTML和CSS的笔记学习...
CSS学习笔记CSS学习笔记CSS学习笔记CSS学习笔记
HTML与CSS笔记 HTML（HyperText Markup Language，超文本标记语言）是构成网页内容的骨架，用于创建网页的结构，并通过不同的标签来描述网页的各个部分。CSS（Cascading Style Sheets，层叠样式表）则负责网页的...
网页前端的css笔记，对于java程序员，前端也要学习一下，所以html,css必不可少
总结，"黑马前端css笔记.zip"包含了CSS3的重要知识点，如选择器扩展、媒体查询、响应式设计、渐变效果、布局技术（Flexbox和Grid）以及动画过渡等。这些内容对于前端开发人员深入理解和运用CSS3至关重要，能帮助他们...
- **UTF-8**：Unicode Transformation Format - 8-bit，是一种可变长度的字符编码，适合所有语言。在英文环境下，UTF-8占用空间较少。 - **GBK**：是GB2312的扩展，支持更多汉字，并兼容GB2312。 - **GB2312**：早期...
- 外部 CSS：通过 `<link>` 标签引用一个外部的 CSS 文件，如 `<link href="my.css" type="text/css" rel="stylesheet"/>`，这种方式有利于样式复用和代码组织。 - 内部 CSS：将 CSS 代码写在 HTML 的 `<style>` ...
html css js 学习笔记html css js 学习笔记html css js 学习笔记 html css js 学习笔记html css js 学习笔记html css js 学习笔记 html css js 学习笔记html css js 学习笔记html css js 学习笔记 html css js 学习...