CSS学习（1）
<h1 id="css学习">CSS学习</h1><p>CSS是层叠样式表（Cascading Style Sheets）的简称。</p>
<p>有时候也会称之为CSS样式表或级联样式表。</p>
<p>CSS也是一种标记语言。</p>
<p>CSS主要设置HTML页面中的文本内容、图片的外形以及版面的布局和外观显示样式。</p>
<p>HTML可以专注去做结构，CSS用来做样式。</p>
<h2 id="css的语法规范">CSS的语法规范</h2>
<p>CSS由（1）选择器和（2）声明的样式组成，一般写在head中。</p>
<pre><code class="language-css"><style>
/* 选择器{样式} 如下，选择器找到所有的p标签，然后将样式赋予所有的p标签*/
/* 给谁改样式{改什么样式} */
p {
color: red;
font-size: 12px;
}
</style>
</code></pre>
<h2 id="选择器的分类">选择器的分类</h2>
<h3 id="基础选择器">基础选择器</h3>
<h4 id="标签选择器">标签选择器</h4>
<p>HTML的标签名作为选择器。为页面中所有的同一标签全部改样式。</p>
<pre><code class="language-css">p {
color: red;
font-size: 12px;
}
</code></pre>
<h4 id="类选择器">类选择器</h4>
<p>如果要差异化选择不同的标签，使用类选择器(开发最常用），类型太长可以用-来分隔。</p>
<pre><code class="language-css">/* 定义类选择器 */
.red {
color: red;
}
.font35 {
font-size:35px
}
<!-- 使用类选择器 -->
<p class="red">hello world</p>
</code></pre>
<p>多类名的使用：</p>
<p>一个HTML元素中class可以指定多个类名，多类名之间必须用空格分开。</p>
<pre><code class="language-css"><p class="red font35">hello world</p>
</code></pre>
<h4 id="id选择器">ID选择器</h4>
<p>id选择器可以为标有特定id的HTML元素指定特定的样式，<strong>ID选择器只能被调用一次</strong>。</p>
<pre><code class="language-css">/* 定义ID选择器 */
#pink {
color: pink;
}
<!-- 使用ID选择器 -->
<p id="pink">hello world</p>
</code></pre>
<h4 id="通配符选择器">通配符选择器</h4>
<p>在CSS中，通配符选择器使用“*”定义，它表示选取页面中所有元素（标签）。</p>
<pre><code class="language-css">/* 定义通配符选择器，这里将html，body，head等等标签全部改为红色 */
* {
color: red;
}
</code></pre>
<h3 id="复合选择器">复合选择器</h3>
<p>复合选择器是由两个或更多个复合选择器通过不同的方式组合而成的。</p>
<h4 id="后代选择器">后代选择器</h4>
<pre><code class="language-css">/* 只改变ol中的li的样式 */
ol li {
color: pink;
}
/* 也可以用带class=nav的基础选择器来寻找 */
.nav li a {
color: pink;
}
</code></pre>
<h4 id="子选择器">子选择器</h4>
<p>只影响儿子标签，不影响孙子标签。</p>
<pre><code class="language-css">.nav > a {
color: red;
}
<div class="nav">
<a href="#">我是儿子</a>
<p>
<a href="#">我是孙子</a>
</p>
</div>
</code></pre>
<h4 id="并集选择器">并集选择器</h4>
<p>并集选择器可以选择多组标签，同时为他们定义相同的样式。</p>
<pre><code class="language-css">div,
p {
color: red;
}
</code></pre>
<p>可以和别的选择器混合使用。</p>
<pre><code class="language-css">div,
p,
.nav li{
color: red;
}
</code></pre>
<h4 id="伪类选择器">伪类选择器</h4>
<p>伪类选择器有链接伪类、结构伪类、表单伪类等。</p>
<h5 id="链接伪类">链接伪类</h5>
<p>书写顺序link，visited，hover，active。</p>
<p>a:link选择所有未被访问的链接</p>
<p>a:visited选择所有已被访问的链接</p>
<p>a:hover选择鼠标指针位于其上的链接</p>
<p>a:active选择活动链接（鼠标按下未弹起的链接）</p>
<h5 id="focus伪类选择器">focus伪类选择器</h5>
<p>用于选择焦点的表单元素。</p>
<pre><code class="language-css">input :focus{
background-color: yellow;
}
</code></pre>
<h2 id="css字体属性">CSS字体属性</h2>
<h3 id="字体系列">字体系列</h3>
<p>font-family定义文本的字体系列。当冒号后有多个字体，会从左往右选择，直到选择了电脑中存在的能显示的为止。</p>
<pre><code class="language-css">h2 {
font-family: 'Microsoft Yahei';
}
</code></pre>
<h3 id="文字大小">文字大小</h3>
<p>font-size定义文字的大小。</p>
<pre><code class="language-css">/* 标题和标签比较特殊，需要单独指定文字的大小 */
body {
font-size: 16px;
}
</code></pre>
<h3 id="字体的粗细">字体的粗细</h3>
<p>font-weight定义文字的粗细，一般都用数字。</p>
<p>notmal（400）：正常字体。</p>
<p>bold（700）：粗体。</p>
<p>bolder：特粗体。</p>
<p>lighter：细体。</p>
<h3 id="文字样式">文字样式</h3>
<p>font-style定义字体的样式：normal（默认），italic（倾斜）</p>
<h3 id="字体的复合属性">字体的复合属性</h3>
<p>font用来设置复合属性,各属性用空格分开，不要的属性可以省略，但是font-size和font-family属性必须要有。</p>
<pre><code class="language-css">/* font的顺序为font-style font-weight font-size/line-height font-family */
p {
font: italic 700 16px/20px 'Microsoft yahei'
}
</code></pre>
<h2 id="css文本属性">CSS文本属性</h2>
<h3 id="文本颜色">文本颜色</h3>
<p>color定义文本颜色</p>
<pre><code class="language-css">div {
color: red;
/* color: #ff0000; */
/* color:rgb(200,0,0) */
}
</code></pre>
<h3 id="文本对齐">文本对齐</h3>
<p>text-align设置文本内容的水平对齐方式。</p>
<pre><code class="language-css">h1 {
/* 属性有right，left，center */
text-align: center;
}
</code></pre>
<h3 id="装饰文本">装饰文本</h3>
<p>text-decoration设置文本装饰。</p>
<pre><code class="language-css">p {
/* 属性有underline下划线 line-through删除线 over-line上划线 none去除文本默认下划线 */
text-decoration: underline;
}
</code></pre>
<h3 id="文本缩进">文本缩进</h3>
<p>text-indent定义首行缩进。</p>
<pre><code class="language-css">p {
text-indent: 10px;
/* text-indent: 2em; 2个文字的大小*/
}
</code></pre>
<h3 id="行间距">行间距</h3>
<p>line-height属性用于设置行间的距离（行高）。</p>
<pre><code class="language-css">p {
/* 行间距包括文本高度+上间距+下间距 */
line-height: 26px;
}
</code></pre>
<h2 id="css引入方式">CSS引入方式</h2>
<h3 id="行内样式表行内式">行内样式表（行内式）</h3>
<p>直接写在元素标签内部的style属性中设置CSS样式。</p>
<pre><code class="language-css"><div style="color: red;font-size: 12px;">不关注嘉然今天吃什么的，有难了</div>
</code></pre>
<h3 id="内部样式表嵌入式">内部样式表（嵌入式）</h3>
<p>把CSS写到html的内部的style标签内部，一般吧style放在head里面。</p>
<h3 id="外部样式表链接式">外部样式表（链接式）</h3>
<p>将CSS单独写在外部的CSS文件中。</p>
<pre><code class="language-css"><link rel="stylesheet" href="css文件路径">
</code></pre><br><br>
来源：https://www.cnblogs.com/boniii/p/14914805.html
頁:
[1]