Day036 网页编程---CSS样式

网页编程---CSS样式

1、CSS 入门

A、为什么学习 CSS（CSS 的作用） 【1】HTML 虽然可以在一定程度上修饰页面，但是页面的 整体还是不够美观。 【2】HTML 进行网页的书写重复的代码比较多，后期的维 护性不好。 B、什么是 CSS（CSS 的概念） 英文全称：Cascading Style Sheets 层叠样式表（级联样式表）

2、CSS 的引入方式

CSS 的引入的三种方式 在标签的内部直接使用（不推荐使用）

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

CSS 中三种引入方式遵循的就近原则 ： 不相同的样式会进行样式的叠加，相同的样式会采用就近的原则。样式跟随距离自己近的风格

3、CSS 中的常用选择器 常用三种选择器 标签选择器 p{ color: red; } id选择器 id:(唯一性) id命名：数字、字母、下划线、中划线（-），不 能用数字开头 #p_1{ font-size: 30px; color: yellowgreen; } class选择器 .p_2{ font-weight: bold; color: yellow; } 三种选择器的优先级： id 选择器>class 选择器>标签选择器 权重 100 10 1

4、CSS 中其他选择器

后代选择器 只要包含该标签对象即可 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; }

5、CSS 中常用样式总结 1

字体：（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  border-color:red;  border-top-color:blue;  border-width  border-width: 1px;  border-left-width: 3px;  border-style  border-style: solid  border-bottom-style: solid；  可以使用border统一设置  border: 1px solid red; border-right: 5px dotted blue;

6、CSS 常用样式总结 2

行高 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);

7、CSS 中常用样式总结 3

行元素和块元素 行内元素：（多个标签位于同一行） span font 小标签 img a 等 块元素：（标签可以自动换行的元素是块元素） div h1-h6 ul p 等 其他样式 /调整透明度的属性 0-1/ opacity: 0.4; /超出隐藏 hidden/ overflow: hidden; /行内元素转块级元素 inline block none(隐藏)/ display: block;

8、CSS 中的定位

绝对定位: absolute :定位离开之后释放的之前的位置 基于外 层父级标签来说 相对定位： relative: 定位离开之后之前的位置没有释放 基于之 前的位置来说 固定定位： fixed ：始终是基于浏览器的左上角定位 适合 做广告

默认定位： static ：初始的定位的操作

9、盒模型

生活中的盒模型 盒子模型的介绍示意图 3 个属性都可以同时或者分别设置 4 个方向属性值  margin：1px，2px，3px，4px;(顺时针放向：上右下 左4个方向)  margin：1px，2px;  margin：1px;  margin：0px auto ;//块元素会自动居中 margin-left:1px;

10、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){ background-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{}

11、CSS3 中新增选择器 2

选择器学习 /属性选择器/ 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']

12、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%{} }