css选择器:
将css添加到<head>与</head>之间,并用<style></style>标记声明的一种样式。
语法如下:
<style>
这里写css内容
</style>
全局选择器:设置所有标签使用同一样式,用*表示
语法:*{}
例如:*{color:red;} 所有字体都为红色
标签选择器:用于声明标记采用的样式
语法:p{color:red;} 所有p标签里的文字都是红色
类选择器:用来为一系列标签定义相同的样式
语法: .类名{color:red;}
例如:
<p class="a">我是你爸爸</p>
<div class="a">我是你爸爸</div>
在<style> .a{color:red;} </style> p标签和div标签里的文字都为红色
ID选择器:ID选择器和类选择器类似,但要注意同一id名在同一个页面中只能出现一次。(具有唯一性)
id选择器的语法:#id名{}
例如:
<style> #a{color:red;} </style>
<p id="a">我是你爸爸</p>
该p标签里的文字为红色
伪类选择器:
a :link(未被访问过,访问之前的状态)
a :hover(鼠标滑过)
a :active(鼠标按下)
a:visited(访问过后)
伪类选择器:用伪类定义的样式并不是作用在标记上,而是作用在标记的状态上
我们这里只要求掌握超链接的伪类a:hover
伪类选择器的语法:
a:hover{}
优先级:
id>class>标签>全局
css属性:
文字属性:
1、color字体颜色
color属性:用于定义文字的颜色
2、font-size字号
font-size属性:设置文字的大小。常用的网页文字大小有:12px(正文),14px(标题)
3、font-family字体
font-family属性:设置文字字体,如宋体,黑体,隶书等
4、font-weight字体加粗
font-weight属性:设置文字的粗细程度,blod设置粗体,normal将粗体改为正常字体
5、font-style字体是否倾斜
italic倾斜
normal正常
段落属性:
1、文字修饰(text-decoration)
underline 下划线
overline 上划线
line-through 删除线
none 无修饰
例如:
<p text-decoration:underline;}
2、水平对齐方式(text-align)
text-align属性:设置文本的水平对齐方式。属性值可以设置为left、center、right等,即如何为文本设置左对齐、居中对齐和右对齐,其他值不要求掌握。
如<h2 text-align:center;>
3、文本缩进(text-indent)
text-indent属性:设置文本块中首行的缩进,属性值可设置为数值加单位或者用em设置缩进几个字,百分比和复制不要求掌握。
如:p{text-indent:24px;} 或 p{text-indent:2em;}
4、文本行高(line-height)
line-height属性:设置行间距,即行高。属性值可设置为数值加单位,百分比和负值,负值不要求掌握
如 p{line-height:25px;}
背景属性 background
背景属性包含背景色、背景图、背景重复、背景位置、背景附件和背景复合属性等
背景颜色:background-color
背景图片:background-img:url(路径);
背景重复:background-repeat:
属性值:repeat/no-repeat/repeat-x/repeat-y
背景位置:background-position:水平 垂直;
可以取得值为关键字,数值,百分比
水平:left,center,right
垂直:top,center,bottom
背景附件:(背景是否滚动 属性值:scroll(默认) 滚动 fixed(固定))
列表案例符号的样式 list-style
list-style-type :定义列表前面的项目符号
disc 实心圆、circle 空心圆、square 方块、none 不使用任何符号
list-style-image定义列表项标志的图像
语法:list-style-image:none\路径
list-style-position列表位置
语法:list-style-position:outside(默认、更靠里面)\inside
去掉列表案例符号的代码是:ul{list-style:none}
css盒子模型:
盒模型:
1、边框属性:
边框颜色:border-color 如border-color:red;
边框样式:border-style 常用边框样式:solid实线、dashed虚线、dotetd 点线、none 取消线
边框宽度:border-width 如:border-width:3px;
border复合属性可同时设置边框的宽度、样式和颜色 如:border:1px red solid;
单独设置一条边框如:
上边框 border-top,右边框 border-right,下边框 border-bottom,左边框 border-left
如:border-bottom:1px red dashed;
2、内填充
padding:内容与边框之间的距离
设置上内填充padding-top属性,右内填充padding-right属性
3、外边距:
margin:元素与元素之间的距离
上外边距 margin-top 属性,右外边距margin-right属性,下外边距 margin-bottom属性。
用长度加单位设置属性值: margin-left:200px
在div的css选择器里写 margin: 0 auto; 设置居中效果,但是当div被定位后就不好使了
复合属性:
padding复合属性设置所有内填充属性,用法如下:
属性值为一个数值如padding:10px;表示上右下左内填充都是10px
属性值为四个时,padding:10px 20px 30px 40px;表示上10右20下30左40
margin的复合属性与padding用法一样
padding对元素宽高的影响,会增加盒子的大小
盒子的实际宽=width+padding-left+padding-right
盒子的实际高=height+padding-top+padding-bottom
box-shadow 属性盒子阴影
box-shadow:1px 2px 3px red insert
1px表示水平阴影的位置。允许负值,必写
2px表示垂直阴影的位置。允许负值 ,必写
3px表示模糊距离,可选
red 表示阴影的颜色,可选
insert 将外部阴影(outset)改为内部阴影
text-shadow属性文字阴影:
text-shadow:x轴偏移量 y轴偏移量 阴影模糊半径 阴影颜色
border-radius属性:
指定好圆角的半径,就可以绘制圆角边框了,
border-radius:20px;
gradient 渐变
所谓渐变是指从一种颜色慢慢过渡到另外一种颜色。线性渐变和径向渐变
绘制线性渐变:
background:linear-gradient(to bottom,red,yellow);
参数值 渐变方向
to bottom 从上往下
to right 从左往右
第二个参数和第三个参数分别表示渐变的起点色和终点色
网页布局:
网页布局指的是网页内容在页面上所处位置的设计
浮动float 属性 none(不浮动) left(左浮动) right(右浮动)
设置元素向哪个方向浮动
清除浮动clear属性
clear:both;全部清除
clear:left; 清除左浮动
clear:right; 清除右浮动
display属性
display:inline 可以让块状元素变为行内显示
display:block 可以让行内元素变为块状元素
行内元素:行内元素在一行显示,只能容乃文本或者其他行内元素;不可设置宽度(设置其他样式都可)高度
常用行内元素有:
a span input I b textarea strong select label br img time
块状元素:块元素一般都独占一行,可以容纳行内元素和其他块元素,常用块级元素有:
h1-h6 p div dt dl dd ul li ol table form hr
overflow属性:这个属性定义溢出元素内容区的内容会如何处理
1、overflow:hidden 隐藏,
2、overflow:visible 可见(默认值)
3、overflow:auto 自动,如有溢出内容,相应盒子便会显示滚动条
visibility 属性规定元素是否可见
使h2元素不可见:
h2{visibility:hidden;} (占位隐藏)
display:none (不占为隐藏)
定位:
定位:
1、psoition
absolute 绝对定位 如果父级元素没有相对定位 相对于浏览器窗口定位
relative 相对定位 相对于自己去定位,会保留原来空间
fixed 固定定位 (不常用)
static 静态定位(默认)
div{position:relation; top:100px}盒子位置向下移动了100px
绝对定位 如果父级元素没加相对定位 子元素的绝对定位就是相对于浏览器窗口 加了就是相对于父级元素
position
relative 相对 1、相对于自己定位
2、保留原来空间
absolute 绝对 1、 定位:父级元素设有相对定位 ,相对于父级元素
父级元素没有设相对定位,相对于浏览器窗口
2、不会保留原来空间(浮动一样)
元素的层叠顺序
1、z-index属性:设置元素的层叠顺序,属性值为无单位的整数值,值较大的元素会叠在值较小的元素之上
2、元素可拥有负的z-index属性值,默认是:auto,默认层是0
3、当没有设置z-index属性或层数相同时,后面的元素显示在上面
4、z-index的属性值,只能为整数,正整数,0,负整数
5、z-index值越大越靠上
原文地址:https://www.cnblogs.com/sll-csdn/p/10925993.html