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笔记1.docx
CSS学习笔记CSS学习笔记CSS学习笔记CSS学习笔记
css笔记
css笔记1如何定义样式
html和css笔记 基础内容 自己做的比较
css的笔记
css大全,自己总结的css笔记，希望各位能喜欢！！
css笔记整理（精简） 初识CSS CSS语法 CSS样式引入 css选择器 CSS中的块级元素与行内元素 background 背景(集合样式) font 文字(集合样式) border 边框(复合样式，集合样式) CSS 框模型概述
自己整理的韩顺平的 div+css 笔记笔记，非常的完整，欢迎大家下载
Html\CSS+DIV学习笔记(史上最实用的CSS笔记).
NULL 博文链接：https://hotpepper.iteye.com/blog/325882
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学习笔记 精华版
最全的css笔记
html css 笔记
学习HTML和CSS的笔记学习HTML和CSS的笔记学习HTML和CSS的笔记 学习HTML和CSS的笔记学习HTML和CSS的笔记学习HTML和CSS的笔记 学习HTML和CSS的笔记学习HTML和CSS的笔记学习HTML和CSS的笔记 学习HTML和CSS的笔记学习...
网页前端的css笔记，对于java程序员，前端也要学习一下，所以html,css必不可少
css 笔记 包括 滤镜 阴影 圆角css 笔记 包括 滤镜 阴影 圆角css 笔记 包括 滤镜 阴影 圆角css 笔记 包括 滤镜 阴影 圆角css 笔记 包括 滤镜 阴影 圆角
学习黑马前端36期的css笔记，快来下载吧，也可以关注我，联系我。
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 学习...