WEB开发-CSS入门学习总结

阿轩啊 發表於 2021-10-9 17:56:00

HTML学习完成以后，我们就要开始学习CSS的相关知识，CSS是用来修饰网页内容的一种语言。
层叠样式表（Cascading Style Sheets，缩写：CSS），是一种样式表语言，描述如何显示HTML元素。
引入方式
1.内联/行内
<div class="cnblogs_code">
<pre>使用style属性</pre>
</div>
2.内部样式
在head标签里面添加style标签里写样式
<div class="cnblogs_code">
<pre><head>
<title>嵌入式</title>
<style type='text/css'>
 p{
 font-size: 18px;
 color: red;
 }
</style>
</head></pre>
</div>
3.外部样式表
创建一个扩展名.css的文件，在这个文件中写样式，在head里面引入样式文件。
<div class="cnblogs_code">
<pre><head>
<title>外部样式表</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head></pre>
</div>
CSS语法
规则是由选择器和多条声明（属性：值）语句组成
<div class="cnblogs_code">
<pre>p { color: red; font-size: 16px; }</pre>
</div>
Id和Class选择器
id 选择器是为有特定 id 的元素指定样式。
class 选择器是用于一组元素的样式。
<div class="cnblogs_code">
<pre>#idName {
color:red;
}
.className {
color:red;
}</pre>
</div>
样式常用属性
背景：background-color（image，repeat，position，attachment）
字体：font，font-size（family，style，weight）
文本：color，line-height，text-align（shadow，indent），vertical-align，white-space，world-sapcing
列表：list-style，list-style-type，list-style-image，list-style-position
链接：a:link，a:hover，a:active，a:visited
边框：border，border-style（width，corlor，bottom，left，right，top）
外边距：margin，margin-top（right，bottom，left）
内边距：padding，padding-top（right，bottom，left）
显示：display：inline/block/inline-block
定位：position：static/relative/fixed/absolute/sticky
浮动：float：left/right/none     clear：left/right/none/both
属性选择器
<div class="cnblogs_code">
<pre>
{ color:red; }
/* 相等的值 */

{ border: 2px solid blue; }
/* 包含指定的值 */
{ color:blue; }
/* 开头为指定的值 */
{ color:blue; }
/* 结尾为指定的值 */
{ color:blue; }</pre>
</div>
CSS组合嵌套
<div class="cnblogs_code">
<pre>/* 组合，多个名称逗号（,）分隔 */
.test1, .test2 { color: red; }
/* 嵌套，多个名称空格分隔*/
.test p { color: blue; }</pre>
</div>
CSS注释
<div class="cnblogs_code">
<pre>/*
* 这是body的样式
*/
body{
width: 100%;/* 设置宽100% */
height: 100%;
margin: 0px;
padding: 0px;
}</pre>
</div>
CSS伪类
伪类选择元素基于的是当前元素处于的状态，或者说元素当前所具有的特性，如：
a:link，a:hover，a:active，a:visited，:first-child，:first-of-type，:checked，:disabled，:focus
CSS伪元素
伪元素是对元素中的特定内容进行操作，它所操作的层次比伪类更深了一层
::after，::before，:first-line，:first-letter
CSS优先级
!important > 行内样式 > ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性
一般我们使用这个方法计算权重：
内联样式权值=1000，ID选择器权值=100，类选择器权值=10，标签选择器权值=1
根据样式的规则把权值做加法，值越大优先级越高。
 
文章内容如果写的存在问题欢迎留言指出，让我们共同交流，共同探讨，共同进步~~~
文章如果对你有帮助，动动你的小手点个赞，鼓励一下，给我前行的动力。

</div>
<div id="MySignature" role="contentinfo">
<p style="border-right: #e5e5e5 1px solid; border-top: #e5e5e5 1px solid; background-image: url("https://images.cnblogs.com/cnblogs_com/grenet/226272/o_o_o_info.png"); margin: 10px; border-left: #e5e5e5 1px solid; color: #ffcc66; text-indent: 50px; border-bottom: #e5e5e5 1px solid; background-repeat: no-repeat; background-color: #fffefe">作者：zeke　　　　            出处：http://zhf.cnblogs.com/           本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。  
来源：https://www.cnblogs.com/ZHF/p/15387028.html

頁: [1]

琼殿技术论坛's Archiver

WEB开发-CSS入门学习总结