CSS全称为“层叠样式表 (Cascading Style Sheets)”,它主要是用于定义HTML内容在浏览器内的显示样式,如文字大小、颜色、字体加粗等。放在<head> </head>之间。
p{
color:valve;
}
p:选择值
color(:前面的值):属性
:冒号表示声明
value:值
下面的1、2、3中css方法中优先级内联>嵌入>外联(越靠近文字优先级越高)
嵌入式>外部式有一个前提:嵌入式css样式的位置一定在外部式的后面。也就是link href="style.css" ...>代码在<style type="text/css">...</style>代码的前面
1、如果只想对文章某几个字段做css操作,将这几个字段分别用<span></span>括起来
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>认识CSS样式</title>
<style type="text/css">
p{
font-size:12px;/*设置文字字号*/
color:red;/*设置文字颜色*/
font-weight:bold;/*设置字体加粗*/
}
</style>
</head>
1.1嵌入css
<title>嵌入式css样式</title>
<style type="text/css">
span{
color:blue;
}
</style>
</head>
<body>
<p>哈哈哈,<span>学习真累</span>,可是要怎么办?<span>还是要往前冲呀</span>!</p>
</body>
1.2、内联CSS
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>认识html标签</title>
<style type="text/css">
span{
color:red;
}
</style>
</head>
<body>
<p>哈哈哈,<span>学习真累</span>,可是要怎么办?<span>还是要往前冲呀</span>!</p>
/*在文章中直接对文字进行其他属性操作*/
/*此时只对“很高兴认识你”作字体变蓝操
作,其他的文字全是红色的*/
</body>
1.3、外联CSS
在.HTML文件的<head></head>中添加<link href="base.css" rel="stylesheet" type="text/css" /> 之后在.css文件中进行操作
使用<link>标签将css样式文件链接到HTML文件内;
css样式文件名称以有意义的英文字母命名,如 main.css。
rel="stylesheet" type="text/css" 是固定写法不可修改。
<link>标签位置一般写在<head>标签之内。
2、选择器{ 样式; } 对选择器内的文字进行样式更改 例:span{ color:red;}
2.1、类选择器
第一步:<span class="类选择器名">文字</span> 第二步:.类选择器名称{css样式代码;}
2.2、ID选择器
第一步:<span class="id选择器名">文字</span> 第二步:#id选择器名称{css样式代码;}
两者的区别:
ID选择器只能在文档中使用一次
可以使用类选择器词列表方法为一个元素同时设置多个样式,但是id选择器不行
2.3子选择器
.food>li{border:1px solid red;}/*添加边框样式(粗细为1px, 颜色为红色的实线)*/
使class名为food下的子元素li加入红色实线边框。
2.4包含(后代)选择器
.food li{border:1px solid red;}
使class名为food下的子元素li以及li的所有子元素加入红色实线边框。
2.5通用选择器
使用一个(*)号指定,它的作用是匹配html中所有标签元素
例:* {color:red;}/*html中任意标签元素字体颜色全部设置为红色*/
3、选择符
3.1、伪类选择符
它允许给html不存在的标签(标签的某种状态)设置样式
比如说我们给html中一个标签元素的鼠标滑过的状态来设置字体颜色:a:hover{color:red;},当鼠标划过该标签之后该标签变成红色字体
3.2、分组选择符
当你想为html中多个标签元素设置同一个样式时,可以使用分组选择符(,)
例p,span{color:red;},让<p>aa</p> <span>bb</span>中包含的文字aa、bb变成红色
4、不具备继承性(只对选择器内的文字整体进行操作,但是对选择器内局部的其他选择器包含的文字不进行操作)
p{border:1px solid red;}
5、优先级(权值越高,优先级越高)。标签的权值为1,类选择符的权值为10,ID选择符的权值最高为100
当有相同权重的样式存在时,会根据这些css样式的前后顺序来决定,处于最后面的css样式会被应用。(层叠)
!important优先级样式是个例外,权值高于用户自己设置的样式。p{color:red!important;}
(!important要写在分号的前面)