css基础和心得(一)

时间:2024-01-03 10:43:20
 css开始
p{
   font-size:12px;
   color:red;
   font-weight:blod
}
p为选择符p{}又称选择器,指明网页中要应用样式规则的元素。属性和值之间用
":"分隔。注意:最后一条声明可以没有分号,但是为了以后修改方便,一般也加
上分号;为了使用样式更加容易阅读,可以将每条代码写在一个新行内。
css样式分为:内联式、嵌入式和外部式
内联式:css样式表就是把css代码直接写在现有的html标签中,如:
<p style="color:red">这里的文字是红色。</p>
注意要写在元素开始的标签里面,写后面是错误的。如:
<p>这里是红色</p style="color:red">
并且css样式代码要写在style=""双引号中,如果有多条css样式代码设置可以写
在一起,中间用分号隔开。如:
<p style="color:red;font-size:12px">这里文字是红色</p>
嵌入式:就是可以把css样式代码写在<style type="text/css"></style>标签之
间。如:
<style type="text/css">
span{
color:red;
}
</style>
嵌入式css样式必须写在<style></style>之间,并且一般情况下嵌入式css样式写
在<head></head>之间。
外部式css样式(也可称为外联式)就是把css代码写一个单独的外部文件中,这个
css样式文件以".css"为扩展名,在<head>内(不是在<style>标签内)使用<link>
标签将css样式文件链接到html文件内。如:
<link href="base.css" rel="stylesheet" type="text/css" />
注意:1.css样式文件名称以有意义的英文字母命名,如main.css 
2.rel="stylesheet" type="text/css"是固定写法不可修改
3.<link>标签位置一般写在<head>标签内
优先级为:内嵌式>嵌入式>外部式 当然 也是需要视情况而定
嵌入式>外部式有个前提:嵌入式css样式的位置一定在外部式的后面。如:
<link href="style.css"...>代码在<style type="text/css">...</style>代码
的前面。总结来说就是就近原则(离被配置元素越近优先级别越高)
以上的优先级是有一个前提:内联式、嵌入式、外部式样式表中css样式是在的相
同权值的情况下。后面我会说什么是权值。
每一条css样式声明(定义)由两部分组成,形式如下:
选择器{
样式;
}
在{}之前的部分就是"选择器","选择器"指明了{}中的"样式"的作用对象,也就是
"样式"作用于网页中的哪些元素。
标签选择器其实就是html代码中的标签。如:<html>、<body>、<h1>、<p>、<img>
如:p{font-size:12px;line-height:1.6em;}
上面的css样式代码的作用:为p标签设置12px大小的字号,行间距设置1.6em的样
类选择器在css样式编码中是最常用到的。
语法:.类选择器名称{css样式代码;}
注意:1.英文圆点开头 2.其中类选择器名称可以任意起名(不要起中文噢)
使用方法:第一步:使用合适的标签把要修饰的内容标记起来,如下:
<span>胆大包天</span>
第二步:使用class="类选择器名称"为标签设置一个类,如下:
<span class="stress">胆大包天</span>
第三步:设置类选择器css样式,如下:
.stress{color:red;}/*类前面要加入一个英文圆点*/
在很多时候,id选择器都类似于类选择器,但是也有一些重要的区别:
1.为标签设置id="id"名称,而不是class="类名称"
2.id选择符的前面是#号而不是英文圆点.
学习了类选择器和id选择器之后感觉两者有很多相似之处,是不是可以通用呢?
相同点:可以应用于任何元素
不同点:1、id选择器只能在文档中使用一次,与类选择器不同,在一个html文档
中。id选择器只能用一次,而且仅有这么一次。可是类选择器可以使用很多次。
2、可以使用类选择器词列表方法为一个元素同时设置多个样式。我们可以为一个
元素同时设置多个样式,但只可以用类选择器的方法实现,id选择器不可以的。
(不能使用id词列表)。
说简单点,就是你们不要特么的用id了,就用class吧!就用类选择器,不要特么
的用id了!
子选择器即大于符号(>),用于选择指定标签元素的第一代元素。这个就是用来框
一个框框的~~~
包含选择器,即加入空格,用于选择指定标签元素下的后辈元素。如:
.first span{color:red;}看清楚中间有个空格!
请注意这个选择器与子选择器的区别,子选择器仅指它的直接后代,或者你可以
理解为作用于子元素的第一代后代。而后代选择器是作用于所有子后代元素。后
代选择器通过空格来进行选择,而子选择器通过">"进行选择。
总结:>作用于元素的第一代后代,空格作用于元素的所有后代。
通用选择器是功能最强大的选择器,它使用一个(*)号指定,它的作用是匹配html
中任意标签元素字体颜色全部设置为红色:*{color}
伪类选择符是一个很有意思的选择符,它允许给html不存在的标签(标签的某种
状态)设置样式,比如我们给html中一个标签元素的鼠标滑过的状态来设置字体
颜色:a:hover{color:red;}
上面一行代码就是为a标签鼠标滑过的状态设置字体颜色变红。这样就会使文字加
入鼠标滑过字体颜色变为红色特效。
分组选择符:当你想为html中多个标签元素设置同一个样式时,可以使用分组选
择符(,)/*看清楚!这里是逗号!!!*/
例如:h1,span{color:red;font-size:20px;}