文章目录
- CSS基础
- 一：什么是CSS
- 二：选择器
- 1：idea新建CSS目录样式
- 2:CSS代码在HTML应用的两种方法
- 3:三种选择器
- 4:结构伪类选择器
- 5:属性选择器
- 三:字体及颜色设置
- 1:字体
- 2:颜色
- 3:杂
- 4:设置阴影
- 四:列表样式
- 五:盒子模型
- 1:背景图像的应用及颜色渐变
CSS基础
一：什么是CSS
层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。
CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。
注：查找CSS样式的网站：
CSS样式菜鸟教程
二：选择器
1：idea新建CSS目录样式
2:CSS代码在HTML应用的两种方法
a：新建一个CSS文件，在其中写CSS代码，然后在HTML中插入CSS文件的链接
<link rel="stylesheet" href="css/style.css">
b：在head标签中插入style标签，在style标签中写css代码
a：标签选择器
格式:选择器{}
使用CSS改变h1标签下字体的颜色：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*这个叫CSS注释哦*/
h1{
color: #c1e6ad;
}
</style>
</head>
<body>
<h1>我是标题哦</h1>
</body>
</html>
style要写在head标签内。
注:普通选择器,所有h1都会变颜色
上文的选择器设置的叫做内部样式，有一个更高优先级的叫做行内样式。
就是在h1的行内直接设置style。
<h1 style="color: palevioletred">我是标题哦</h1>
当同时有内部样式与行内样式，最后标签的效果依然是看行内样式。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*这个叫CSS注释哦*/
h1{
color: #c1e6ad;
}
</style>
</head>
<body>
<h1 style="color: palevioletred">我是标题哦</h1>
</body>
</html>
3:三种选择器
a:标签选择器,如上.
b：类选择器
格式： .class的名称
可以跨标签来实现
类：控制每一个具有相同class的标签。
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.张三{
color: aqua;
}
.李四{
color: aquamarine;
}
</style>
</head>
<body>
<!--类选择器-->
<h1 class="张三">one</h1>
<h1 class="李四">two</h1>
<h1>three</h1>
</body>
c：id选择器的格式：#id名称{}
id全局唯一，无法复用
不遵循就近原则：固定
id选择器>class选择器>标签选择器
当h1设置id为张三，其他标签都无法设置为张三。
所以是对每个标签的单独控制。
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#张三{
color: cornflowerblue;
}
</style>
</head>
<body>
<h1 id="张三">张三</h1>
<h1>李四</h1>
<h1>王五</h1>
<h1>赵六</h1>
<h1>哈哈</h1>
</body>
4：层次选择器
a:后代选择器
某个元素（在这里是body）后面的元素的所有子代，
<style>
body p{
background: aquamarine;
}
<style>
此为选中body后的所有p元素
body的第一级子代：p，ul 和h1，ul的子代也是p，而，所有子代p都会被选中，所以ul后的p也被选中。
<body>
<p>zero</p>
<p class="active">one</p>
<p>two</p>
<p>three</p>
<ul>
<li>
<p>four</p>
</li>
<li>
<p>five</p>
</li>
<li>
<p>six</p>
</li>
</ul>
<p class="active">seven</p>
<h1>eight</h1>
</body>
注意：只有body才有后代p和h1，而h1不是p的后代，两者是并行的关系。
所以如果要选中h1，应该写成：
<style>
body h1{
background: aquamarine;
}
</style>
b:子选择器
只选择后面的一代,所以ul中的子代p不会被选择.
格式:
<style>
body>p{
background: antiquewhite;
}
</style>
c:相邻兄弟选择器
被选中的标签的下一个标签(发生在同代之间)
<style>
.active + p{
background: lightblue;
}
</style>
选中类为active的下一个标签
<body>
<p>zero</p>
<p class="active">one</p>
<p>two</p>
<p>three</p>
<ul>
<li>
<p>four</p>
</li>
<li>
<p>five</p>
</li>
<li>
<p>six</p>
</li>
</ul>
<p class="active">seven</p>
<h1>eight</h1>
</body>
所以one的下面two被选择
d:通用选择器
相邻的所有兄弟元素(只在下面).
<style>
.active~p{
background: lightpink;
}
</style>
4:结构伪类选择器
a:选中某标签的第一个子元素
<body>
<p>zero</p>
<a href="">1111</a>
<h1>HH</h1>
<p>one</p>
<p>two</p>
<p>three</p>
<ul>
<li>li1</li>
<li>li2</li>
<li>li3</li>
</ul>
</body>
b:选中某标签的最后一 个 子元素
c:选中某父元素的第一 个 子元素,注,如果body(父)的子标签第一个元素是p,则写成p,如果是h1,则写成h1.因为我们的body中第一个是p,所以写成:
此处p不是body中的第一个元素,则不会生效.
d:选择父元素的子代类型中的第二个元素
补充,a标签鼠标移动到此处变色.
点击后变色:
<style>
a:active{
color: lightblue;
}
</style>
5:属性选择器
标签中含有很多属性,我们可以通过属性来对元素进行选择.
** a:选择存在id属性的元素**
b:选择id为first属性的元素 a[id= ]{}
还是one
c:选择class中有links item的元素
=等号为绝对等于
*=为相对等于,有点像模糊查询
d:选择href中以http开头的元素
e:选择href中以pdf结尾的元素
三:字体及颜色设置
1:字体
<style>
p{
font: 12px "宋体";
}
</style>
font-family: 宋体;
font-size: 25px;
color: aqua;
变粗:
font-weight: bold;
2:颜色
颜色:RGB 0~F
透明度 RGBA
向量表示 ,前三个变量是颜色变量,最后一个变量是透明度
<style>
h1{
color: rgba(159, 224, 160,0.25);
text-align: center;
}
</style>
注:文本居中:text-align: center
3:杂
a:首行缩进
<style>
.p1{
text-indent: 2em;
}
</style>
b:下划线
<style>
.l1{
text-decoration: underline;
}
</style>
c:中划线
<style>
.l2{
text-decoration: line-through;
}
</style>
d:上划线
<style>
.l3{
text-decoration: overline;
}
</style>
效果:
e:图片与字的水平线对齐
<style>
/*水平对齐，需要参照物*/
img,span{
vertical-align: middle;
}
</style>
<body>
<p>
<img src="images/b.jpg" alt="" width="100" height="76">
hhhhhhhhhhhhhhhhhhhh
</p>
</body>
4:设置阴影
从左往右依次是:
<style>
/*阴影 阴影颜色，水平偏移，垂直偏移，阴影半径*/
#price{
text-shadow: #19404c 10px -10px 2px;
}
</style>
四:列表样式
变成:
1:给两块区域设置不同的颜色(background)
2:调节行高让其处在合适的大小(text-line)
3:去掉有序列表的点(list-style:none)
4:去掉伪链接的下划线(text-decoration:none)
5:改变字体颜色(color)
6:碰到字体时增加下划线和改变字体颜色(a hover text-decoration)
7:设置前间距让其对齐更加明显:(text-indent)
代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#nav{
width:300px;
background: #e6adbf
}
/*设置标题
text-indent:前间距
line-height:行高
在这里指上方红色方块的高度
*/
.title{
font-size: 18px;
font-weight:bold;
text-indent:1em;
line-height: 35px;
/* 颜色,图片,图片位置,平铺方式*/
background: #d97979 url("images/g.jpg") 200px 10px no-repeat;
}
/*
行高
去掉ul的点:list-style:none
变成空心圆:list-style:circle
list-style:decimal有序列表,会被替换为数字
list-style:square:正方形
*/
ul li{
height:30px;
list-style:none;
text-indent: 1em;
background-image:url("images/g.jpg");
background-repeat: no-repeat;
background-position:200px 2px;
}
a{
text-decoration: none;
font-size: 14px;
color: #32538b;
}
/*碰到时增加下划线*/
a:hover{
color: cornflowerblue;
text-decoration: underline;
}
</style>
</head>
<body>
<div id="nav">
<h2 class="title">全部商品分类</h2>
<ul>
<li><a href="#">图书</a> <a href="#">音像</a> <a href="#">数字商品</a></li>
<li><a href="#">家用电器</a> <a href="#">手机</a> <a href="#">数码</a></li>
<li><a href="#">电脑</a> <a href="#">办公</a></li>
<li><a href="#">家居</a> <a href="#">家装</a> <a href="#">厨具</a></li>
<li><a href="#">服饰鞋帽</a> <a href="#">个护化妆</a></li>
<li><a href="#">礼品箱包</a> <a href="#">钟表</a> <a href="#">珠宝</a></li>
<li><a href="#">食品饮料</a> <a href="#">保健食品</a></li>
<li><a href="#">彩票</a> <a href="#">旅行</a> <a href="#">充值</a></li>
</ul>
</div>
</body>
</html>
五:盒子模型
盒子包括:外边距(margin)、边框(border)、内边距(padding)、实际内容(content)四个属性.
1:背景图像的应用及颜色渐变
设置背景图片:background-image: url()
当图片比较小时,背景图会铺满整个屏幕.
我们可以让它按照我们喜欢的方式铺满:
比如水平铺满:
比如竖直铺满:
或者我们希望它不铺满,只有一张:
代码实现如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
width:1000px;
height:700px;
border:1px solid palevioletred;
/*默认全部平铺*/background-image: url("images/d.jpg");
}
.div1{
/*水平平铺*/
background-repeat: repeat-x;
}
.div2{
/*竖直平铺*/
background-repeat: repeat-y;
}
.div3{
background-repeat: no-repeat;
}
</style>
</head>
<body>
<!--背景颜色与背景图片-->
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
</body>
</html>
渐变色模板的网站:
链接在这!
两种渐变的讲解,链接在这里:两种渐变
<style>
body{
background-image:linear-gradient(19deg,#7085ec 0%, #b581d5 100%);
/* 也可以只是background:*/
}
</style>
效果:
更多推荐
前端：CSS基础知识
发布评论