css基础1
css:层叠样式表,有叫级联样式表。
css分为内联方式,内部样式,外部样式。
内联方式:只需要将分号隔开的一个或者多个属性/值对作为元素的style属性的值。
属性和属性值之间用:连接。
多对属性之间用;隔开。
内部样式:样式规则位于文本档头元素中的<style>元素内,在文本档的<head>元素内添加<style>元素,在<style>元素中添加样式规则。
每个样式规则有两个部分:选择器和样式声明。
外部样式:创建一个单独的样式表文件用来保存样式规则,1.一个纯文本,文件后缀为.css,文件中只能包含样式规则,样式规则由选择器和样式声明组成。
在文档的<head>元素中添加<link>元素。
<link rel="stylesheet" type="text/css" href="myStyle.css">
css样式的表现特征:
继承性:大多数css的样式规则可以被继承。
层叠性:可以定义多个样式,不冲突时,多个样式表中的样式可以层叠问为一个。
优先级:样式定义冲突时,按照不同样式规则的优先级来应用样式。
内联样式>外部样式或者内部样式(就近原则)
!important可以调整样式规则的优先级。将其加在样式规则之后,中间用空格隔开,-选择器{属性:属性值 !important;}
选择器:
通用选择器*,可以与任何元素匹配。常用于设置一些默认的样式,比如说设置整个文档的文本 的默认字体和大小。
元素选择器:
html文档的元素就是选择器。
类选择器:
语法:.classname{color:red;}。类名称不能以数字开头。
可以将多个类选择器应用于同一个元素。
id选择器:
以一种独立于文档元素的方式来指定样式,它仅作用于id的属性的值。语法:选择器前面需要有一个#号。选择器本身则为文档中某个 元素的id属性的值。
群组选择器:
选择器声明为以逗号隔开的选择器列表。
后代选择器:-选择器一端包含两个或多个 用空格分隔的选择器。
子代选择器:只有在<div>的子元素<span>元素中的文本使用该样式。
伪类选择器:使用冒号作为结合符。伪类选择器,顺序不能打乱.
分为:链接伪类,动态伪类,目标伪类,元素状态伪类,结构伪类,否定伪类。
链接伪类:link适用于尚未访问的链接。visited适用于访问过的链接。
动态链接,用于呈现用户操作:hover用于鼠标悬停在html元素时。:active适用于html元素被激活时。:focus适用于html元素获取焦点时。
选择器的优先级:元素选择器<类选择器<伪类选择器<id选择器<内联样式
overflow处理溢出,hidden表示隐藏超出,scroll内容溢出表示滚动条,auto超出自动显示滚动,不超出不显示,visible默认属性.
transparent表示透明的,可以设置边框颜色,只是不显示边框.
大于半径默认取半径.
可以设置的为块标签img,table,行标签要转化为块标签才可设置,结构化的签:header,footer,nav,aside,session
边框倒角border-radius属性:
border-top/bottom-left/right-radius边框左/右上/下角。
边框阴影box-shadow,想方框添加一个或多个阴影,取值为多个属性列表.
h-shadow,必需,为水平阴影的位置,v-shadow,必需,为垂直阴影位置,(可选:blur,为模糊距离,spread,为阴影尺寸,color为颜色,inset,可将外部阴影outset改为内部阴影)。
box-shadow:h-shadow v-shadow blur spread color inset;
border-image属性,将图片规定为包围div元素的边框,source图片路径,width图片边框的宽度,图片边框是否应平铺repeat,铺满round,拉伸stretch
border-image:source width repeat;
轮廓outline是绘制于元素周围的一条线,位于边框边缘的外围,可起到突出的作用。
outline:color style width;
input{outline:0;}