2022-07-10 day03 第一小组 王鸣赫

CSS层叠样式表
网页美化
html相当于布料，上色
如何嵌入
样式如何显示html元素
样式通常是存储在样式表中
把样式表添加到HTML元素中

定义css样式的方式
1、行内样式 好不好？
如果当前的样式不需要复用，可以用行内样式
优先级
2、内页样式（嵌入样式）
（1）标签选择器
（2）类选择器：声明样式的时候需要用一个英文的.，选择样式通过class属 性，不需要写.
（3）id选择器：声明样式需要用一个#号，对应的元素的id要匹配
3、外部样式（推荐）

css选择器：
1、标签选择器*
2、类选择器*：一个标签元素是可以选择多个样式，样式名中间用空格隔开
3、id选择器
4、div,p：选中页面上所有的div和p元素
5、div p*：选中div里面的p，无论嵌套多少层，都可以找到
6、div>p*：选中div里面的直接字标签p
7、div+p：选中紧跟着div的p
8、[type]：选中页面上所有带有type属性的标签
9、[type=text]：选中页面上所有带有type=text属性的标签
10、[type~=t]：选中页面上type属性包含单词的所有元素
11、伪类选择器*：:link :hover :active :visited
12、nth-child()*：选中第几个对应的元素
13、:checked：选中所有被选中的元素

css层叠样式表
层叠性：
1.如果样式冲突，遵循就是就近原则，哪个样式离结构近，就执行哪个样式
2.如果样式不冲突，就不层叠

继承性：字标签会继承父标签的某些样式。文本颜色，字号，背景颜色...

优先级：类 > 标签 > id
权重：
1.继承的样式权重为最低0
2.行内样式权重最高100
3.如果权重相同，就近原则
4.!important无限大
css常用的单位：
1、px像素：绝对单位，一个像素代表一个点。如100px*100px的正方形，宽度100个点，高度100个点。
2、em是相对单位。它会参考它的父级元素。字体，父级元素的字体是16px，要设置元素的字体大小为2em，当前元素的字体大小就是32px。
3、rem相对单位。由页面决定。当我们改变了浏览器的字号设置，页面的字号也会随之发生变化。应用在老人版。
4、百分比：相对于父级元素的比例。

 

*{

    margin: 0px;

    padding: 0px;

    box-sizing: border-box;

}

/* 设置背景图片 */

body{

    background: url(../nnew/images/register_bg.png) no-repeat center;

    padding-top: 70px;

}

/* 设置layout */

.rg_layout{

   

    width: 900px;

    height: 500px;

    border: 8px solid #eeee;

    background-color: white;

    /* 让div水平居中 */

    margin: auto;

}

/* 左组件 */

.rg_left{

    float: left;

    margin: 15px;

}

/* 第一个元素 */

.rg_left>p:first-child{

    color: yellow;

    font-size: 20px;

}

.rg_left>p:last-child{

    color: rgb(7, 8, 9);

    font-size: 20px;

}

.rg_center{

    float: left;

}

.rg_right{

    float: right;

    margin: 15px;

}

.rg_right>p:first-child{

    font-size: 15px;

}

.rg_right>p a{

    color: red;

}

.td_left{

    width: 100px;

    text-align: right;

    height: 45px;

}

.td_right{

    padding-left: 50px;

}

#username,#password,#email,#name,#tel,#birthday,#checkcode{

    width: 251px;

    height: 32px;

    border: 1px solid #a6a6a6;

    /* 圆角边框 */

    border-radius: 5px;

    padding-left: 10px;

}

#checkcode{

    width: 110px;

}

#img_check{

    height: 32px;

    vertical-align: middle;

}

#btn_sub{

    height: 50px;

    width: 150px;

    background-color: #ffd02f;

    border: 1px solid #ffd02f;

}

.rg_right>p a:hover{

    text-decoration: none;

    color: blue;

   

}

.rg_right>p a:link{

    text-decoration: none; 

}