CSS个人笔记

最新推荐文章于 2024-09-21 23:59:03 发布

dzx738

最新推荐文章于 2024-09-21 23:59:03 发布

阅读量159

点赞数

分类专栏： css 文章标签： css

本文链接：https://blog.csdn.net/dzx738/article/details/82705277

版权

css 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

1.css选择器运用

标记选择器：对一个所需要的内容用字母标记起来，对内容进行设置调用p即可

类别选择器：比起标记选择器，它可以重复使用，一般使用clss调用

id选择器：id是唯一的，一次性用品；

例：id选择器

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Css之ID选择器</title>
<style type="text/css">
#p1{
color: red;
font-size: 20px;
}
#p2{
color: blue;
font-size: 20px;
}
#p3{
color: yellow;
font-size: 20px;
}
</style>
</head>
<body>
<p id="p1">总会有那么一天,我会强大!</p>
<p id="p2">生活的希望都是自己给的!</p>
<p id="p3">在你碌碌无为时,没有谁会注意到你!</p> 
</body>
</html>

2.在HTML中需要导入样式，我们可以使用行内样式，镶嵌样式等进行导入，同时，这些样式的优先级也是不一样的；

3.复合选择器：

交集选择器，并集选择器，子代选择器，后代选择器；

例：后代选择器

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>后代选择器</title>
<style type="text/css">
span{
color:blue;
}/*给含span指定变颜色*/
p span{
color:red;
}/*给含p的后代span变颜色(即既有p又含有span)*/
</style>
</head>
<body>
<div>一代<p>二代<span>三代</span></p></div><br/>
<span>一代又一代</span><br/>
<span>一代代又一代代</span> <br/>
</body>
</html>

4.css继承特性

例：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS继承特性</title>
<style type="text/css">
.c{
color: red;
}/*继承特性一层一层的主目录下的子目录内容也继承变化*/
</style>
</head>
<body>
<h1>胡歌影视</h1>
<ul>
<li class="c">仙剑奇侠传三
<ul>
<li>导演</li>
<li>男一号</li>
<li>女一号</li>
</ul>
</li>
<li>琅琊榜</li>
<li>天外飞仙</li>
</ul> 
</body>
</html>

5.css设置图片边框图片大小的缩放图文混排图片与文字对齐方式（直接代码主要代码备注作用）

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>设置图片边框</title>
<style>
.i1{
border-width:1px;
border-color:red;
border-style:solid;
}/*设置线框宽度颜色样式实线*/
.i2{
border: 2px red dashed;
}/*设置线框宽度颜色样式虚线此种为简写*/
.i3{
border: 2px red dotted;
}/*设置线框宽度颜色样式点化线此种为简写*/
.i4{
border-top:5px red solid;
border-right:2px red dashed;
border-bottom:2px yellow dotted;
border-left:2px blue dashed;
}/*设置边框顶部红色实线右边红色虚线下面黄色点化线左边蓝色虚线*/

</style>
</head>
<body>
<h1>实线边框</h1>
<img src="../java2.jpg" class="i1"/>
<h1>虚线边框</h1>
<img src="../java2.jpg" class="i2"/>
<h1>点化线边框</h1>
<img src="../java2.jpg" class="i3"/>
<h1>给不同边框设置样式</h1>
<img src="../java2.jpg" class="i4"/>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>设置图片大小及缩放</title>
</head>
<body>
<div style="border:3px red solid">
<h1>图片大小</h1>
<img src="../java.jpg" style="width: 160px; height:150px"/>
</div>
<div style="border:3px red solid">
<h1>图片缩放</h1>
<img src="../java.jpg" style="width: 20%;"/>
</div>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>图文混排</title>
<style type="text/css">
img{
width: 150px;
height: 180px;
float: left;
margin: 5px;
}/*设置图片大小文字环绕向左文字与图片距离*/
</style>
</head>
<body>
<img src="../java.jpg">
<p>Java之父——詹姆斯·高斯林出生于加拿大，是一位计算机编程天才。在卡内基·梅隆大学攻读计算机博士学位时，他编写了多处理器版本的Unix操作系统。</p>
<p>1991年，在Sun公司工作期间，高斯林和一群技术人员创建了一个名为Oak的项目，旨在开发运行于虚拟机的编程语言，同时允许程序在电视机机顶盒等多平台上运行。后来，这项工作就演变为Java。随着互联网的普及，尤其是网景开发的网页浏览器的面世，Java成为全球最流行的开发语言。因此被人称作Java之父。</p>
<p>高斯林一直对oracle公司抱有不满。这位工程师在离开甲骨文时写到，“我所说的都关乎细节与诚实，但吐露真相只会带来更多的坏处。”并称，“在Sun与oracle的并购会议上，到处是有关Sun和谷歌专利的争吵。oracle律师的眼睛闪闪发光。”
他表示，在收购Sun的早期阶段，oracle就表示出要同谷歌展开法律交锋的意愿。他本人也曾批评Android市场上的碎片化现象太过严重，足以影响软件开发者的工作。</p>

</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>设置文字与图片对齐方式</title>
<style type="text/css">
p{
border: 1px red solid;
}
</style>
</head>
<body>
<p>竖直对齐:<img src="../red.jpg" style="vertical-align: baseline;"/> 方式:<img src="../blue.jpg"style="vertical-align: baseline;""/>baseline</p>
<p>竖直对齐:<img src="../red.jpg" style="vertical-align: top;"/> 方式:<img src="../blue.jpg" style="vertical-align: top;"/>top</p>
<p>竖直对齐:<img src="../red.jpg" style="vertical-align: middle;"/> 方式:<img src="../blue.jpg"style="vertical-align: middle;"/>middle</p>
<p>竖直对齐:<img src="../red.jpg" style="vertical-align: bottom;"/> 方式:<img src="../blue.jpg"style="vertical-align: bottom;"/>bottom</p>
<p>竖直对齐:<img src="../red.jpg" style="vertical-align: text-bottom;"/> 方式:<img src="../blue.jpg" style="vertical-align: text-bottom;"/>text-bottom</p>
<p>竖直对齐:<img src="../red.jpg" style="vertical-align: text-top;"/> 方式:<img src="../blue.jpg" style="vertical-align: text-top;"/>text-top</p>
<p>竖直对齐:<img src="../red.jpg" style="vertical-align: sub;"/> 方式:<img src="../blue.jpg" style="vertical-align: sub;"/>sub</p>
<p>竖直对齐:<img src="../red.jpg" style="vertical-align: super;"/> 方式:<img src="../blue.jpg" style="vertical-align: super;"/>super</p>
<p>竖直对齐:<img src="../red.jpg" style="vertical-align: 20px;"/> 方式:<img src="../blue.jpg" style="vertical-align: 20px;"/>20px</p>
<p>竖直对齐:<img src="../red.jpg" style="vertical-align: -20px;"/> 方式:<img src="../blue.jpg" style="vertical-align: -20px;"/>-20px</p>
</body>
</html>

6.css盒模型：可想象为打哈子里面有一个小盒子，然后我们可以对他们之间的间距

border-width 设置边框粗细
border-color 设置边框颜色
border-style 设置边框样式
padding 设置内边距
magin 设置外边距

例：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>外边距</title>
<style type="text/css">
#outerBox1{
border-width:5px;
border-color:red;
border-style:solid;
padding:40px;
margin:10px;
}
#outerBox2{
border:thick blue dashed;
padding-top:20px;
padding-right:10px;
padding-bottom:5px;
padding-left:2px;

margin-top:20px;
margin-right:10px;
margin-bottom:5px;
margin-left:2px;
}
#outerBox3{
border-top:thick blue dashed;
border-right:2px red solid;
border-bottom:thin yellow dotted;
border-left:2px red solid;
padding: 20px 10px 5px 2px;

margin: 20px 10px 5px 2px;
} 
</style>
</head>
<body>
<div id="outerBox1">内容一</div>
<div id="outerBox2">内容二</div>
<div id="outerBox3">内容三</div>
</body>
</html>

7.盒子悬浮设置

left 盒子左悬浮
right 盒子右悬浮
clear-left 不允许左悬浮
clear-right 不允许右悬浮
clear-both 不允许有悬浮

例：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>使用clear清除浮动的影响 both</title>
<style type="text/css">
.parent{
padding:5px;
background-color:yellow;
border: 2px solid red;
}
.d1{
float:left; /*左浮动*/
margin:5px;
height:100px;
background-color:green;
border: 2px solid green;
}
.d2{
float:right; /*右浮动*/
margin:5px;
height:50px;
background-color:blue;
border: 2px solid blue;
}
p{
clear:both;/*不允许两边边有悬浮 */
margin:5px;
background-color:purple;
border: 2px solid purple;
}
</style>
</head>
<body>
<div class="parent">
<div class="d1">盒子A</div>
<div class="d2">盒子B</div>
<p>CSS是一种定义样式结构如字体、颜色、位置等的语言，被qrfsjgldj;lgme;fdmhjghm;我瓦房店市拉开给你空间给你看发给你的离开那个的技能高考;给你新来的更困难多凉快干嘛哪里gjwkgtlskgwekgh我江东父老客户经理看见林俊杰哦32斤哦用于描述网页上的信息格式化和现实的方式。CSS样式可以直接存储于HTML网页或者单独的样式单文件。无论哪一种方式，样式单包含将样式应用到指定类型的元素的规则。外部使用时，样式单规则被放置在一个带有文件扩展名_css的外部样式单文档中。</p>
</div>
</body>
</html>

8.表格样式设置

border：设置表格边框
border-collapse：设置边框分离（默认属性）
border-collapse：设置边框合并
padding：设置单元格里面的内容和边框之间的距离
此外，还可以对表格进行隔行换色，使用单偶数形式，也可以对各行进行样式设置想要的样式，也可以设置一些其他效果

例：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>设置鼠标经过时行变色效果</title>
<style type="text/css">
.t{
border: 2px gray solid; /*设置表格边框*/
border-spacing: 0px; /*设置表格单元格之间的间距*/
border-collapse:collapse; /*合并单元格两根线变为重合一根不仅仅变成紧靠的两根*/
width:500px;
table-layout:fixed; /*表格固定宽度*/
}
.t caption{
font-size:20px; /*设置字体大小*/
}
.t tr{
background-color:#ccc; /*给表格加一个背景颜色*/
}
.t td{
border: 2px gray solid;
padding:5px; /*设置表格边框与内容的间距*/
}
.t th{
border: 2px gray solid;
padding:5px; /*设置表格边框与内容的间距*/
}
tbody tr.even{
background-color:#AAA; /*给偶数行换色 even代表偶数*/
}
th+td{
text-align:center; /*调整某一列居中*/
}
th+td+td+td{
text-align:center;
background-color:red;
}
tbody tr:hover{
background-color:aqua; /*鼠标移动到行时整行变色*/
}
</style>
</head>
<body>
<table class="t">
       <caption>学生信息</caption>
       <thead>
           <tr>
               <th>序号</th><th>学号</th><th>姓名</th><th style="width:50px;">性别</th><th>出生日期</th>
           </tr>
       </thead>
       <tbody>
           <tr>
               <th>1</th><td>001</td><td>魏安复</td><td>男</td><td>2012-12-12</td>
           </tr>
           <tr class="even">
               <th>2</th><td>002</td><td>杜子腾</td><td>女</td><td>2011-11-11</td>
           </tr>
           <tr>
               <th>3</th><td>003</td><td>史珍湘</td><td>女</td><td>2010-10-10</td>
           </tr>
           <tr class="even">
               <th>4</th><td>004</td><td>梅读</td><td>女</td><td>2009-10-10</td>
           </tr>
           <tr>
               <th>5</th><td>005</td><td>赖月金</td><td>男</td><td>2008-01-01</td>
           </tr>
       </tbody>
       <tfoot>
           <tr>
               <th>总计</th>
               <th colspan="4">5条数据</th>
           </tr>
       </tfoot>
</table>
</body>
</html>

9.css中的布局：对网页进行布局，一般网页都分为好几个部分，分别用来放内容，主次之分，很多网页布局都如此

例：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>绝对定位法</title>
<style type="text/css">
body{
text-align:center; /*内容居中*/
}
#head,#container,#content,#side,#foot{ /*加个边框*/
margin: 20px auto 20px auto;
padding:20px 0px 20px 0px;
border: 1px solid red;
}
#head,#container,#foot{
width:900px;
}
#container{
border:0px; /*布局中间内容大边框*/
position:relative;
height:250px;
}
#content{
position:absolute;
width:700px;
height:200px;
}
#side{
margin-left:750px;
height:150px;
}
</style>
</head>
<body>
<div id="head">head</div>
<div id="container">
<div id="content">content</div>
<div id="side">side</div>
</div>
<div id="foot">foot</div>
</body>
</html>

除此之外，我们也可以再一些固定的布局中根据我们需要改变我们的布局

例如：增加或减去一些小的部分

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>变宽布局</title>
<style type="text/css">
body{
text-align:center; /*内容居中*/
}
#head,#container,#content,#side,#foot{ /*加个边框*/
margin: 20px auto 20px auto;
padding:20px 0px 20px 0px;
border: 1px solid red;
}
#head,#container,#foot{
width:80%;
}
#container{
border:0px;
}
#content{
float:left; /*左浮动*/
width:63%;
height:200px;
}
#side{
float:right; /*右浮动*/
width:33%;
margin-left:10px;
height:100px;
}
#foot{
clear:both; /*清除左右浮动*/
}
</style>
</head>
<body>
<div id="head">head</div>
<div id="container">
<div id="content">content</div>
<div id="side">side</div>
</div>
<div id="foot">foot</div>
</body>
</html>