当前位置：网站首页>2022-07-10 第五小组瞒春学习笔记

2022-07-10 第五小组瞒春学习笔记

2022-08-02 14:21:00 【烫嘴的辛拉面】

今天进行了css的学习

知识点：

css选择器

1标签

2类

3id

4并列选择器 div,p{color:yellow;}

5 div里的p div p{color:yellow;}

6 直接子标签 div>p{color:yellow;}

7 选中紧跟着div的p div+p{color: blue;}

8属性选择器 []

<style>

[type]{height: 100px;}

</style>

</head>

<body>

9[type=text]{height: 100px;}

10[type~=t] 选中页面上所有的type属性，~包含单词的所有元素

11 伪类选择器

<style>

/* a标签的默认样式 */ link

a:link{color: red;}

/* 鼠标悬停 */ hover

a:hover{color: aliceblue;}

/* 元素被激活 */ active

a:active{color: antiquewhite;}

/* 点过的链接 */ visitive

a:visitive{color: aqua;}

</style>

</head>

<body>

</body>>

12 选中第几个对应的元素 li:nth-child(数字){color: aqua;} （3n,3）

13 隔行表格颜色 tr:nth-child(2n){}

鼠标悬停 tr:hover{}

14 ：checked{}

css层叠

如果样式冲突，离的近的生效样式不冲突，不层叠

类>标签>id

继承性：子标签继承父标签某些样式

权重：继承的样式权重为0 行内样式权重最高权重相同就近

！important 改变权重优先级无限大

css常用单位

1.px 像素，绝对单位

2.em 相对单位它会参考它的父级元素

3.rem 跟着页面走的浏览器

4.百分比相对于父级元素的比例

//runoob网站//

字体属性： div{font-size: 100px;} 字体大小

div{font-family: ;} 字体样式

line-height: 行高字体大小是行高的一般是垂直居中

font-weight: ;} 粗细

text-decoration: underline; 加下划线 none 去掉下划线

a :link{text-decoration: none;

color: #000;}

a:hover{text-decoration: underline; 鼠标悬停变色加线

color: aqua;}

div{

height: 100px;

width: 100px;

background-color: aqua;

}

background-image: url(img/123.png背景图片

repeat 图片显示方式 no-repeat 没有平铺

background: yellow; 背景颜色简写

p{letter-spacing: 5px;} 字母间距

lorem+tab 测试文本

img{width: 500px;}

img:hover{width 300px} 图片鼠标放上变小

div{}

列表显示类型

ul li{

list-style-type: squire 小方块 circle 空心圆;

lower-roman 罗马数字

}

位置

list-style-position:outside;

list-style-image:url() 图片

div{height: 200px;

width: 200px;

color: aqua;

边框线样式

border-style: ;}

border-width:5px 边框线宽度

border:red solid 1px 简写

border-bottom:1px yellow 分别设置下边线

border-radius:; 半径

table tr td{border: 1px black solid(线);

border-collapse: separate分隔符;}

border-collapse:collapse; 边框间距

table {

border-collapse: collapse;

border-spacing:0;

border-left: 1px solid 单线格

border-top: 1px solid black;}

tr{border-bottom: 1px solid black;}

td{border-right: 1px solid black;}

区块属性

div{height: 300px;

width: 300px;

background-color: #ffff00;

display: inline;(行级)

}

span{div{height: 300px;

width: 300px;

background-color: yellow;

display:block;}块级

none隐藏

display:inline-block;}内联块行级块

盒子模型

/* 盒子模型：width height 表示内容去的宽和高

margin 外边距，元素距离上一个元素的 margin: auto; 自动居中

padding:内边距，本元素内部空出的距离

border: 边框线的宽度; */

height: 300px;

width: 300px;

color: yellow;

padding-top: 10px;

margin-top: 10px;

border: 1px black;}

box-sizing: 300px; 设置盒子尺寸计算方式

定位

div1{position: absolute; 绝对定位 top: 2px;

参照物是已经定位的父级元素偏移

可以理解为漂浮起来，div2顶替位置

position: relative;相对定位

参照物是已经定位的父级元素偏移

但是占用原有位置，不漂浮

父相子绝

static 文档流（默认）

fixed 浮动

定在界面上

}

visibility: hidden;隐藏

relative 显示

溢出样式

overflow:hidden ;隐藏

scroll 滚动条

浮动

li{ list-style-type: none;

height: 30px;

width: ;

float: left;

backgroundmar-color: #fff; ul li 做导航

line-height: 15px;

margin-left: 20px;}

style="clear :both; " 清除浮动

路径

css引入

层叠继承优先级

定位盒子模型 v3.

掌握情况：掌握不熟练，理解大部分，感觉进行的太快了

晚上练习：表格排版

部分代码：

<title>Document</title>

</head>

<body>

<p>新用户注册</p>

</div>

<table>

<tr>

</tr>

<tr>

<input type="radio" name="gender" value="male"> 男

<input type="radio" name="gender" value="female"> 女

</td>

</tr>

<tr>

<td class="td_right"><input type="text" name="birthday" id="birthday">按格式yyyy-mm-dd</td>

</tr>

原网站

版权声明
本文为[烫嘴的辛拉面]所创，转载请带上原文链接，感谢
https://blog.csdn.net/weixin_49405762/article/details/125730206

当前位置：网站首页>2022-07-10 第五小组瞒春学习笔记

2022-07-10 第五小组瞒春学习笔记

边栏推荐

猜你喜欢

随机推荐

当前位置：网站首页>2022-07-10 第五小组 瞒春 学习笔记

2022-07-10 第五小组 瞒春 学习笔记

边栏推荐

猜你喜欢

随机推荐

当前位置：网站首页>2022-07-10 第五小组瞒春学习笔记

2022-07-10 第五小组瞒春学习笔记