html和css入门 （二）
程序员文章站
2022-04-14 18:57:07
CSS基础 什么是CSS 简单来说，层叠样式表（Cascading Style Sheet）是一种专门用来控制界面外观风格的文档。 CSS发展历史 CSS使用方式 行内样式 This is title</t ......</div>
<div class="content">
<h1 id="css">css基础</h1>
<h2 id="css_1">什么是css</h2>
<p>简单来说，层叠样式表（cascading style sheet）是一种专门用来控制界面外观风格的文档。</p>
<h2 id="css_2">css发展历史</h2>
<ol>
<li>1996年 css 1.0 规范面世，其中加入了字体、样色等相关属性。</li>
<li>1998年 css 2.0 规范推出，这个版本的 css 也是最广为人知的一个版本。</li>
<li>2004年 css 2.1 规范推出，对 css 2.0 进行了一些小范围的修改，删除了一些浏览器支持不成熟的属性。</li>
<li>2010年 css 3.0 规范推出，将 css3 分成了不同的模块，例如盒子模型、背景和边框、文字特效等模块。</li>
</ol>
<h2 id="css_3">css使用方式</h2>
<p><strong>行内样式</strong></p>
<div class="codehilite">
<pre class="brush: css;"><!doctype html>
<html lang="en">
<head>
<title>this is title</title>
</head>
<body>
<p style="font-size: 16px; color: red;">my cat is very grumpy</p>
</body>
</html>
</pre>
</div>
<blockquote>
<p>行内样式需要写到标签的 style 属性值中。</p>
</blockquote>
<p><strong>内部样式表</strong></p>
<div class="codehilite">
<pre class="brush: css;"><!doctype html>
<html lang="en">
<head>
<title>this is title</title>
<style>
p {
font-size: 16px;
color: red;
}
</style>
</head>
<body>
<p>my cat is very grumpy</p>
</body>
</html>
</pre>
</div>
<blockquote>
<p>内部样式需要写到 <code><style></code> 标签中。</p>
</blockquote>
<p><strong>外部样式表</strong></p>
<ul>
<li>链接式</li>
</ul>
<p>将样式写到单独的文件中，文件的扩展名为 <code>.css</code>。例如，<code>index.css</code> 文件中有如下样式：</p>
<div class="codehilite">
<pre class="brush: css;">p {
font-size: 16px;
color: red;
}
</pre>
</div>
<p>然后通过 <code><link></code> 元素将 <code>index.css</code> 文件引入到页面中：</p>
<div class="codehilite">
<pre class="brush: css;"><!doctype html>
<html lang="en">
<head>
<title>this is title</title>
<link rel="stylesheet" type="text/css" href="./index.css">
</head>
<body>
<p>my cat is very grumpy</p>
</body>
</html>
</pre>
</div>
<ul>
<li>导入式</li>
</ul>
<p>创建 <code>style1.css</code> 文件，文件中有如下样式：</p>
<div class="codehilite">
<pre class="brush: css;">/* style1.css */
h1 {
font-size: 32px;
color: green;
}
</pre>
</div>
<p>创建 <code>style2.css</code> 文件，并使用 <code>@import</code> 指令将 <code>style1.css</code> 导入到 <code>style1.css</code> 文件中：</p>
<div class="codehilite">
<pre class="brush: css;">/* style2.css */
p {
font-size: 16px;
color: red;
}
</pre>
</div>
<p>最后，通过 <code><link></code> 元素将 <code>style2.css</code> 文件引入到页面中：</p>
<div class="codehilite">
<pre class="brush: css;"><!doctype html>
<html lang="en">
<head>
<title>this is title</title>
<link rel="stylesheet" type="text/css" href="./style2.css">
</head>
<body>
<h1>一级标题</h1>
<p>my cat is very grumpy</p>
</body>
</html></pre>
</div>
<p>定义在外部文件（外链样式）：本教程中案例主要是通过这种形式定义样式。 在页面的头部定义（内联样式）：通过这种形式定义的样式只在本页面内生效。 定义在特定的元素身上（行内样式）：这种形式多用于测试，可维护性较差。</p>
<h2 id="css_4">css基本语法<a class="headerlink" title="permanent link" target="_blank" rel="nofollow" href="/default/index/url?u=aHR0cHM6Ly93d3cuMTBxaWFud2FuLmNvbQ=="><br></a>
</h2>
<p>css 样式由一系列的规则集组成，规则集中有一条或多条样式声明，每条样式声明包含着一对属性名和属性值，属性名和属性值之间以冒号（<code>:</code>）隔开，样式规则之间以分号（<code>;</code>）隔开，最后一对样式声明后面可以省略分号。</p>
<h2 id="_4">基本选择器<a class="headerlink" title="permanent link" target="_blank" rel="nofollow" href="/default/index/url?u=aHR0cHM6Ly93d3cuMTBxaWFud2FuLmNvbQ=="><br></a>
</h2>
<p>标签选择器</p>
<div class="codehilite">
<pre class="brush: css;">p {
font-size: 16px;
color: red;
}
</pre>
</div>
<blockquote>
<p>选择页面中所有的 <code><p></code> 元素，给它们设置字体大小和颜色。</p>
</blockquote>
<p>class 选择器</p>
<div class="codehilite">
<pre class="brush: css;">.box {
font-size: 20px;
color: green;
}
</pre>
</div>
<blockquote>
<p>选择页面中 class 属性值中包含 box 类名的所有元素，给它们设置字体大小和颜色。</p>
</blockquote>
<p>id 选择器</p>
<div class="codehilite">
<pre class="brush: css;">#nav {
font-size: 24px;
color: blue;
}
</pre>
</div>
<blockquote>
<p>选择页面中 id 属性值是 nav 的元素，给它设置字体大小和颜色。</p>
</blockquote>
<p>通配符选择器</p>
<div class="codehilite">
<pre class="brush: css;">* {
font-size: 24px;
color: blue;
}
</pre>
</div>
<h2 id="_5">样式的优先级<a class="headerlink" title="permanent link" target="_blank" rel="nofollow" href="/default/index/url?u=aHR0cHM6Ly93d3cuMTBxaWFud2FuLmNvbQ=="><br></a>
</h2>
<ol>
<li>
<p>行内样式的优先级最高</p>
</li>
<li>
<p>选择器的优先级根据权重计算</p>
</li>
</ol>
<table>
<thead><tr>
<th>选择器</th>
<th>id选择器</th>
<th>class选择器</th>
<th>标签选择器</th>
<th>总权重</th>
</tr></thead>
<tbody>
<tr>
<td><code>html body header h1</code></td>
<td>0</td>
<td>0</td>
<td>4</td>
<td>4</td>
</tr>
<tr>
<td><code>.page-header .title</code></td>
<td>0</td>
<td>2</td>
<td>0</td>
<td>20</td>
</tr>
<tr>
<td><code>#page-title</code></td>
<td>1</td>
<td>0</td>
<td>0</td>
<td>100</td>
</tr>
</tbody>
</table>
<blockquote>
<p>属性选择器权重与类相同，<code>+ > ~</code> 权重为 0</p>
</blockquote>
<ol>
<li>
<p>在选择器权重相同的情况下，遵循就近原则，也就是说，谁距离目标元素近，应用哪个个样式。</p>
</li>
<li>
<p>使用 <code>!important</code> 声明调整样式的优先级</p>
</li>
</ol>
<h2 id="_6">样式的来源<a class="headerlink" title="permanent link" target="_blank" rel="nofollow" href="/default/index/url?u=aHR0cHM6Ly93d3cuMTBxaWFud2FuLmNvbQ=="><br></a>
</h2>
<p>共有三种主要的样式来源：</p>
<ul>
<li>浏览器对html定义的默认样式。</li>
<li>用户定义的样式。</li>
<li>开发者定义的样式。</li>
</ul>
<h2> </h2>
<h2>特别声明：本人也是小白，想让与我一样的初学者一起学习，写的不好的地方请见谅</h2> </div>
<div class="info-pre-next">
<p>
上一篇： <a href="/article/593395.html">
WPF 修改屏幕DPI，会触发控件重新加载Unload/Load </a>
</p>
<p>
下一篇： <a href="/article/593397.html">
阪泉之战的“阪泉”位于何处？阪泉之战是一场怎样的战争？ </a>
</p>
</div>
<div class="wz_tuijian">
<p>
推荐阅读 </p>
<ul>
<li>
<a href="/article/2297237.html" target="_blank" title="请问如何实现table的外框和内框线的粗度不同？？_html/css_WEB-ITnose">
<h2>
请问如何实现table的外框和内框线的粗度不同？？_html/css_WEB-ITnose </h2>
</a>
</li>
<li>
<a href="/article/2296892.html" target="_blank" title="前端编码规范（4）-- CSS 和 Sass (SCSS) 规范_html/css_WEB-ITnose">
<h2>
前端编码规范（4）-- CSS 和 Sass (SCSS) 规范_html/css_WEB-ITnose </h2>
</a>
</li>
<li>
<a href="/article/2296024.html" target="_blank" title="HTML5与CSS3基础教程：普通页面构成和创建页眉_html/css_WEB-ITnose">
<h2>
HTML5与CSS3基础教程：普通页面构成和创建页眉_html/css_WEB-ITnose </h2>
</a>
</li>
<li>
<a href="/article/2295662.html" target="_blank" title="JSP网页实现拼音和汉字的上下对齐_html/css_WEB-ITnose">
<h2>
JSP网页实现拼音和汉字的上下对齐_html/css_WEB-ITnose </h2>
</a>
</li>
<li>
<a href="/article/2295656.html" target="_blank" title="HTML入门基础_html/css_WEB-ITnose">
<h2>
HTML入门基础_html/css_WEB-ITnose </h2>
</a>
</li>
<li>
<a href="/article/2295437.html" target="_blank" title="onkeyup，onkeydown和onkeypress_html/css_WEB-ITnose">
<h2>
onkeyup，onkeydown和onkeypress_html/css_WEB-ITnose </h2>
</a>
</li>
<li>
<a href="/article/2295394.html" target="_blank" title="CSS常用布局整理（二）_html/css_WEB-ITnose">
<h2>
CSS常用布局整理（二）_html/css_WEB-ITnose </h2>
</a>
</li>
<li>
<a href="/article/2295108.html" target="_blank" title="CSS的link和@import的区别_html/css_WEB-ITnose">
<h2>
CSS的link和@import的区别_html/css_WEB-ITnose </h2>
</a>
</li>
<li>
<a href="/article/2295039.html" target="_blank" title="CSS3阴影 box-shadow的使用和技巧总结_html/css_WEB-ITnose">
<h2>
CSS3阴影 box-shadow的使用和技巧总结_html/css_WEB-ITnose </h2>
</a>
</li>
<li>
<a href="/article/2294568.html" target="_blank" title="SVG绘图(二) -- 渲染满天星辰_html/css_WEB-ITnose">
<h2>
SVG绘图(二) -- 渲染满天星辰_html/css_WEB-ITnose </h2>
</a>
</li>
</ul>
</div>
</article>
</div>
</main>
<footer><div class="box"><div class="ft_nav"><div class="ft_about"><p>关于网站</p><ul><li><a href="/sitemap.xml" target="_blank" title="网站地图">网站地图</a></li><li><a href="/list/2/" title="最新程序员文章站">最新程序员文章站</a></li></ul></div><div class="ft_contact"><ul><li>本站所有数据收集于网络如有侵犯到您的权益，请联系我们进行下架处理。</li><li class="email_show"></li></ul></div></div><div class="copyright"><div class="cr_left"><p> 备案号：<a href="https://beian.miit.gov.cn/#/Integrated/index" target="_blank">粤ICP备20058927号</a></p><p>© Copyright © 2020-2022 www.superweb999.com 程序员文章站. </p></div></div></div></footer> </body>
</html>