css学习笔记--张孝祥视频

最新推荐文章于 2025-07-25 21:09:07 发布

原创最新推荐文章于 2025-07-25 21:09:07 发布 · 154 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#CSS #HTML #浏览器

web development 专栏收录该内容

3 篇文章

订阅专栏

本文深入探讨了CSS样式的四种常见应用方式：内联样式表、嵌入样式表、外部样式表和输入样式表，详细解释了每种方式的实现原理及应用场景。同时，介绍了CSS选择器的使用，包括ID选择器、类选择器、伪元素选择器和关联选择器，以及如何利用这些选择器创建灵活的样式规则。最后，总结了CSS样式属性，涵盖了字体、背景、文本和布局等关键属性，为开发者提供了一站式的学习指南。

设置css的几种方式
1.内联样式表（INLINE STYLES)
<meta http-equiv="Content-Style-Type" content="text/css">

2.嵌入样式表(Embeded style sheets)
<head>
<style type="text/css" media="screen,projection">

</style>
</head>

3.外部样式表(LInked style sheets)
编写一个test.css文件
P{FONT-SIZE:20pt;COLOR:blue;FONT-FAMILY;宋体;LIST-STYLE-TYPE
:circle;TEXT-DECORATION:underline}
将上面保存为css文件
作用于html文件
<head>
<link rel="StyleSheet" href="test.css" type="text/css" media="screen">
</head>

4.输入样式表(imported style sheets)
可以使用css的@import 声明将一个外部样式文件输入到另外一个css文件中，被输入的css文件中的样式规则定义语句就成为了输入到的css的文件的一部分。也可以使用@import声明将一个css文件输入到网页文件的<style></style>标签对中，被输入的css文件中的样式规则定义语句就成了<style></style>标签对中的语句.
<STYLE TYPE="text/css" MEDIA="screen,projection">
如有样式相同，则以最后一个为准

样式规则的选择器:
HTML selector
Class selector :要将一种HTML标签所创建的各个网页元素分成几类，需要将这个HTML标签的CLASS属性设置为不同的值
<p class="storp">p1</p>
<p class="warning">p2</p>
在样式表中，可以分别为某个HTML标签的各个类别定义样式规则：
<STYLE>
P.stop{color:red}
P.warning{color:yellow}
在样式表中，可以为某个类别的所有HTML标签定义样式规则:
<STYLE>
.blueone{color:blue}
</STYLE>

<h1 class="blueone">bluetitle</h1>
<p class="blueone">bluepara</p>

ID selector
ID属性用来定义某一个特定的HTML元素，一个网页文件中只能有一个元素能使用某一ID属性值，ID selector就是为样式规则定义语句选择具有某一ID属性值的HTML 元素
<span ID="yellowone">texthere</span>
在样式表中，ID值为yellowone的HTML元素的样式规则定义语句如下:
<STYLE>

</STYLE>
经验总结：
1.ID SELECTOR只能为单个HTML标签元素设置样式规则，因此具有一定的局限性，在CSS中应该尽量少用。JS和css可以根据这个ID值来操纵和定位这个特定的HTML标签，所以ID属性在JS中会被广泛应用。
2.如果网页只在某种媒介上输出时，才需要对某个单一元素进行样式设置的话，应该使用ID SELECTOR代替直接设置HTML元素的style属性的内联样式表。
3.在网页中使用了嵌入和链接样式表后，对某个元素的显示效果需要对样式表中已定义的相关样式重新设定，这就要用使用内联样式表来直接设置HTML元素的STYLE属性。

关联选择器

指一个用空格隔开的两上或更多的单一选择器组成的字符串，例如：P EM{background:yellow}
其中的P EM就是关联选择器，它表示段落中的强调文本（<em></em>标签对中的内容）的背景为黄色，而其它地方出现的强调文本则不受影响。
关联我选择器的样式规则的优先权比单一选择器的要高

组合选择器

为了减少样式表的重复声明，可以在一条样式规则定义语句中组合若干个选择器，每个选择器之间用逗号隔开，例如：H1,H2,H3,H4,H5,TD{color:red}

伪元素选择器

使用伪元素作为选择器的样式规则定义格式：
HTML元素：伪元素{属性：值}
常用的伪元素：
A:active选中超链接的状态
A:hover光标移动到超链接上的状态
A:link超链接的正常状态
A:visited访问的超链接状态
P:first-line段落中的第一行文本
P:first-letter段落中的第一个字母

类选择器与伪元素一起使用的格式：
HTML元素类名：伪元素{属性：值 }

CSS的样式属性：
可大体分为：
字体：
font-family
font-size(larger smaller xx-small x-small small medium large x-large xx-large)
font-style(字体的样式)
text-decoration
font-weight(粗体)
font-variant
text-transform(转换大小写字母)
Color
背景:
background-color
background-image 例如：{background-image:url("http://www.it315.org/logo.gif")}
background-repeat(no-repeat repeat repeat-x repeat-y)
background-attachment(fixed scroll(表示图像要跟随内容的移动而移动))
background-position (left center right 20px top bottom)
文本:
word-spacing
letter-spacing
vertical-align(sub(下标), super(上标),top,middle,bottom)
text-align(Left,right,center,justify)
text-indent(文本第一行的缩进值 )
white-space:(normal,pre,nowrap)
line-height设置所在行的行高

位置，布局，边缘，列表，其它等属性