css-基础

CSS 样式 Cascading Style Sheets

CSS 的引入的三种方式

在标签的内部直接使用（不推荐使用）

1、行内式 style="font-size: 30px;color: yellow;"

2、内嵌样式 这个style标签写建议写到head里面，需要展现到用户面前

<style>

/*选择器 */

span{ font-size: 30px; color: red;

/*字体的样式*/

font-family: 宋体; }

</style>

这个 (.css)文件是在外部定义好的文件直接建立css文件就可以了

<!--3、链接式 rel:当前的文档和引入的文档的关系

href:是指引入文档的关系-->

<link rel="stylesheet" href="css/css.css"

CSS 中三种引入方式遵循的就近原则 ：

不相同的样式会进行样式的叠加，相同的样式会采用就近的原则。

样式跟随距离自己近的风格

id选择器

id:(唯一性)

id命名：数字、字母、下划线、中划线（-），不能用数字开头

#p_1{ font-size: 30px; color: yellowgreen; }

class选择器

.p_2{ font-weight: bold; color: yellow; }

标签选择器

p{color: red; }

三种选择器的优先级：

id 选择器>class 选择器>标签选择器

权重 100 10 1

后代选择器 只要包含该标签对象即可

div span{

font-size: 27px;

font-family: 宋体;

color: red;}

子选择器 直系子标签

div>span{ color: red; }

兄弟选择器 只会改变下面相邻的元素对象

#p_1+p{ color: green;}

兄弟选择器 后面所有的兄弟对象都会改变

#p_1~p{

color: red;

font-size: 30px; }

伪类选择器

a:hover{ color: red;}

字体：（font）

/*字体的颜色*/ color: gray;

/*字体的大小*/ font-size: 12px;

/*字体的加粗*/ font-weight: bold;

/*字体的风格*/ font-family: 宋体;

/*字体倾斜*/ font-style: italic;

文本（text）

/*下划线展示*/ text-decoration: underline;

/*去除下划线*/ text-decoration: none;

/*文本居中*/ text-align: center;

border 属性有三个修饰属性

border-color:red;

border-top-color:blue;

border-width: 1px;

border-left-width: 3px;

border-style: solid

border-bottom-style: solid；

可以使用border统一设置：

border: 1px solid red; border-right: 5px dotted blue;

行高 line-height: 40px;

、/*设置背景图片*/

background-image:

url("http://img30.360buyimg.com/da/jfs/t22399/154/7

65213112/96035/f94f9605/5b17512dN2de9d722.jpg");

/*设置背景图片不重复*/

background-repeat: no-repeat;

/*调整背景图片的位置 X Y*/

background-position: center;

/*调整背景图片的大小 宽 高 */

/*background-size: 300px 500px;*/

/*背景颜色 red #f0000 rgb(255,0,0)

rgba(255,0,0,.5){包含透明度} */

background-color: rgba(255,0,0,.5);

行元素和块元素

行内元素：（多个标签位于同一行）

span font 小标签 img a 等

块元素：（标签可以自动换行的元素是块元素）

div h1-h6 ul p 等

其他样式

/*调整透明度的属性 0-1*/

opacity: 0.4;

/*超出隐藏 hidden*/

overflow: hidden;

overflow:auto 滑动条

/*行内元素转块级元素 inline block none(隐藏)*/

display: block;

绝对定位:

absolute :之前的位置不存在了 布局上很少使用，影响布局 调试和图片调整

相对定位：

relative: 之前的位置还在 自身为参照物 布局上使用

margin 外间距

固定定位：

fixed ：始终是基于浏览器的左上角定位 适合

做广告

默认定位：

static ：初始的定位的操作

CSS3 中新增选择器

/*获得class名称是div1下面的第一个子元素*/

.div1>p:first-child{ color: red; }

div1>p:last-child{ color: green; }

/*获得具体的某一个子元素*/

.div1>p:nth-child(2){ background-color: palegreen;}

.div1>p:nth-child(even){ bacground-color: red; }

div1>p:nth-child(odd){background-color: green; }

/*获得空的元素对象*/

.div1>p:empty{ height: 50px;background-color: darkmagenta;}

/*获得焦点执行的样式*/

input:focus{ width: 300px; height:100px; }

input:checked{ width: 20px;height: 20px; }

伪对象选择器是在指定的对象之前（或者之后）插入内容

.div1:before{

/*content: "我们的祖国是花园";*/

content: url(img/1.jpg);}

.div1:after{}

 

/*属性选择器*/

input[type='text']{ width: 300px; height: 40px; }

/*属性 ^用fom开头的对象 $*/

input[name^='fom']{width: 300px; height: 40px; }

选择器的种类总结：

【1】基础选择器

* id class 标签

【2】关系选择器

> + ~

【3】伪类选择器

hover

【4】伪对象选择器

before \after

【5】属性选择器

input[type='text']

CSS3 中常用样式

/*倒圆角指令*/

border-radius: 100px;

/* 左上右下 右上左下 */

border-radius:10px 60px;

border-radius:10px 20px 30px 40px;

/*旋转角度*/

transform: rotate(45deg);

/*放大的倍数*/

transform: scale(1.3);

/* X:水平的位移 Y ：垂直的位移 负数：上*/

transform: translate(0px,-5px);

/*2D角度的旋转 X Y*/

transform: skew(40deg,45deg);

/*阴影 水平方向的偏移 垂直方向的偏移 模糊度 阴影的颜色*/

box-shadow: 0px 0px 70px #D5093C;

CSS3 中的动画标签

@-ms-keyframes name{

from{}

to{} }

@-ms-keyframes name{

0%{}

50%{}

100%{}