``` 一, CSS 概念
1, 需求:
设置网页标签的样式: 宽 ``, 高, 背景颜色, 位置......
用于布局或美化网页
2, 概念:
css 层叠样式表
英文全称: cascading style sheets
浏览器解释语言: 让浏览器去执行解释的语言
html css
大小写不敏感: 小写
w3c 组织
3,css 语法:
选择器 1{
属性名 1: 属性值 1;
属性名 2: 属性值 2;
...
...
}
选择器 2{
属性名 1: 属性值 1:
属性名 2: 属性值 2;
...
...
}
选择器: 我要找的 html 标签 (元素)
属性 1: 属性值 1:width:20px
不针对行内样式
4,css 注释
html 注释
<!-- 注释内容 -->
css 注释
- /* 注释内容 */
- // 也可以
sublime 快捷键: ctrl+/
5, 补充
- dhtml=html(指定元素)+css(元素大小位置颜色)+javascript(操纵网页元素)
- <div > 内容 </div > 独占一行, 背景颜色一行
- <span > 内容 </span > 不独占一行, 背景颜色跟随内容
- <SPAN > 是行级容器标签, 不可以包含图片, 标题, 段落等, 只能包含文字内容
- (他们存在就是为了样式)
二, css 样式分类
1, 行内样式
只作用于行内
<p style="属性名: 属性值; 属性名: 属性值;"> 内容 </p>
2, 内嵌样式
作用于本页也可以链接到 html 中
- <HEAD>
- <STYLE type="text/css">
- P { /* 设置样式: 字体和背景色 */
- font-family: System;
- font-size: 18px;
- color: #3333CC;
- }
- H2 {
- background-color: #CCFF33;
- text-align: center;
- }
- </STYLE>
- </HEAD>
- <BODY>
- <H2.> 品种特征方面:</.H2>
- <P> 1, 蛋鱼: 蛋鱼........</P>
- <P> 2, 龙睛: 龙睛.........</P>
- <P> 3, 高头: 高头.....</P>
3, 外部样式
作用于多个页面
引入内嵌样式 css 文件
- <head>
- link
- <link rel="stylesheet" type="text/css" href=".css 文件">
- </head>
三, 选择器
1,html 选择器
<.style type="txet/css">
p{属性名: 属性值;
属性名: 属性值;}
<.style/>
2,class 类选择器
- <.p class="命名"> 内容 </p>
- <.STYLE type="text/css">
. 命名 {
属性名: 属性值;
属性名: 属性值;
}
3,ID 选择器
- <.p id="命名"> 内容 </p>
- <.STYLE type="text/css">
- #命名 {
属性名: 属性值;
属性名: 属性值;
}
4, 子元素选择器 (父子关系)
.div> .input> 选择器 1> 选择器 2{
- }
- .border:5px dotted red;
.dotted: 虚线
.solid: 实线
5, 后代选择器 (后代关系)
.div .input{
}
6, 组合选择器
选择器, 选择器 {
属性名: 属性值;
属性名: 属性值;
}
7, 样式混用
行内样式
内嵌样式
外部样式
就近原则
来源: http://www.bubuko.com/infodetail-2607528.html