Html是网页的结构,css是网页的表现(美化),javaScript是网页的交互
概念:
概念:CSS又叫层叠样式表( Cascading Style Sheets )是一种用来表现HTML或XML等文件样式的计算机语言,主要包括盒子模型、列表模块、超链接方式、语言模块、背景和边框、文字特效、多栏布局等模块(用于控制网页的样式和布局,美化网页)
css导入样式:
1.直接导入,行内样式
<p style="color: red;font-size: 30px;">好好学习</p>
2.内嵌样式:
<style>
p{
font-size:20px;
color:gray;
}
</style>
虽然它可以写在html文件中,但它仍然属于css的范畴,所以不能再该代码块中不能使用html注释,只能使用css注释
3.外部样式: 链接式和导入式
链接式:实现代码写在css文件中,html代码中只管引用( 链接式是XHTML标签,除了加载CSS外,还可以定义RSS等其他)
h1{
color:red
}
<link rel="stylesheet" href="css/style.css">
导入式:代码位置与链接式一样(导入式属于CSS范畴,只能加载CSS)
h1{
color:red
}
<style>
@import url("css/style.css");
</style>
选择器:
标签选择器 标签{}
1.标签选择器会选择这个html代码中所有这个标签(例如:a、h、p…)的元素
2.类选择器 .类名{} //类名中文,英文都可以,符号、数字都不行。最好以英文命名为主,中文命名容易出现乱码
只改类名相同的元素,可以跨标签使用,比标签选择器更灵活
//类名可以同时命名多个, class=“类名1 类名2”;
3.ID选择器 #id名{} //id名的命名与类名的命名相同
id具有全局唯一性,只能改相应id的元素
三种选择器的优先级:id选择器 > 类选择器 > 标签选择器
通配选择器 选中所有的标签
*{
font-family: 楷体;
color: red;
font-size: 30px;
}
选择器组合 可以为多个选择器定义相同的样式表
#title,.p1,.p2,h1{
font-family: 楷体;
}
字体的各种属性:
.p1{
color:green;
font-size:20px;
font-family:楷体;
font-weight:700;
font-style:italic;
/* text-align: right;*/
/*text-decoration:line-through;删除线*/
/* text-decoration:underline;下划线*/
/* line-height:50px;行高*/
/*letter-spacing:20px;字符距*/
/*word-spacing:20px;单词间距*/
text-indent:2em;//首行缩进,em指的是当前文档一个字符的大小
}
a{
text-decoration: none;
}
背景图片:
p{
color:red;
background-color: aqua;/* 背景颜色 */
width:800px;
height:600px;
background-image:url("img/bg.jpg");/*背景图片*/
background-repeat:no-repeat;/*控制背景图片是否重复*/
background-position:center center;/*背景位置*/
background-size:400px 400px;/*尺寸*/
}
列表:
如果有两个列表,想把列表的内容样式进行修改,只改一个列表的话,把两个列表的li分别加上class名再进行修改很麻烦,直接给ul加上class名然后对u1,u2进行修改
.u1 li{
text-align:center;
color:red;
list-style-type:none;
list-style-image: url("img/img.jpg");
list-style-position:inside;/*图标位置*/
}
</style>
</head>
<body>
<ul class="u1">
<li>列表项</li><li>列表项</li>
<li>列表项</li>
<li>列表项</li>
</ul>
<ul class="u2">
<li>列表项</li>
<li>列表项</li>
<li>列表项</li>
<li>列表项</li>
</ul>
伪类:
CSS伪类专门用来表示标签的一种的特殊的状态,当我们需要为处在这些特殊状 态的标签设置样式时,就可以使用伪类 。
a{
color: gray;
text-decoration:none;
}
/*当鼠标移入到标签上时,自动切换到样式表 */
a:active{
color:green;
text-decoration:underline;
/* 点击 */
}
p:hover{
/* 鼠标放上 */
color:blue;
background-color:aqua;
}
p:active{
color: white;
background-color:blue;
}
input:hover{
background-color:bisque;
}
input:active{
background-color:antiquewhite;
}
.btn{
border: 0px;
background-color:beige;
}
.btn:hover{
background-color:bisque;
}
.btn:active{
background-color:antiquewhite;
}
/* 向拥有鼠标焦点的标签(输入框)添加样式 */
.txt1:focus{
background-color:aqua;
}
透明度:
img{
opacity:1;/*.设置标签透明度..0完全透明..1-完全不透明.*/
}
标签:
<!-- 块级标签:无论内容多少,都会独古一行,一般用来进行网贞布局.......可以设置宽高.width...height
-->
<p style="width:200px;blackground-color:aqua;">段落</p>段落后面内容
<!-- 行级标签....只占白身大小,不会古一行...设置宽高无效..主要用来对文字修饰的
-->
<b style="width:200px;background-color:.aqua;">aaa</b>.
<!-- 行级块,不占一行,可以设置宽高 -->
<input style="width:200px;"/>
div&span:
p h1这些标签虽然是块级标签,但是它们都有默认样式,会影响网页布局使用
div标签是一个块级标签,没有任何的附加样式,用来进行网页布局,给什么属性就变成什么样子
span和div同理但是是一个行级标签