HTML学习-CSS
<p>1、css语法</p><p> (1) 可以将css样式编写到head中的style标签里，将样式表编写的style标签中，然后通过css选择器选中指定元素</p>
<p> <style type="text/css"></p>
<p> p{</p>
<p> color:red;</p>
<p> font-size:40px;</p>
<p> }</p>
<p> (2)还可以将样式表编写到外部的css文件中，然后通过link标签来将外部的css文件引入当前的页面中。</p>
<p> <link rel="stylesheet" type="text/css" href="style.css"> 前两个不改，只改后一个（为 设置内容的位置）</p>
<p>2、块元素和内联</p>
<p> （1）块元素<div>标签（独占一行元素，主要对页面进行布局的）</p>
<p> p、h1、h2、h3.....也是块元素</p>
<p> （2）span是一个内联元素（只占自身大小，不会独占一行，专门用来选中文字，设置样式）</p>
<p> a、img、igrame、span</p>
<p>3、常用选择器</p>
<p> （1）元素选择器（可以选择页面中所有指定元素）语法：标签名{ }</p>
<p> （2）id许选择器（通过id属性值选中唯一的元素） 语法：#id属性值{ }</p>
<p> class属性类似id属性，但是class属性可以重复（通过元素class属性值选中一组元素） 语法： .class属性值{}</p>
<p> 同时为一个元素设置多个class属性，多个值之间使用空格隔开</p>
<p> （3）选择器分组（可以同时选中多个选择其对应的元素）语法：选择器1，选择器2，选择器n{ }</p>
<p> （4）通配选择器（选择页面中所有的元素）语法：*{}</p>
<div class="cnblogs_Highlighter">
<pre class="brush:html;gutter:true;"> p {
color:blue;
font-size:40px;
}
#p1{
color:green;
}
.p2{
color:red;
}
.p3{
font-size:50px;
}
<p>这是css学习</p>
<p id="p1">这是css学习</p>
<p class="p2">这是css学习</p>
<pclass="p2 p3">这是css学习</p></pre>
</div>
<p><img src="https://img2018.cnblogs.com/common/1716843/202002/1716843-20200205120725043-710421735.png"></p>
<p>4、伪类选择器（专门表示元素的一种特殊状态，例如访问过的超链接、普通链接、获取焦点的文本框）</p>
<p> 正常链接：a：link 访问过的链接： a：visited(只能定义字体颜色) </p>
<p> 鼠标划过的链接：a：hover 正在点击的链接：a：active</p>
<p> a:link{ color:yellow;}</p>
<p> <a href="#">正常链接</a></p>
<p> </p>
<p> a:visited{ color:red;}</p>
<p> <a href="#">访问过的链接</a></p>
<p> (1) input（创建文本框文本框） focus(文本框获取焦点)</p>
<p> input：focus { background：yellow; }</p>
<p><input type="text"/></p>
<p>(2)selection（为p标签中选中的内容使用样式）</p>
<p> p：：selection{ background-color：yellow;}</p>
<p>(3)伪元素</p>
<p> first-letter（为标签中第一个元素设置特殊样式）</p>
<p> first-line（为标签中第一行设置特殊样式）</p>
<p> before（表示元素最前边的部分，一般都需要结合content这个样式一起使用，通过content可以向befor或after的位置添加一些内容）</p>
<p> after（表示元素最后边的部分）</p>
<p>例如：为p标签中第一个字符设置一个特殊样式</p>
<p> p:first-letter{ color:red; }</p>
<p> <p>我是一个段落</p></p>
<p>5、属性选择器(可以根据元素的属性或属性值来选取指定元素)语法：</p>
<p> [属性名]选取含有指定属性的元素 例如：p{ color=red； }</p>
<p> [属性名=“属性值”]选取含有指定属性值的元素</p>
<p> [属性名^=“属性值”]选取属性值以指定内容开头的元素</p>
<p> [属性名$=“属性值”]选取属性值以指定内容j结尾的元素</p>
<p> [属性名*=“属性值”]选取属性值包含指定值的内容的元素</p>
<p> title属性（可以给任何标签指定，当鼠标移入到元素上时，title属性值会作为提示文字显示） 语法：<p title="hello">我是一个段落</p></p>
<p>6、子元素的伪类</p>
<p> ：first-child 可以选择中第一个子元素 语法： p：first-child{ }</p>
<p> ：last-child 可以选择最后一个子元素</p>
<p> ：nth-child 可以选择任意一个子元素 语法： p：nth-child（1、3、...n、odd、even）{ } odd表示奇数的子元素，even表示偶数的子元素</p>
<p> ：first-of-type ：last-of-type这些与 ：first-child类似，只是child是在所有的子元素中排列而type在当前类型的子元素中排列</p>
<p>7、否定伪类（可以从已选中的元素中剔出某些元素）语法：：not（选择器）</p>
<p> p：not（.hello）{ }</p>
<p> </p>
<p> <p>我是一个p标签</p></p>
<p> <p class=”hello“>我是一个p标签</p></p>
<p> <p>我是一个p标签</p></p>
<p> <p>我是一个p标签</p></p><br><br>
来源：https://www.cnblogs.com/dixingchen/p/12264165.html
頁:
[1]