在html中使用css的方法【CSS引用方式】
行内样式 在标签后面写如:
-
<h1 style=”font-size:10px;color;blue”>我是一级标题</h1>
行内样式表的应用方法:在html标记内,每个标签都使用style属性定义css样式。
注:在标签内部设置(style)样式,键值对用冒号隔开
内联样式(行内样式)
特点:专人专用,不能共享【就近原则】
缺点:结构和表现没有做分离,页面的代码比较多,维护和管理麻烦
2. 内嵌样式 (内部样式) 在title下面写 标记声明的一种样式。
语法如下:
Eg【所有的h1/p等标签都遵循样式规则 标签选择器:选中多有的h1标签】
<style type="text/css">
h1{
color: red;
font-size: 20px;
font-weight: bold;
font-style: italic;/*斜体*/
}
</style>
内部样式: 作用域小的优先级高,越具体的优先级越高 所以当内联和内部样式都有的时候,内联样式优先级高(专人专用,内部
很多名字相同的都可以用)
特点:
1)内部样式写在标签内,必须放在一个标签内
2)在一个页面中结构和样式做了分离
3)内部样式可以给这份html文档的元素使用,不能对外共享
3. 链接样式 (外部样式) 在title下写link
外部样式文件的扩展名必须是.css,强调此文件中只能放样式内容,不可以有标签之类的。
样式内容:
h1{
color: red;
font-size: 20px;
font-weight: bold;
font-style: italic;/*斜体*/ }
链接样式表的应用方法:在外部定义css样式表,通过链接标记链接到页面中的一种样式。
(Href路径 rel样式 type类型)
语法:
外部样式【看搜狐网站】
特点:
一个外部样式可以给任意的html文档使用,一对多的关系,完全的分离
中大型网站使用频率高
4. 导入样式 @import
导入样式的应用方法:采用导入样式的样式表,在HTML文件初始化时,会被导入到HTML文件内,作为文件的一部分,类似于内嵌样式表效果。
语法:
<head>
<style type=”text/css”>
@import “1.css”
</style>
</head>
特点:同外部样式一样
优先级:越具体优先级越高 实际要看先后顺序
行内样式>内嵌样式>链接样式
最好使用1-2种,避免“撞车”
二.
Css选择器
css选择器,也称为选择符,用于选择需要添加样式的元素
css的基本语法:
选择器{
属性:属性值; (样式规则:键值对)
…}
- 全局选择器 通配符 通用 权重 0
全局选择器:设置所有标签使用同一样式,用表示
全局选择器语法:{}
显示效果:
html代码:
<h1>我是标题红色</h1>
<p>我是段落红色</p>
css代码:
*{ color:red;}
!结构和样式分离:分工明确,操作简单
组合选择器:
H1,h2,h3,h4,h5,p{
}
h.special,special,#one{
text-decoration:underline;//下划线
}
后代选择器:
<style id="my">
/*查找p元素的后代span元素 空格就是后代*/
p span{
color: green;
}
i span{
color: red;
}
.pcolor #my{
color: lightskyblue;
font-size: 50px;
}
</style>
<p id="my" class="pcolor">段落1</p>
<p class="pcolor"><span id="my">后代元素</span></p>
<p>段落2</p>
<p>开心<span>y<i>u<span>yang</i></span></span>快乐</p>
子元素选择器:
语法:
选择器1>选择器2>…{
//样式规则
}
<style type="text/css">
p>i{
color: red;
}
</style>
<p>lalal</p>
<p>不<i>爱你</i></p>
嵌套选择器:
选择器1 选择器2{….}
P b{
Color:bule;
}
嵌套使用CSS标记的方法
嵌套之外的 标记不生效 2. 标签选择器 元素选择器 权重 1 标签选择器:用于声明标记采用的样式。 例如,p选择器用于声明所有p标签的样式,同样也可用h1选择器来声明页面中所有h1标签的样式。 标签选择器的语法:E Selector{
{ property:value1;
property:value1;
样式规则
}
特点:选择的面比较广,不是最灵活。可以对多个标签同事进行组合声明 }
p{}直接给标签设置样式的就是标签选择器
显示效果:
例1
html代码:
<h1>我是标题红色</h1>
<p>我是段落红色</p>
<p>我是段落红色</p>
<p>我是段落红色</p>
css代码:
p{ color:red;}
p,h1{color:red;}
- 类选择器 样式名选择器 权重 10
类选择器:class 用来为一系列标签定义相同的样式。
例如:当声明了p标签为红色时,页面中的所有p标签都显示为红色,如果希望其中的几个不是红色,就需要使用类别选择器 。
类选择器的语法: E.类名{样式规则}
显示效果:
执行步骤
在网页中书写css代码:
.red{ color:red;}
给h1标签和第三个p标签引入类别选择器red, html代码:
我是标题红色
我是段落红色
我是段落红色
我是段落红色
特点:一个元素可以使用多个类选择器,不同的规则可叠加,可穿两个样式,相同的功能看优先级:p.color范围比.color范围小,所以冲突使用p.color。比较灵活。<style type="text/css">
.pcolor{
color: chartreuse;
}
p.pcolor{
color: blue;
}
.show{
font-size: 40px;
}
div.two{
background-color: yellow;font-size: 25px;
}
div.one{
background-color: greenyellow;font-size: 5px;
}
</style>
<p>Y</p>
<p class="pcolor show">Y</p>
<p>Y</p>
<h1 class="pcolor">Y</h1>
<p>Y</p>
<div class="two">块内容2</div>
<div class="one">块内容1</div>
- ID选择器 权重 100
行内样式 权重 1000
ID选择器和类选择器类似,但要注意同一id名在同一个页面中只能出现一次。(具有唯一性)
ID选择器的语法: #id名{}
显示效果:
执行步骤
在网页中书写css代码:
【E】#con{ color:red;}
给h1标记添加id选择器con。
<h1 id="con">我是标题红色</h1>
<p>我是段落红色</p>
<p>我是段落红色</p>
<p>我是段落红色</p>
-
伪类选择器
a:link(未被访问过,访问之前的状态)
a:hover (鼠标滑过) a:hover{text-decoration: underline;}; 鼠标放上去后有下划线
a:active(鼠标按下)
a:visited(访问过后)
伪类选择器: 用伪类定义的样式并不是作用在标记上,而是作用在标记的状态上。
我们这里只要求掌握超链接的伪类a:hover。
伪类选择器的语法:a:hover{ }
a:active{ a:visited{
color: gray;} color: greenyellow; font-size: 100px; }
显示效果:
执行步骤
html代码
<a href="#">公司首页</a>
<a href="#">公司新闻</a>
<a href="#">产品展示</a>
<a href="#">练习我们</a>
css代码:
a { color:red;}
a:hover{ color:yellow;}
优先级:id>class>标签>全局
权重值:
Style 1000
Id 100
Class 10
标签(p)1
全局(*)0
(标签选择器的一种)派生选择器(包含选择器):html div {} p a{}
三
文字属性
- color字体颜色
color属性:用于定义文字的颜色。常用的表示方式有:颜色名称或十六进制,其他表示方式不要求掌握。
2. font-size字号
font-size属性:设置文字的大小。 属性值只要求数字加单位,可以是百分比,其他不需要掌握。常用的网页文字大小有12px(正文)、14px(标题)
显示效果
执行步骤
html代码
<p>我是段落标签,我变成了12像素的文字哦,网页常用的文字大小为12px和14px,要记得哦!</p>
css代码`:p{font-size:12px;}`
- font-family字体: “黑体”“宋体”“微软雅黑” 首先执行第一个字体
font-family属性:设置字体,如宋体、黑体、隶书等。字体的表示方式只要求掌握字体名称,其他不要求掌握。
显示效果
执行步骤
html代码
<p>我是段落标签,我被设置成宋体,宋体是网页中常用的字体!</p>
css代码:
p{font-family:宋体; }
- font-weight字体加粗
bold、bolder、600-900加粗
normal普通字体100-500
font-weight属性设置文字的粗细程度,属性值只要求掌握bold和normal、其他不要求掌握。
bold 设置粗体
normal将粗体改为正常字体
显示效果
执行步骤
给第一个h2标签和p标签分别添加类别选择器normal、bold,html代码:
<h2 class="normal1">我是二级标题,我正常显示了 </h2>
<h2>我也是二级标题</h2>
<p class="bold1">我是段落标签,我被加粗了</p>
<p>我也是段落标签</p>
css代码:
body{ color:#FF0000;}
.normal{ font-weight:normal;}
.bold{ font-weight:bold;}
- font-style字体倾斜(倾斜方式: i em address font-style )
italic倾斜
normal普通字体
二、 段落属性 - 文字修饰(text-decoration):p默认情况下是text-decoration:none;
underline下划线
overline 上划线
line-through删除线
none 无修饰
text-decoration属性是文本修饰属性。属性值有underline下划线、none 无修饰、overline 上划线、line-through删除线。常用属性值underline和none,即如何为文本设置下划线,如何为带有下划线的超链接文本去掉下划线,
如:p{text-decoration:underline;}
a{text-decoration:none;} - 水平对齐方式(text-align) 默认 left
text-align属性:设置文本的水平对齐方式。属性值可以设置为left、center、right等,即如何为文本设置左对齐、居中对齐和右对齐,其他值不要求掌握。
如:h2{ text-align:center;} - 文本缩进(text-indent) 假如设置一个比较大的负数,可以做出文字消失效果
text-indent属性:设置文本块中首行的缩进,属性值可设置为数值加单位或者用em设置缩进几个字,百分比和负值不要求掌握。-2em
如:p{text-indent:24px} 或 p{text-indent:2em;}
4. 文本行高 (line-height) 如果line-height 和 height的值一样,则可以做出文字垂直居中效果
line-height属性:设置行间距,即行高。属性值可设置为数值加单位,百分比和负值,负值不要求掌握。
如:p{line-height:25px;}
代码:
p.show{
color:red;
font-family: sans-serif;
letter-spacing: 29px;/*字母之间的间距*/
word-spacing: 3px;
font-size: 30px;
border: 1px solid red;
line-height: 150px;
text-align: center;/*对齐方式*/
text-indent: 10px;/*首行缩进*/
text-transform: capitalize;/*首字母*/
text-shadow: 10px -10px 5px cornflowerblue;/*文本阴影【第九单元】后面新增*/
text-decoration: underline;
}
- 边框属性【块级标签】
#yy{
border-style: dashed;/*边框虚线 实心 solid */
border-width: 2px;
border-color: blue;
height: 100px;
width: 100px;
border-top-style: solid;/*顶部边框样式
}
div.love{/圆角边框/
border: 1px solid red;
height: 100px;
width: 100px;
border-radius: 50px;/边框圆角半径 50 就是园了/
box-shadow: 10px 10px 2px red;/盒子的阴影/ box-shadow: 0px 0px 10px #000000;/黑色无偏移量/
}
hello,my name is yolanda
可以简写:
Border:2px solid red; boder-left:2px dashed bule;
Height:100px; boder-bottom:2px solid red;
Width:100px;
三、 背景属性background
背景属性包含背景色,背景图,背景重复,背景位置,背景附件和背景复合属性等。
背景颜色background-color
背景图片background-image:url();
背景重复:background-repeat:
属性值:repeat/no-repeat/repeat-x/repeat-y
背景位置:background-position:水平 垂直;
怎么使背景图片居中?
Background-position:center; 全选
Background-position:50% 50%;
Background-position:50% center;
Background-position:center 50%;
可以取的值为关键字,数值,百分比
水平:left center right(或者数值)
垂直:top center bottom(或者数值)
背景附件 (背景是否滚动 属性值:scroll(默认)滚动 fixed 固定):
background-attachment:fixed; 谷歌浏览器开启:chrome://flags/#overlayscrplbars chrome://flags/ Scollbars->Rnable
background复合属性在一个声明中设置所有的背景属性,如背景颜色、背景图像、背景重复及背景位置的设置,属性值的顺序可调换。
如:background: red url(1.jpg) no-repeat right top;
body{
/*border: 1px; body也是容器
background-color: blue;
background-image:url(…/img/logo.jpg);
background-repeat: no-repeat;
background-position: 80% bottom;
background-attachment: scroll;
*/
background: red url(…/img/logo.jpg) no-repeat 20px 20px scroll;
四、 列表案例符号的样式 list-style
list-style-type 定义列表前面的项目符号
Disc(实心圆)、circle(空心圆)、 square(方块)、 none(不使用任何标号)。
list-style-image 定义列表项标志的图像【设置了图片上面的不好用了最好上个属性设置成none】
语法格式如下:list-style-image:none|url(url)
list-style-position 列表位置
语法格式如下:list-style-position:outside(默认)|inside()在列表li的里面还是外面
去掉列表案例符号的代码是: ul{list-style:none;}
<
style type="text/css">
ul{
border: 1px solid red;
}
ul li{
border: 1px dashed black;
/*list-style-type: decimal; 数字 变成了有序列表
list-style-image: url(../img/logo1.jpg);
list-style-position: outside; 设置在li的里面还是外面*/
list-style: url(../img/logo1.jpg) inside;
}
</style>
<ul>
<li>列表</li>
<li>列表2</li>
<li>列表3</li>
</ul>