CSS-基本语法/引用/文本设置/选择器/css3属性
CSS-基本语法/引用/文本设置
css基本语法及页面引用
css基本语法
css的定义方法是：
选择器 { 属性:值; 属性:值; 属性:值;}
选择器是将样式和页面元素关联起来的名称，属性是希望设置的样式属性每个属性有一个或多个值。代码示例：
div{ width:100px; height:100px; color:red }
css页面引入方法：
1、外联式：通过link标签，链接到外部样式表到页面中。
<link rel="stylesheet" type="text/css" href="css/main.css">
2、嵌入式：通过style标签，在网页上创建嵌入的样式表。
<style type="text/css">
div{ width:100px; height:100px; color:red }
......
</style>
3、内联式：通过标签的style属性，在标签上直接写样式。
<div style="width:100px; height:100px; color:red ">......</div>
4.导入式： 将一个独立的.css文件引入HTML文件中，导入式使用CSS规则引入外部CSS文件，<style>标记也是写在<head>标记中。
<style type="text/css"> @import"mystyle.css"; 此处要注意.css文件的路径 </style>
css文本设置
常用的应用文本的css样式：
-
color 设置文字的颜色，如： color:red;
-
font-size 设置文字的大小，如：font-size:12px;
-
font-family 设置文字的字体，如：font-family:'微软雅黑';
-
font-style 设置字体是否倾斜，如：font-style:'normal'; 设置不倾斜，font-style:'italic';设置文字倾斜
-
font-weight 设置文字是否加粗，如：font-weight:bold; 设置加粗 font-weight:normal 设置不加粗
-
font 同时设置文字的几个属性，写的顺序有兼容问题，建议按照如下顺序写： font：是否加粗 字号/行高 字体；如： font:normal 12px/36px '微软雅黑';
-
line-height 设置文字的行高，如：line-height:24px;
-
text-decoration 设置文字的下划线，如：text-decoration:none; 将文字下划线去掉
-
text-indent 设置文字首行缩进，如：text-indent:24px; 设置文字首行缩进24px
-
text-align 设置文字水平对齐方式，如text-align:center 设置文字水平居中
css颜色表示法
css颜色值主要有三种表示方法：
1、颜色名表示，比如：red 红色，gold 金色
2、rgb表示，比如：rgb(255,0,0)表示红色
3、16进制数值表示，比如：#ff0000 表示红色，这种可以简写成 #f00
css选择器
常用的选择器有如下几种：
1、标签选择器
标签选择器，此种选择器影响范围大，建议尽量应用在层级选择器中。
举例：
*{margin:0;padding:0} <!-- 应用于所有的标签 -->
div{color:red} <!-- 应用于div标签 -->
<div>....</div> <!-- 这里是使用，对应以上两条样式 -->
<div class="box">....</div> <!-- 对应以上两条样式 -->
2、id选择器
通过id名来选择元素，元素的id名称不能重复，所以一个样式设置项只能对应于页面上一个元素，不能复用，id名一般给程序使用，所以不推荐使用id作为选择器。
举例：
#box{color:red}
<div id="box">....</div> <!-- 对应以上一条样式，其它元素不允许应用此样式 -->
3、类选择器
通过类名来选择元素，一个类可应用于多个元素，一个元素上也可以使用多个类，应用灵活，可复用，是css中应用最多的一种选择器。
举例：
.red{color:red}
.big{font-size:20px}
.mt10{margin-top:10px}
<div class="red">....</div>
<h1 class="red big mt10">....</h1>
<p class="red mt10">....</p>
4、层级选择器
主要应用在选择父元素下的子元素，或者子元素下面的子元素，可与标签元素结合使用，减少命名，同时也可以通过层级，防止命名冲突。
举例：
.box span{color:red}
.box .red{color:pink}
.red{color:red}
<div class="box">
<span>....</span>
<a href="#" class="red">....</a>
</div>
<h3 class="red">....</h3>
5、组选择器
多个选择器，如果有同样的样式设置，可以使用组选择器。
举例：
E,F 多元素选择器，同时匹配所有E元素或F元素，E和F之间用逗号分隔 :div,p { color:#f00; }
E F 后代元素选择器，匹配所有属于E元素后代的F元素，E和F之间用空格分隔 :li a { font-weight:bold;｝
E > F 子元素选择器，匹配所有E元素的子元素F :div > p { color:#f00; }
E + F 毗邻元素选择器，匹配所有紧随E元素之后的同级元素F :div + p { color:#f00; }
E ~ F 普通兄弟选择器（以破折号分隔） :.div1 ~ p{font-size: 30px; }
.box1,.box2,.box3{width:100px;height:100px}
.box1{background:red}
.box2{background:pink}
.box2{background:gold}
<div class="box1">....</div>
<div class="box2">....</div>
<div class="box3">....</div>
6、伪类及伪元素选择器：专用于控制链接的显示效果
常用的伪类选择器有hover，表示鼠标悬浮在元素上时的状态，伪元素选择器有before和after,它们可以通过样式在元素中插入内容。
a:link（没有接触过的链接）,用于定义了链接的常规状态。
a:hover（鼠标放在链接上的状态）,用于产生视觉效果。
a:visited（访问过的链接）,用于阅读文章，能清楚的判断已经访问过的链接。
a:active（在链接上按下鼠标时的状态）,用于表现鼠标按下时的链接状态。
伪类选择器 : 伪类指的是标签的不同状态:
a ==> 点过状态 没有点过的状态 鼠标悬浮状态 激活状态
a:link {color: #FF0000} /* 未访问的链接 */
a:visited {color: #00FF00} /* 已访问的链接 */
a:hover {color: #FF00FF} /* 鼠标移动到链接上 */
a:active {color: #0000FF} /* 选定的链接 */ 格式: 标签:伪类名称{ css代码; }
伪类选择器
link:
hover:
.out:hover .box1{ <!-- 悬浮out 修改 box1,被操作的标签（box
）一定是悬浮标签（out）的子元素 --> }
visited:
active:
before:
after:用于 内联 标签之间增加个换行（块标签）
before after伪类
:before p:before 在每个<p>元素之前插入内容
:after p:after 在每个<p>元素之后插入内容
例：p:before{content:"hello";color:red;display: block;}
属性选择器
<style>
div[egon]{ <!-- 标签是 div 属性是 egon的 -->
color:red;
}
[egon]{ <!-- *属性是 egon的 -->
color:red;
}
div[egon="123"]{ <!-- *精确定位 -->
color:red;
}
div[egon^="123"]{ <!-- 123开头的 -->
color:red;
}
div[egon$="123"]{ <!-- 123结尾的 -->
color:red;
}
div[egon*="123"]{ <!-- 包含123 -->
color:red;
}
div[egon~="123"]{ <!-- 多条属性的时候，选择其中一条属性 -->
color:red;
}
</style>
选择器的优先级：
color:red!important;(最高) 内嵌:1000 id:100 class:10 element(标签):1
.c1 .c2 .c3{ <!-- 级别是30 -->}
.c1 p{ <!-- 级别是11 --> }
选择器的继承：
盒子套盒子，外面盒子的属性会被里面的盒子继承
属性：
color;
background-color;
fount-size;
border;
text-decoration:none 下划线吧。。。
字体：
color:RBGA(前三个是颜色，A是透明度)
text-align; left center right justify(两端对齐)
vertical-align;baseline - top - middle - (-)10px
background-color;
background-image;
background-repeat; repeat-x - repeat-y - no-repeat(填充规则)
background-position:100px 200px; 左-100， 上-200
center center
(修改图片位置)
background:url("图片地址") no-repeat center center;
border:1px 线形 red;
border-style:线型
border-color:颜色
border-width:宽度
list
list-style:none(加元素)
margine
width;
height;
border-radius:20 (圆润度)
placeholder:text框中的默认值
cursor:设置鼠标指针形状-例子中是用在 botton 中的
pointer
outline:搜索框外面的线（选中的时候才有）
CSS3新增选择器
1、E:nth-child(n)：匹配元素类型为E且是父元素的第n个子元素
<style type="text/css">
.list div:nth-child(2){
background-color:red;
}
</style>
......
<div class="list">
<h2>1</h2>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
<!-- 第2个子元素div匹配 -->
2、E:nth-last-child(n)：匹配元素类型为E且是父元素的倒数第n个子元素（与上一项顺序相反）
3、E:first-child：匹配元素类型为E且是父元素的第一个子元素
4、E:last-child：匹配元素类型为E且是父元素的最后一个子元素
5、E:only-child：匹配元素类型为E且是父元素中唯一的子元素
6、E:nth-of-type(n)：匹配父元素的第n个类型为E的子元素
7、E:nth-last-of-type(n)：匹配父元素的倒数第n个类型为E的子元素（与上一项顺序相反）
8、E:first-of-type：匹配父元素的第一个类型为E的子元素
9、E:last-of-type：匹配父元素的最后一个类型为E的子元素
10、E:only-of-type：匹配父元素中唯一子元素是E的子元素
11、E:empty 选择一个空的元素
12、E:enabled 可用的表单控件
13、E:disabled 失效的表单控件
14、E:checked 选中的checkbox
15、E:not(s) 不包含某元素
<style type="text/css">
.list div:not(:nth-child(2)){
background-color:red;
}
</style>
......
<div class="list">
<h2>1</h2>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
<!-- 第 3、4、5 子元素div匹配 -->
其他说明
li:nth-child(2){ 修改第2个li
}
li:nth-child(2n){ 修改偶数
}
li:nth-child(2n+1){ 修改奇数的
}
.box div:nth-child(3){ 找到第三个子元素，如果是div就运行
}
.box div:nth-of-type(3){ 找到子元素中的第三个div元素
}
CSS3圆角、阴影、rgba
CSS3圆角
设置某一个角的圆角，比如设置左上角的圆角：
border-top-left-radius:30px 60px;
同时分别设置四个角： border-radius:30px 60px 120px 150px;
设置四个圆角相同：
border-radius:50%;
CSS3阴影
box-shadow：h-shadow v-shadow blur spread color inset;
分别设置阴影：水平偏移 垂直偏移 羽化大小 扩展大小 颜色 是否内阴影
<style type="text/css">
.box{
width:200px;
height:50px;
background-color:gold;
/* box-shadow:10px 10px 5px 2px pink inset; */
box-shadow:10px 10px 5px 2px pink;
}
</style>
......
<div class="box"></div>
<!-- 给盒子加上了粉红色的阴影 -->
rgba（新的颜色值表示法）
1、盒子透明度表示法：opacity:0.1;filter:alpha(opacity=10)（兼容IE）;
2、rgba(0,0,0,0.1) 前三个数值表示颜色，第四个数值表示颜色的透明度
- css3学习之旅-css的基本语法（1）
- 纯CSS画的基本图形（矩形、圆形、三角形、多边形、爱心、八卦等）,里面很多涉及到CSS3的一些属性。
- CSS画的基本图形（矩形、圆形、三角形、多边形、爱心、八卦等）,里面很多涉及到CSS3的一些属性
- CSS3-基本选择器语法（实战）
- css3学习之旅-css的基本语法（1）
- css中图片于文本的基线对齐与vertical-align属性设置
- css3设置文本阴影的属性
- 第六步：页面内的基本文本的样式(css)设置
- css 背景设置和文本外观属性
- css 设置相关的文本属性1——缩进和对齐
- CSS语法手册（二）文本属性
- css3选择器--基本选择器，层次选择器，属性选择器
- CSS语法手册（二）文本属性
- CSS语法手册（三）文本填充，边框，边界和位置属性（一）
- 纯CSS画的基本图形（矩形、圆形、三角形、多边形、爱心、八卦等）,里面很多涉及到CSS3的一些属性。
- CSS语法手册（四）文本填充，边框，边界和位置属性（二）
- 用CSS设置文本的属性
- Css3之高级-1 Css复杂选择器（兄弟选择器 、属性选择器、伪类选择器、伪元素选择器）
- CSS语法手册（四）文本填充，边框，边界和位置属性（二）
- CSS语法手册（四）文本填充，边框，边界和位置属性（二）