CSS学习笔记
<h1 id="titlecss学习笔记">TITLE：CSS学习笔记</h1><h1 id="为初学者准备的css速成">为初学者准备的：CSS速成</h1>
<h3 id="什么是css">什么是CSS</h3>
<p>层叠样式表</p>
<pre><code class="language-html"><p> Lorem ipsum dolor sit amet </p>
P{
color:red;
}
</code></pre>
<p>Selector{Property:Value;}</p>
<p>选择器 { 属性：值 ；}</p>
<h3 id="三种方式添加css">三种方式添加CSS</h3>
<h5 id="外部样式表">外部样式表</h5>
<p>CSS 保存在.css文件中</p>
<p>在html里使用引用</p>
<h5 id="内部样式表">内部样式表</h5>
<p>不使用外部CSS文件</p>
<p>将CSS放在HTML <style>p { color: rgba(255, 0, 0, 1) }
.paragraph { color: rgba(255, 0, 0, 1) }
#para1 { color: rgba(255, 0, 0, 1) }
\3c /code>\3c /pre>
\3c h3 id="颜色">颜色\3c /h3>
\3c p>关键词\3c /p>
\3c p>RGB\3c /p>
\3c p>十六进制值\3c /p>
\3c h3 id="字体">字体\3c /h3>
\3c p>font-family 用来指定字体\3c /p>
\3c p>font-family : Arial, Helvetica, san-serif\3c /p>
\3c p>越前面的字体会被优先选择\3c /p>
\3c p>字体名中带空格，需要用引号引起\3c /p>
\3c p>Arial——字体族名\3c /p>
\3c p>Helvetica——字体名\3c /p>
\3c p>san-serif——无衬线\3c /p>
\3c p>serif——有衬线\3c /p>
\3c p>monospace——等宽字体\3c /p>
\3c h3 id="盒子模型">盒子模型\3c /h3>
\3c p>\3c img src="https://img2020.cnblogs.com/blog/2493574/202108/2493574-20210810221720177-1239972703.png" alt="image-20210713153959739" loading="lazy">\3c /p>
\3c p>margin\3c /p>
\3c pre>\3c code class="language-css">p { margin: 5px 7px 6px 8px }
p { margin: 5px 7px 6px 8px }
p { margin: 5px }
--------------------------------
p { margin: 5px 10px 6px }
p { margin: 5px 10px }
p { margin: 5px 10px }
\3c /code>\3c /pre>
\3c p>padding 和 border 同理\3c /p>
\3c h3 id="列表">列表\3c /h3>
\3c p>list\3c /p>
\3c p>url\3c /p>
\3c h3 id="按钮超链接">按钮/超链接\3c /h3>
\3c p>按钮\3c /p>
\3c pre>\3c code class="language-css">button { }
\3c /code>\3c /pre>
\3c h5 id="stylecss">style.css\3c /h5>
\3c pre>\3c code class="language-css">body { background-color: rgba(255, 255, 255, 1); color: rgba(85, 85, 85, 1); font-size: 20px; font-weight: bold; line-height: 2em }
h1 { color: rgba(0, 191, 255, 1) }
.box1 { padding: 20px; background-color: rgba(250, 235, 215, 1); color: rgba(65, 105, 225, 1); border-top: 5px rgba(0, 0, 255, 1); border-right: 5px solid rgba(255, 250, 240, 1); border-bottom: 5px rgba(0, 0, 255, 1); border-left: 5px rgba(0, 0, 255, 1) }
.container { width: 88%; margin: auto }
.box1 h1 { font-weight: 800; font-style: italic; text-decoration: underline; text-transform: uppercase; letter-spacing: 0.1em; word-spacing: 1em }
.box2 { border: 5px dotted rgba(204, 204, 204, 1); padding: 20px; margin: 20px 0; position: relative }
.list1 li { background-color: rgba(255, 255, 255, 1); list-style: square }
button { background-color: rgba(128, 128, 128, 1); color: rgba(255, 255, 255, 1); padding: 10px }
button:hover { background-color: rgba(0, 0, 0, 1) }
a { text-decoration: none; color: rgba(85, 85, 85, 1) }
a:visited { color: rgba(204, 204, 204, 1) }
a:hover { color: rgba(0, 0, 0, 1) }
.block { float: left; width: 33.3%; border: 1px solid rgba(204, 204, 204, 1); box-sizing: border-box }
#main-block { float: left; width: 70%; box-sizing: border-box }
#sizebar { float: right; width: 30%; box-sizing: border-box }
.clearfix { clear: both }
.list2 li:nth-child(2n+1) { background-color: rgba(255, 250, 240, 1) }
.list2 li:nth-child(2n) { background-color: rgba(245, 245, 220, 1) }
.list2 li:first-child { background-color: rgba(128, 128, 128, 1) }
.list2 li:last-child { background-color: rgba(128, 128, 128, 1) }
.list2 li:nth-child(0n+3) { background-color: rgba(255, 255, 255, 1) }
\3c /code>\3c /pre>
\3c h1 id="css-基础">CSS 基础\3c /h1>
\3c h2 id="一css-简介">一、CSS 简介\3c /h2>
\3c h4 id="什么是css-1">什么是CSS\3c /h4>
\3c p>层叠样式表\3c /p>
\3c p>定义如何显示html元素\3c /p>
\3c h4 id="书写规范">书写规范\3c /h4>
\3c p>CSS 规则由两个主要部分构成，选择器以及一条或多条声明\3c /p>
\3c p>选择器通常是你需要改变样式的html元素\3c /p>
\3c p>每条声明由一个属性和一个值组成\3c /p>
\3c h4 id="基础语法">基础语法\3c /h4>
\3c p>选择器 { }
\3c /p>
\3c p>使用花括号 { }
//告诉浏览器使用css解析器去解析
div { color: rgba(255, 0, 0, 1); font-size: 50px }
\3c /code>\3c /pre>
\3c p>01 先用一个style的标签对\3c /p>
\3c p>02 使用选择器\3c /p>
\3c h3 id="四css外部方式和导入方式">四、CSS外部方式和导入方式\3c /h3>
\3c p>将CSS样式抽成一个单独文件，使用者直接引用\3c /p>
\3c pre>\3c code class="language-html">创建单独文件：div，css
内容示例：div { color: rgba(0, 128, 0, 1); font-size: 50px }
\3c /code>\3c /pre>
\3c h3 id="五基本选择器和属性选择器">五、基本选择器和属性选择器\3c /h3>
\3c h4 id="基本选择器">基本选择器\3c /h4>
\3c p>元素选择器：在head中使用style标签引入在其中声明元素选择器：html标签（属性：属性值）\3c /p>
\3c p>id 选择器：给需要修改的样式的html元素添加id属性标识，在head中使用style标签引入在其中声明id选择器：#id值 { }</style></p><br><br>
来源：https://www.cnblogs.com/Ding1fun/p/15126071.html
頁:
[1]