!!!为什么要用CSS修改样式,不直接用标签里面的属性,因为麻烦,而且需要记忆的点很多,所以用CSS来修改样式,不用记忆哪些属性属于哪个标签,而且当需求变更时不需要修改大量的代码就可以满足要求,在前端开发时,CSS只有一个作用就是修改样式!!!
注意:CSS代码写在<head>和</head>之间的<style>样式</style>之间
1.初识CSS:
用CSS代替在标签中一点一点的更改样式!更加方便快捷
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>初识CSS</title>
<style type="text/css">
h2{
text-align: center; <!--修改文字的位置(居中)-->
color:#FF0004; <!--修改文字颜色-->
font-family: "微软雅黑"; <!--修改文字字体-->
}
p{ <!--找到当前网页上所有为p的标签,对其样式进行修改-->
text-align: center;
color: mediumslateblue ;
font-size="10px"; <!--修改文字大小-->
font-family: "Times New Roman";
font-weight: "600px"; <!--修改文字粗细-->
}
</style>
</head>
<body>
<h2>独自美丽</h2>
<p>Love is love</p>
<p>Man always love beause of romantic</p>
<p>想来生活无非是痛苦和美丽</p>
<p>落日和你</p>
</body>
</html>
注意:1. style标签一定是写在<head>中!2.style{}中的属性一定要在末尾加上;号!
2.学习CSS标签:
主要学习属性以及属性的值,还有选择器{}前面的值,例如p{}。
(1)文字的样式、粗细、大小、字体的属性:
<head>
<style type="text/css">
p{
font-style: italic; /*文字样式,按fs加tab键即可自动生成*/
font-weight: "400"; /*字体粗细,有极限值,快捷键是fw加tab键*/
font-weight: bold ; /*加粗,快捷键是fwb加tab键*/
font-weight: bolder; /*比加粗更粗,快捷键是fwbr加tab键*/
font-weight:lighter; /*细线,快捷键是fwl加tab键*/
font-size: "300px" ; /*文字大小,一定要带单位px单位,快捷键是fz加值加tab键*/
font-family: "楷体"; /*设置字体,快捷键是ff加tab键*//*中文需要加""号*/
}
h1{
font-style: italic;
font-weight: bold;
font-size: 20px;
font-family: "楷体";
}
</head>
</style>
<body>
<h1>独自美丽</h1>
</body>
注意在字体这里可能有特殊需求:
1、如果设置的字体系统没有,可以用系统默认字体或者多写几个字体做备用。
2、英文字体不适用中文,但是中文字体可以适用于中文,利用这一点,我们可以让中文、英文的字体不一样。英文样式在前,中文样式在后。
p{
text-align: center;
font-family: "Times New Roman","宋体";
font-weight: bold;
}
<p>Man Alwags love 想来生活无非是痛苦 pain 和美丽 beautiful</p>
注意:
1.中文常用字体:宋体、黑体、微软雅黑。
2.英文常用字体:Times New Roman、Arial。
3.不是因为名称的字体就一定是应用于英文的字体,每一个中文字体也都有一个英文名。宋体:SimSun 黑体:SimHei 微软雅黑:Microsoft YaHei
3. font属性缩写:
但是在这里只能省略style 或者 bold 属性值,其他不能省略,并且位置也不能交换
/*文字属性的缩写 font:文字样式 是否加粗 文字大小 文字字体*/
p{
font: italic bold 20px "宋体"
}
(2)文本属性:文本装饰(text-decoration)、文本水平对齐(text-align)、文本缩进的属性
<style type="text/css">
p{
/*缩写就是td+值加tab键*/
text-decoration: underline;/*下划线*/
text-decoration: overline; /*上划线*/
text-decoration: none; /*可以去除下划线,比如a标签中超链接的下划线*/
text-decoration: line-through;/*删除线*/
text-align: center; /*文本居中*/
text-indent: 20px; /*文本缩进,单位是像素*/
text-indent: 2em; /*缩进两个文字,em是文字的单位*/
}
</style>
(3)颜色属性
<style type="text/css">
p{
color: red;
}
</style>
<body>
<p>想来生活无非是痛苦和美丽</p>
</body>
在CSS中如何通过color属性来修改文字颜色:
- 通过英文单词赋值:color:red(红色);但是 表示颜色有限制.
- 通过rgb(红、绿、蓝)赋值:color: rgb(100,200,30),取值范围为0~255,三个值相同就是灰色,随着值越小越偏黑色。
- 通过rgba赋值:color: rgba(250,0,0,0.8);a的值表示透明度,取值为0~1,值越小越透明。
- 通过16进制赋值:color: #00FFFF; 本质还是RGB,每两位十六进制表示一位颜色值。
- 通过16进制的缩写赋值: color: #0FF; 十六进制的值,每两位都一样,就可以简写。
3. CSS中的标签选择器
<head>
<title>CSS文本属性</title>
<style type="text/css">
p{
/*更改属性以及属性值*/
}
</style>
</head>
<body>
<p>想来生活无非是痛苦和美丽</p>
</body>
但是注意:会应用于当前界面该标签所有的,而不能单独指定某一个,例如p标签,则当前界面所有段落都会被更改。而且每个标签都可以作为一个标签选择器:hn、img…
4.id选择器
功能: 为了实现单独选择某个特定的标签单独改变样式
注意: 使用id选择器选择特定标签时需要 #+id名,id名称命名规则与标识符相同,不能跟标签名相同。企业开发中,id不能随便用,只是为了设置样式不用id,id留给js用。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>id选择器</title>
<style type="text/css">
#ident1{ /*注意,使用id选择器时前面一定要加#*/
color: red;
}
</style>
</head>
<body>
<p id="ident1">Love is love</p>
<p id="ident2">Man always love beause of romantic</p>
<p id="ident3">想来生活无非是痛苦和美丽</p>
<p id="ident4">落日和你</p>
</body>
</html>
5. 类选择器
注意:
1.每个标签都可以设置类名。
2.类名可以重复。
3.注意在设置样式是=时,要.(点)+类名{设置属性+属性值}。
4.一个标签可以由多个类名。
eg: <p class=“pp par2”>落日和你</p>表示该p标签有两个名字,pp和par2,中间由空格隔开。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>class类选择器</title>
<style type="text/css">
/*根据指定的类名找相应的标签,设置相应的属性*/
/*类名前加.点!*/
.pp{
color: red;
}
.ppp{
color: yellow;
}
</style>
</head>
<body>
<h2>独自美丽</h2>
<p class="pp">Love is love</p>
<p class="ppp">Man always love beause of romantic</p>
<p class="pp">想来生活无非是痛苦和美丽</p>
<p class="pp par2">落日和你</p>
</body>
</html>
对比: 类选择器和id选择器的区别
- id相当于人的身份证号,不可重复,仅有一个。class相当于人加入的社团可以重复而且可以有多个。
- id选择器以#开头,class选择器以.开头。
- 一般id是给js用的,所以设置样式首先考虑class再考虑id。
拓展:
用class可以抽取出相同更改的样式,在企业开发中常用,可以减少代码量。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>class类选择器</title>
<style type="text/css">
/*根据指定的类名找相应的标签,设置相应的属性*/
/*类名前加.点!*/
.size30{
font-size: 25px;
}
.colorR{
color: red;
}
.line{
text-decoration:underline;
}
</style>
</head>
<body> <!--在企业开发中可以将公共代码抽取到类选择其中,将标签与类绑定即可-->
<p class="colorR size30">想来生活无非是痛苦和美丽</p>
<p class="size30 line">落日和你</p>
<p class="colorR line">超喜欢你</p>
</body>
</html>
6.后代选择器:div为父代标签
格式:div、div标签中的(#+id名)、div标签中的(.+class名)+空格+子代标签(与div类似可用标签名,也可以用id或者class)
表示的含义是:去body标签内容中找到父代后去找对应子代标签更改样式,注意在如果只用标签名称不用id或者class名,那么这里一个空格表示往下一代
eg:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>后代选择器</title>
<style type="text/css">
div p{ /*父代标签+空格+子代(儿子、孙子等等等,只要是子代就行)标签*/
color: red;
text-decoration: underline;
}
#div1 #para1{
text-align: center;
}
#div1 .para3{
font-size: 25px;
}
div ul li ul li p{
color: blueviolet;
}
</style>
</head>
<body>
<div id="div1" class="div2">
<p id="para1">想来生活无非是痛苦和美丽</p>
<p class="para3">落日和你</p>
<p>超喜欢你</p>
<ul>
<li>
<ul>
<li>
<p>Man Alwags love 想来生活无非是痛苦 pain 和美丽 beautiful</p>
</li>
</ul>
</li>
</ul>
</div>
<hr>
<h2>独自美丽</h2>
<p>Love is love</p>
<p>Man always love beause of romantic</p>
<p>想来生活无非是痛苦和美丽</p>
<p>落日和你</p>
</body>
</html>
7.子元素选择器*只能选能父代的直接子代(即儿子)*
注意:
1. >表示直接子代,一个>号表示向下一个直接子代,没有空格!!!没有空格!!!
2.
div>ul>li>p
{
color: blueviolet;
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>子元素选择器</title>
<style type="text/css">
div>p{ /*>表示直接子代*/
color: red;
}
div>ul>li>p{ /*>表示直接子代,一个>号表示向下一个直接子代*/
color: blueviolet;
}
#ident1>p{ /*也可以跟子代选择器一样用父代的id或者class名*/
font-size: 25px;
}
.div1>p{
text-align: center;
}
</style>
</head>
<body>
<p>Love is love</p>
<div id="ident1" class="div1"> <!--如何只让下面两个p变成红色的?即直接子代变色-->
<p>Man always love beause of romantic</p>
<p>想来生活无非是痛苦和美丽</p>
<ul>
<li>
<p>独自美丽</p>
</li>
</ul>
</div>
<p>落日和你</p>
</body>
</html>
拓展:后代选择器与子元素选择器之间的区别,在企业开发中选哪个?
不同:
1.后代选择器会选中该父代所有具有该标签的所有子代(包括孙子…),但是子元素选择器>只能选择直接子代
相同:
1.两个都可以使用相应的符号一直连续下去。
2.两种选择器都可以使用标签选择器、id选择器、class选择器来实现。
8. 设置背景颜色、背景图片
背景颜色就是属性background-color,它的设置与字体color值的设置一样。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>设置背景颜色和背景图片</title>
<style type="text/css">
body{
<!--本地或者是网络地址-->
background-image: url("img1.jpeg");
background-repeat: repeat-x;
}
</style>
</head>
<body>
<div class="div1">
</div>
</body>
</html>
1.background-repeat属性(平铺方式)
background repeat 属性,控制图片是如何平铺,有x方向平复,y方向平铺,以及no-repeat不平铺。
2.背景定位属性 background-position
取值:
(1)具体方位名词:水平方向:left、center、right, 垂直方向:top、center、bottom
(2)具体像素值:两个值,左边一个像素值表示图片距离左部像素距离,右边一个值表示图像距离顶部的像素距离。可以取负值!!!一定要加单位px
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>设置背景颜色和背景图片</title>
<style type="text/css">
body{
background-color:pink;
}
div{
height: 500px;
width: 900px;
}
.div1{
background-image: url("img1.jpeg");
background-repeat: no-repeat;
background-position: center center;
background-position: 200px 0px;/*左边值表示水平距离左边的像素距离,右边的值表示距离顶端的像素距离*/
background-position: -100px 0px; /*可以为负值*/
}
</style>
</head>
<body>
<div class="div1">
</div>
</body>
</html>