CSS笔记

显示全部楼层 · 2023-1-15 19:24:44

内含项目demo和笔记，亲测可用，工程在附件链接里。
资源均来源于网络，仅供学习和参考使用，版权归原作者所有，勿作商业用途，请在下载后24小时之内自觉删除。
本站发布的内容若无意中侵犯到您的权益，请联系我们，本站将在看到后立即删除。

布局方式：
为什么需要先给整个网页布局？
没有布局的网页，是不美观的，是杂乱的。
有了布局，就相等于大楼有了主体结构，接下来就是给主体结构添砖加瓦，刷漆等。
这些后续工作在我们的网页中就是内容，图片文字等内容。
第一种方式：Table（基本不用）
第二种方式：DIV+CSS（项目中的常用方式）
什么是html元素？
HTML 元素指的是从开始标签（start tag）到结束标签（end tag）的所有代码。
什么是div？
div是一个标签，叫做一个块标签，一个div就是一个块，单独占用一行，div可以用作容器，容纳其他html元素（可以包含其他标题，表格，图片等各种html元素）。
单独使用起来，没有其他的效果，需要通过css来控制。
示例（单独占一行）
<div>我是一个好人！</div>
什么是span？
span是一个标签，它是一个内联标签。
单独使用起来没有其他效果，需要通过css来控制样式。
当没有css控制span的样式的时候，span对标签里面的内容，没有任何效果影响。
示例：
<span>SiKi学院是一个很牛B的网站！</span>没错！
什么是块级标签和内联标签（行内标签）？
块级标签占据一行，需要换行。
div p ul ol h1~h6 hr form ...
行内标签：在一行内显示，不换行
span b i font a textare img span input ...
标签嵌套规则：
https://www.cnblogs.com/xiyangbaixue/p/4090511.html
HTML
什么是css？
w3cschool：http://www.w3school.com.cn/css/css_jianjie.asp
HTML是基础，承载基本内容（图片，文本）
CSS可以让网页更加美观！
JavaScript可以让网页动起来，实现特效（动画，渐隐渐现等....）。
简述：CSS是用来控制样式的。
控制谁的样式？html里面的所有标签和标签里面内容的样式。
什么是样式？颜色，大小，位置...等视觉效果都是样式。
优点：解决内容与表现分离（.html 若干.css文件）
在学习开发期间，我们把css代码直接写在html文件里面，便捷
案例：
p{
font-size:15px; /*这个是css注释*/
color:blue;
font-family:"幼圆";
}
div{
font-family:"隶书";
}
h1,h2,h3,p{
font-size:90px;
}
书写css代码的三种方式
1，内部引入方式（直接在html页面上书写css代码）
<head>
放在head标签里面
<style type="text/css">
</style>
</head>
2，行内引入（只对某个标签有效，直接写属性样式，不需要写选择器）
<某个标签 style="font-size=20px;" ></结束标签>
3，外部引入（单独创建一个css文件）
<link rel="stylesheet" href="xxxx.css" type="text/css"/>
注意：可以引入多个
CSS使用方法优先级
就近原则：距离html元素最近的css样式起作用。
行内优先于内部引入。
内部引入和外部引入优先级由它的位置决定。
css核心语法
选择器{
属性名1：属性值1；
属性名2：属性值2；
属性名3：属性值3；
}
选择器
1，标签选择器
标签{}
2，类选择器（前面加上点）
.类名{}
标签.类名{}
标签的类名通过class属性指定
a,可以给多个标签指定同一个类名 class="xx"
b,也可以给一个标签指定多个类，中间空格隔开 class="xxx xxx"
3，id选择器
#id名{}
一般id名是不相同的，通过id属性指定某个标签的id，id就相当于我们每个人的身份证，是唯一的。
一个html元素只有一个id，不同元素的id是不相同的。
优先级 id选择器 > 类选择器 >标签选择器
其他时候：就近原则
注意：
一个标签可以既指定class也指定id。
class和id的值是区分大小写的。
其他选择器
1，群组选择器
多个选择器应用同一组样式，多个选择器之间用逗号隔开。
p,h1,h2,.c1,.c2,#id{}
2，全局选择器
*{} 对所有html元素有效
3，后代选择器
标签1 标签2{}
选择器标签2{}
控制标签1下面的标签2的样式。（对标签1下面的其他标签不影响）
4，属性选择器
标签名[属性名=‘属性值’]{}
控制标签相同属性相同的元素的样式。
5，伪类选择器
超链接有四种状态，不同状态下的样式怎么设置？
a:link {color: #FF0000} /* 未访问的链接 */
a:visited {color: #00FF00} /* 已访问的链接 */
a:hover {color: #FF00FF} /* 鼠标移动到链接上 */
a:active {color: #0000FF} /* 选定的链接（点击鼠标不松开） */
和CSS类搭配
.red : visited {color: #FF0000}
注意1：
link和visited时候超链接的伪类
hover和active不止可以对超链接使用，别的html元素也可以
注意2：
超链接伪类顺序
link visted hover active
其他伪类
:first-child 伪类（选择元素的第一个子元素）
使用F12工具查看网页指定部分的代码
CSS样式-----------------------------------------------------------------------
继承：
一般在子元素中没有设置的属性，会自动继承父元素里面设置的这个属性。
背景颜色和背景图片
背景包括内边距和边框，不包括外边距。
background-color:red;transparent
background-image: url(路径);
background-repeat: repeat-y; repeat repeat-x no-repeat
background-position:center; top bottom left right center
background-position:50px 100px;
background-attachment:fixed; scroll //背景不会随着页面其余部分滚动。
background http://www.w3school.com.cn/cssref/pr_background.asp
文本
text-indent: 5em;缩进
text-align:left; right center justify文本对齐
不止可以设置文本居中，还可以设置图片等其他内容，其他东西的对齐，使用别的方式
word-spacing:10px; 字间隔（单词）
letter-spacing:10px;字母间隔
text-decoration:none;underline overline line-through blink 文本装饰
line-height:20px; em 或者百分比
字体
font-family:"楷体","幼圆","黑体";
font-size:12px; 2em
color:rgb(255,255,255); #000000 red;
font-style:normal;italic 斜体显示 oblique 倾斜显示(区别不明显)
font-weight:normal; bold bolder lighter 100~900
font-variant:small-caps; 小型大写字母
简写
font:"楷体" 20px
书写顺序：http://www.w3school.com.cn/cssref/pr_font_font.asp
列表
ul
list-style-type:circle; none square http://www.w3school.com.cn/cssref/pr_list-style-type.asp
ul li
list-style-image:url(xxx.jpg);
ul
list-style-position:inside;
ul {list-style : url(example.gif) square inside}
css中的单位
第一种：px像素，显示大小收到显示器分辨率的影响。
第二种：相对大小em : https://www.w3cplus.com/css/px-to-em
em是相对大小1em就是相当于父元素大小的1倍。
浏览器中默认的文本大小是 16 像素。因此 1em 的默认尺寸是 16 像素。
块级元素和行内元素
display:linline block;
盒子模型-----------------------------------------------------------------------------
酒盒举例
对应网页中的盒子模型 http://www.w3school.com.cn/css/css_boxmodel.asp
盒子三要素：内边距，外边距和边框。（内边距和外边距也就是内填充和外填充）
内边距：padding 外边距：margin 边框：border
高宽指的是内容的高宽 width height
盒子宽度计算
width+(padding+border+margin)*2
css中的单位有哪些？
http://www.w3school.com.cn/cssref/css_units.asp
常用px em
高宽
width:90px;
width:50%;相当于父元素的width来计算。
height:90px;
height:80%;
内边距
padding: 10px;
padding: 10px 0.25em 2ex 20%;上右下左
padding-top: 10px;
padding-right: 0.25em;
padding-bottom: 2ex;
padding-left: 20%;
注意：
百分比是相对于父元素的width来计算的。
外边距
margin : 0.25in;
margin : 10px 0px 15px 5px;上右下左
margin : 10%; 按照父元素的width来计算百分比
margin: 0.5em 1em; 值复制
margin-left...
margin:auto;左右居中
外边框自动合并
边框
border:5px solid red;
border-top...
border-style: outset;
border-style: solid dotted dashed double; 上右下左
border-right..-style
border-style: none; 没有边框
border-width: 5px;thin 、medium 和 thick 分别设置为等于 5px、3px 和 2px
border-width: 15px 5px 15px 5px;
border-width: 15px 5px; 值复制
border-right..-width
border-color: blue rgb(25%,35%,45%) #909090 red;
border-right...-color
border-color: transparent; 透明边框，有边框，只不过不可见
border-radius 边框转角
案例练习：开发SiKi学院，单个课程展示界面
------------------------------------------------------CSS定位
一些皆为框
div、h1 或 p 元素常常被称为块级元素。这意味着这些元素显示为一块内容，即“块框”。与之相反，span 和 strong 等元素称为“行内元素”，这是因为它们的内容显示在行中，即“行内框”。
CSS的几种定位机制
普通文档流
浮动
绝对定位、相对定位、固定定位
普通文档流
块级元素单独占一行，行内元素放在一行，从上到下排布。
框的position属性
static 静态定位，自然定位。正常，默认属性。
relative 相对定位，相对于自身原来的位置。原来的框还在文档流里面占有空间。
absolute 绝对定位，相对于父元素，自身会脱离文档流。
fixed 固定定位，相对于浏览器的窗口来说的。
不会随着浏览器滚动而滚动
top bottom right left
z-index 堆叠顺序
相对定位，绝对定位和固定定位的区别：
https://www.cnblogs.com/gchlcc/p/6295199.html
块元素是独占一行的。
浮动
浮动的框可以向左或者向右移，直到它的外边缘碰到包含框或者另一个浮动框的边框为止。
http://www.w3school.com.cn/css/css_positioning_floating.asp
文章中有六个例子。
float：left right none
使用浮动可以让多个div在同一行
实现SiKi学院上的课程列表
清除浮动
属性 clear:left right both
作用清除浮动对自身的影响
方法一：一般会添加一个空的div，来清除上面所有的浮动，避免对接下来的代码产生影响。
方法二：设置固定高度

复制代码

CSS笔记

本帖子中包含更多资源