css的书写样式 | 名称 | 语法 | 注意 |
行内样式表 | <标签名 style="属性1:属性值1;属性2:属性值2;..."></标签名> | 1.写在要添加样式的元素的开始标签里 2.每个属性用;隔开,属性与属性值用“:”隔开 | |
内部样式表 | <head><style>选择器 {属性1:属性值1;..}</style></head> | 1.写在head标签里 2.每个属性用;隔开,属性与属性值用“:”隔开 | |
外部样式表 | <head><link rel="" type="" href="css文件地址"</head> | 1.link是个单标签; 2.link标签要放在头部标签里 ,并指定link标签的属性; 3.外部样式表利用link标签与html建立连接; | |
选择器 | |||
标签选择器 | 标签名 { 属性1:属性值1;...} | 1.选择所有相同标签; | |
类选择器 | .类名 { 属性:属性值1;} <标签 class="类名1 类名2 .."> | 1.选择相同类名的标签; 2.样式表里类名前加“.” 3.一个标签有多个类名时,类名用空格号隔开; | |
id选择器 | #id名 {属性:属性值1;...} <标签 id="id名"> | 1.选择有id名的标签 2.具有唯一性 只能使用一次; | |
通配符选择器 | * {属性:属性值;...} | 1.将所有的标签全部选择出来; | |
链接伪类选择器 | a:link | 未访问时 链接的状态(样式) | |
a:visited | 已访问后 链接的样式 | ||
a:hover | 鼠标移动到链接上时的样式 | ||
a:active | 选中链接时的状态样式 | ||
后代选择器 | 父级 子级 {属性:属性值;...} | 1.父级名在前 子级名在后,父级与子级之间用空格隔开; 2.选中父级元素后面的所有子元素(包括子元素的子元素) | |
子元素选择器 | 父级>子级 {属性:属性值;...} | 1.选中父级元素里的子元素(只选中下一级) 不包括子元素的子元素; | |
交集选择器 | 由两个选择器组成,两个选择器紧挨在一起,中间不加任何符号 | 例;p.red 是指既是p标签又是类名为red的标签 | |
并集选择器 | 选择器1,选择器2 ,...{属性:属性值;...} | 1.当某些选择器定义相同样式时使用; 2.选择器与选择器之间用,隔开; | |
以下是css3新增选择器 | |||
属性选择器 | e[att] | 选择具有att属性的e元素 | |
e[att="val"] | 选择具有att属性且属性值为val的e元素 | ||
e[att^="val"] | 匹配具有att属性且属性值以val开头的e元素 | ||
e[att$="val"] | 匹配具有att属性且属性值以val结尾的e元素 | ||
e[att*="val"] | 匹配具有att属性且属性值包含val的e元素 | ||
结构伪类选择器 | e:nth-child(n){属性=属性值;...} | 1.选择父元素中第n个子元素,不管子元素是否为同一类型; 2.n可以是数字 公式 名词; 3.公式 例:n+1 n是从0开始计算; | |
e:nth-of-type(n){属性=属性值;...} | 1.选择父元素中第n个指定e类型的元素; 2.n可以是数字 公式 名词; 3.公式 例:n+1 n是从0开始计算; | ||
伪元素选择器 | div::before | 在div盒子内部的前面插入内容 必须加“conten”属性 | |
div::after | 在div盒子内部的后面插入内容 必须加“conten”属性 | ||
文字文本样式 | 名称 | 语法 | 作用 |
字体大小 | font-size | 用来设置字体的大小,单位通常用px; | |
字体 | font-family | 用来设置使用什么样的字体,常用字体:微软雅黑,宋体,黑体等; 2.可以指定多个字体,但中间要用,隔开; 3.中文字体及字体名称中带有# &等特殊符号时要用""括起来 | |
字体粗细 | font-weight | 属性:1.font-weight:normal;正常的;等同font-weight:400 ; ; 2.font-weight="bold " 加粗,等同font-weight="700 " | |
字体风格 | font-style | 1.font-style: normal;字体正常; 2.font-style: italic; 斜体; | |
综合设置字体样式 | 选择器 { font: font-style font-weight font-size/line-height font-family;} | 1.使用font属性时,必须按上面语法格式中的顺序书写,不能更换顺序,各个属性以空格隔开。 2.其中不需要设置的属性可以省略(取默认值),但必须保留font-size和font-family属性,否则font属性将不起作用 | |
外观属性 | 颜色 | color | 1.直接写英文状态的颜色名称,例 color:red; 2.十六进制 如#fff(白色) 3.rgb代码 如rgb(0,0,0)或rgb(100% ,0%,0%) |
文本水平对齐 | text-align | 1.left 左对齐; 2.right 右对齐; 3.center 居中对齐; 是让盒子里的内容水平居中对齐,不是盒子居中对齐; | |
行间距 | line-height | 1.单位为px; 2.line-height=盒子高度 单行文本垂直居中; | |
首行缩进 | text-indent | 1.单位为em; 2.1em为1个汉字的宽度,通常设置为2em; | |
文本装饰 | text-decoration | 1.none 取消文本下划线;(最常用) 2.underline 添加下划线; 3.overline 在文字上方添加线条; 4.line-through 类似删除线 在文本中间穿过线条; | |
背景设置 | 背景颜色 | background-color:颜色值; | 属性值同color设置一样; |
背景图片 | background-image : none 或 url (图片地址) | 1.none无背景图; 2.url(图片地址),使用绝对或相对地址指定背景图像 背景图片后面的地址,url不要加引号 | |
背景平铺 | background-repeat : repeat | no-repeat | repeat-x | repeat-y | ||
背景位置 | background-position:x y; | x y 可以是方位名词 也可以是精确值 和百分比 可以相互混合使用; | |
背景附着 | background-attachment | background-attachment : scroll | fixed scroll 背景图像随着内容滚动; ficed 背景图片固定; | |
背景设置简写 | background: 背景颜色 背景图片地址 背景平铺 背景滚动 背景位置; | 简写时 属性值不分先后顺序; | |
背景透明 | background: rgba(0, 0, 0, 0.3); | 最后一个参数值在0-1之间选择, | |
背景缩放 | background-size:背景图片宽度 背景图片高度;(通常移动端使用) | 1.只写一个参数时 肯定是宽度 高度会等比缩放; 2.cover 背景图片等比放大 铺满盒子 会使图片显示不完全; 3.contain 背景图片等比缩放 当宽度或高度铺满盒子时 不再进行缩放; | |
盒子模型 | 盒子组成 | 内容+内边距(padding)+边框(border)+外边距(margin) | |
边框 | 边框样式border-style:solid | dashed |dotted |none | 简写border : border-width || border-style || border-color | |
边框颜色border-color:颜色值; | |||
边框粗细border-width:n px;(n是数值) | |||
border-collapse:collapse; | 表示相邻边框合并在一起。 | ||
内边距 | padding:上 右 下 左; | 当盒子没有宽度或高度时 设置内边距不会影响盒子大小; | |
外边距 | margin:上 右 下 左; | ||
margin :{0 auto};表示块级盒子水平居中 | 1.盒子必须指定宽度; | ||
以下是css3新增属性 | |||
圆角边框 | border-radius:数值;(4个角设置一样) border-radius:左上角 右上角 右下角 左下角;(4个角分别设置写法) | 1.正方形盒子数值为50%,呈现出一个圆形盒子; 2.矩形盒子数值一般为高度的一半; | |
盒子阴影 | box-shadow:水平阴影 垂直阴影 模糊距离(虚实) 阴影尺寸(影子大小) 阴影颜色 内/外阴影; | 1.水平阴影 垂直阴影必须写 允许为负值; 2.颜色通常用rgba(); | |
css布局 | 标准流 | 块级元素 | div p 等 独占一行 可以设置宽高 |
行内元素 | span i 等 一行显示多个 直到父盒子宽度不够时自动换行 不能设置宽高; | ||
浮动 | float:left 、right 、none(一般要给浮动的盒子添加一个标准流父盒子) | 1.让盒子从普通流中浮起来,主要作用让多个块级盒子一行显示。 2.加了浮动的盒子是不占位置的,它原来的位置漏给了标准流的盒子。 3.特别注意:浮动元素会改变display属性, 类似转换为了行内块,但是元素之间没有空白缝隙 | |
定位 | position:fixed / relative /absolute/static | 1.定位的盒子可以漂浮在标准流和浮动的盒子上; | |
欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/) | 黑马程序员IT技术论坛 X3.2 |