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