css层叠样式表
1、元素内嵌样式表
<p style=" color:red;font-size:50px;">.....<p>
2、外部样式表 是一个.css文件,需要在页面引用样式表才能使外部样式表的设置生效。
><link>元素应用,一般写在<head>元素内部。
<html>
<head><title>css基础<title>
<link type="text/css" rel="stylesheet" href="css.css" />(引用外部样式语句)
</head>
<body>
<p>这是一个段落。</p>
</body>
</html>
3、文档内嵌样式表 写在<style>元素中,一般位于<head>中
<html>
<head><title>css基础<title>
<style type="text/css">
p{color:red;font-size:100px;}
</style>
</head>
<body>
<p>这是一个段落。</p>
</body>
</html>
两个主部分构成
选择器:要改变以样式的HTML元素。
一条或多条声明:一个属性和一个值组成(属性(property))是需要设置的样式(style attribute);
属性和值用冒号分开;用花括号包围)。a(选择器){color(属性):black(值);font-size:100px;(声明)}
css多重声明
大多数样式表不止一条规则,包含不止一个声明。
a{ color:blac;font-size:100px;}
常用选择器
.class .myset 选择所有class=" myset "的元素
#id #myId 选择id=" myId "的元素
* * 选择所有的元素
element1 element2 div P 选择所有元素1内部的元素2
element a 选择所有该元素
element1>element2 div>p 选择父元素为元素1的元素2
element1+element2 div+p 选择紧接元素1后的元素2
element1,element2 div,p 选择所有元素1和元素2
elementhover a:hover 鼠标位于其上的元素
::seletion ::selection 选择被用户选取的元素部分
css背景
background 在一个声明中设置所有的背景属性
background-image:url(img/...) 背景图像
background-size:50px; (100%) 尺寸
background-repeat:no-repeat;(不重复) 是否及5如何重复
background-attachement:fixed;(背景固定) scoll(滚动)
background-color:rgb(0,0,0,0); 背景颜色
background-position(位置):值 right top button % px
background-clip: 背景绘制区域
background-orgin: 定位区域
>-size尺寸
x% y% 宽、高百分比,只设一个,第二个默认" auto";
x px y px 宽高像素
cover 扩展至足够大,使用图像完全覆盖区域,某些部分也许无法显示在背景定位区域中
contain 把图像扩展至在最大尺寸,适应内容区域
一条声明设置所有背景
语法:background:bg-color bg-image position/bg-size bg-repeat bg-orgin bg-clip bg-attachment initial / inherit;
>background-clip规定绘制区域
border-box 被裁减到边框盒
padding-box 被裁减到内边距框
content-box 被裁减到内边框
>background-origin: 规定图片定位区域
border-box 相对于边框盒来定位
padding-box 相对于内边距框来定位
content-box 相对于内边框来定位