CSS基础

编程干饭王

已于 2022-03-23 18:11:38 修改

阅读量1.7k

点赞数 1

分类专栏：前端饭店文章标签： css3

于 2022-03-23 18:09:18 首次发布

本文链接：https://blog.youkuaiyun.com/qq_53030245/article/details/119357353

版权

前端饭店专栏收录该内容

2 篇文章

订阅专栏

作用

CSS的主要作用是用来为页面提供样式属性，可以使页面更整洁、更美观。

格式

格式一：内嵌式

在body里的标签里用style进行编辑

比如：<p style="color: red;">aaa</p>

设置p标签里的文本内容为红色

样式二：嵌入样式

在<style></style>里进行书写，任何位置都可以书写

比如：（效果和样式一的一样）

    <style>
        p{
            color: red;
        }
    </style>

    <p>aaa</p>

优点：

相对于样式一，样式二将全部样式的代码放在一处书写，这样可以使代码更整洁可观，还可以将一些重复样式放在一起，使代码更少。

样式三：外部导入

新建css文件，在css文件中进行编辑样式(比如aa.css)
外部导入代码：<link rel="stylesheet" href="./css/aa.css">

编写格式和样式二一样

优点：

相对于样式二，样式三是单独开辟一个文件存放css代码，这样就可以使html页面的代码更少，如果开分屏敲代码更容易操作和观察。

css注释/* */

注释快捷键ctrl+/

css长度单位：

绝对长度单位包括有： cm（厘米）

mm（毫米）

in（英寸）

pt（点1pt = 1/72in ）

pc（派卡1pc =12pt ）

常用： px（像素）

相对长度单位包括有：em(相对于当前标签内文本的字体样式)

ex、rem(相对于根元素html字体大小)

常用： %(百分比，相对于父容器的百分比)

选择器

1、元素选择器：

同时编辑页面内所有同名的元素
代码：

<style>
   p{ font-size:40px; }  （编辑所有p标签内的样式）
</style>
<p>元素选择器</p>

2.id选择器

格式：#id名称

单独编辑id名里的内容

代码：

<style>
   #a{ color: red; }  编辑id名为a里的内容，id名为b里的内容不会被编辑
</style>

<p id="a">aaa</p>
<p id="b">bbb</p>

效果：

3.类选择器

格式：.类名称 (点加类名称)

代码：

    <style>
        .a{ color: red; }  效果和id选择器一样
    </style>

<p class="a">aaa</p>
<p class="b">bbb</p>

两个选择器同时对同一段文字编辑样式

    <style>
        .c1{ font-size: xx-large; }设置文字大小
        .c2{ color: red; }设置文字颜色
    </style>

    <p class="c1 c2">哈哈哈</p>

效果：

选择器优先级：id选择器 > 类选择器 > 标签选择器

就是，如果三个选择器同时出现，优先显示id选择器中的效果样式，然后就是类选择器，最后是标签选择器。

4.组合选择器

/*两个选择器同时对同一段文字编辑样式*/
<span id="c1" class="c2">哈哈哈哈</span>
#c1{
    font-size: xx-large;
}
.c2{
    color: crimson;
}

/*同时对两个选择器进行同样的样式编辑*/
<span class="d1">哈哈哈哈</span>
<span class="d2">啊啊啊啊</span>
#d1,.d2{
    font-size: xx-large;
}

5.派生选择器

/*会选择父类下的所有子标签*/
ul中的li标签
<ul>
    <li>哈哈哈哈</li>
</ul>
ul li{	
    color: crimson;
}

div中的a标签
<div>
    <a>啊啊啊啊</a>
</div>
div a{ 
    color: green;
}

6.子选择器

/*只选择父级元素的下一层的元素*/
div>.aa{ color: red;}

7.属性选择器

input[name]{ width: 200px; height: 50px;}
/*选中属性等于某个值*/
input[name='age']{ width: 300px; height: 30px;}
/*通配符:\* 选择页面中素有的元素*/
/*选择页面中所有带有[]中文字的元素*/
*[type]{ text-align: center;}

8.伪类选择器

<1>hover鼠标悬停

p:hover{	
    /*鼠标放在文字上会发生改变 内有id选择器的时候不会改变*/
    color: red;    		
    font-size: large;       
}   
div::first-letter{	
    /*调整第一个字符的样式*/		
    font-size: 60px;       
}

cursor:pointer  /*鼠标变成手样式*/

<2>focus鼠标点击变样式

#textPwd:focus{     
    outline:none;     
    border:1px solid red;
}
#addtext:focus{
    outline:0;//点击文本框时无边框
}

<3>伪对象选择符：

E::first-letter：/*设置符合E筛选条件的第一个字符的样式。 */ 
E::first-line：/*设置符合E筛选条件内的第一行的样式。  */
E::before：/*设置符合E筛选条件的前一个元素的样式。  */
E::after：/*设置符合E筛选条件的后一个元素的样式。  */
E::selection:/*设置符合E筛选条件的元素被选择时的样式。*/

/*设置文本被选中*/
.ha::selection{	color: red;}
/*筛选未被访问的链接*/
a:link{	color:green;}
/*筛选已经被被访问的链接。*/
a:visited{	color: yellow;}