首页 > 其他分享> 文章详细

css、day1四种样式表导入、基本选择器，高级选择器、结构伪类、属性选择器、正则表达式（待补充）

2022-04-06 17:34:15 阅读：145 来源： 互联网

标签：伪类标签字体样式表 background 选择器 css

css

1.初识css

首先打开百度首页，右键点击审查元素

1.1CSS是什么

cascading style sheet 层叠样式表

美化网页
字体，颜色，边距，高度，宽度，背景图片，网页定位，网页浮动等

跳转

1.2css发展史

css1.0
css2.0 div+css ，html和网页分离的思想
css2.1 浮动+定位
css3.0 圆角，阴影，动画，浏览器兼容性

1.3快速入门

css关联有三种使用方法，具体看html的day2的css三种使用方法（建议使用外部导入）

<head>
    <style>
        /*   语法：
            每个声明以英文的分号结尾
            选择器{
                    声明1；
                    声明2；
                    声明3；

                }
        */
        p{
            font-family: 楷体;
            font-size: 500px;
            background: aqua;
        }

    </style>

    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<p>这是一个段落</p>

</body>

</html>

1.4css优势

内容与表现分离
网页节后表现统一，可以实现复用
样式十分丰富
建议使用独立于html的css文件
seo容易收录

1.5css的四种导入方式

1.5.1内联样式

当特殊的样式需要应用到个别的元素是，就可以使用内联样式。使用内联样式的方法是在相关的标签中使用样式属性。样式属性可以包含任何css属性。以下实例显示出如何改变段落颜色和左外边距

<!--内联样式定义了文字的颜色左边距-->
<p style="border: blue;color: blue;margin-left: 50px;">
    这是一个css样式的段落</p>

<!--定义了背景颜色是蓝色-->
<h1 style="background: aqua;border: black;color: blue">一级大标题</h1>

<!--定义了字体的样式和大小-->
<p style="font-family:黑体,sans-serif;font-size: 100px;"> 定义字体 </p>

<p style="text-align: center">文本在中间位置</p>

出现错误：

Font property font-family does not have generic default

原因为没有定义 “generic-family”即字体的所属风格。

解决办法：在font-family末尾添加字体所属风格，如serif 或sans-serif**最后一项serif为默认风格字体，如果之前指定的字体都没有找到，就使用浏览器的默认serif字体。各浏览器的默认风格字体可能不相同。其他的字体系列还有monospace、fantasy、cursive**

1.5.2内部样式表

当单个文件需要特别样式时，就可以使用内部样式表。你可以在<head> 部分通过 <style>标签定义内部样式表:

<head>
<style type="text/css">
body {background-color:yellow;}
p {color:blue;}
</style>
</head>
如果同时定义了内联样式表和内部样式表，定义了内联样式表就按照内联样式表来。

1.5.3外部样式表

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

1.5.4导入式

@import url("")

这样的方式会先加载html再渲染，link是先渲染再导入，所以这个方法不太用了

谁的优先级高呢

就近原则最近的是内联样式，然后看其他两个谁更近

2.三种基本选择器

作用：选择某一个或者某一类选择器

2.1标签选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*1.标签选择器会选择所有的这个标签的元素*/
        h1{
            color: aqua;
        }


    </style>
</head>
<body>
<!--1-->
<h1></h1>
<h1>逃学</h1>
<p>听课</p>
<h1>睡觉</h1>

</body>
</html>

2.2类选择器class

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
     /* 点+类名+{}*/
    .banji1{
        background: black;
    }
    .banji2{
        background: red;
    }

    </style>
</head>
<body>
<!--利用类选择器使相同类,不同标签也可以是同一类-->
<h1 class="banji1">标签1</h1>
<h1 class="banji2">标签2</h1>
<h1 class="banji1">标签3</h1>
<h1 class="banji2">标签4</h1>
<p class="banji1" >biaoqian</p>

</body>
</html>

2.3id选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #yu{
            color: red;
        }
    </style>

</head>
<body>
<!--id是唯一的 #+id名称+{}-->
<!--我的id用了数字似乎加了id选择器也没用，改成拼音了才可以-->
<h1 id="yu">标签1</h1>
<h1 class="banji2">标签2</h1>
<h1 class="banji1">标签3</h1>
<h1 class="banji2">标签4</h1>

</body>
</html>

三个的优先级谁更高呢

id>class>类

3.高级选择器

3.1层次选择器

3.1.1后代选择器

某个元素的后面比如选了祖爷爷爷爷爸爸你

    <style>
        body ul{
            color: red;
        }

    </style>
</head>
<body>
<p>标签1</p>
<p>标签2</p>
<p>标签3</p>
<ul>
    <li>
        <p>p4</p>
    </li>
    <li>
        <p>p5</p>
    </li>
    <li>
        <p>p6</p>
    </li>

</ul>

3.1.2子选择器

只是后一代

body>p{
    background: red;
}

3.1.3相邻兄弟选择器

相邻兄弟选择器（只对下面的兄弟生效，且只有一个兄弟生效）

<style>
    .yu + p{
        background: red;
    }

    </style>
</head>
<body>

<p>标签1</p>
<p class="yu">标签2</p>
<p >标签3</p>
<ul>
    <li>
        <p>p4</p>
    </li>
    <li>
        <p>p5</p>
    </li>
    <li>
        <p>p6</p>
    </li>


</body>
</html>

3.1.4通用选择器

和兄弟选择器不一样的是选择了后面的所有兄弟

.yu ~p{
    background: red;
}

3.2结构伪类选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*伪类选择器
        first-child:第一个
        last-child:最后一个
        */
        ul li:first-child{
            background: red;
        }
        ul li:last-child{
            background: blue;
        }
        /*伪类选择器
        如果想选择标签2应该怎么办呢
        首先是定位到父元素，选择当前的第2个元素,定位到父元素，然后选择的必须是当前元素才生效
        比如我用的是p：那就只能改变p的样式，如果这里p:nth-child(4)
        那这样选中的按理说是ul但是根据只能是p的原则，就改变不了该元素
        */
        p:nth-child(2){
            background: aqua;
        }
        /*选中p元素的第几个，和上面的不同的是，这里面数数是按照p来数的，上面的就按照孩子来数*/
        p:nth-of-type(4){
            background: aqua;
        }

    </style>
</head>
<body>

<p>标签1</p>
<p>标签2</p>
<p>标签3</p>
<ul>
    <li>li1</li>
    <li>li2</li>
    <li>li3</li>
</ul>

<ul>
    <li>li4</li>
    <li>li5</li>
    <li>li6</li>
</ul>
<p >标签4</p>
<p >标签5</p>


</body>
</html>

3.3属性选择器

a[class=rao]{
            background: black;
        }
/* 元素名[正则表达式]
=绝对等于
*=包含这个元素
^=什么开头
$=以什么结尾
a[class=]
a[id=yu]{

}

*/

4.正则表达式

=绝对等于
*=包含这个元素
^=什么开头
$=以什么结尾

5.常用的一些样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*
        float: left;表示在左边
                color: black;黑色的字体
                background: aqua;背景颜色
                text-align: center;文本左右居中（上下没有居中）
                border-radius: 5px;圆角
                height: 50px;背景的高度
                font-weight: bold;字体的粗细
                width: 50px;背景的宽度
                text-decoration: none;下划线失效，这样子链接的下划线就会消失
                font:bold 20px/50px Arial;分别是字体的粗细，文本的高度 还有字体风格（只要文本高度和背景高度一致就可以上下居中）
                line-height: 50px;(这个也是调节文本高度的，和上面的有相同的用处)
        */
            body a{
                float: left;
                color: black;
                background: aqua;
                text-align: center;
                border-radius: 5px;
                height: 50px;
                font-weight: bold;
                width: 50px;
                text-decoration: none;
                font:bold 20px/50px 楷体;
            }
    </style>
</head>
<body>
<a href="" class="rao">1</a>
<a href="">2</a>
<a href="">3</a>
<a href="" class="rao">4</a>
<a href="" class="rao">5</a>
<a href="">6</a>
<a href="" class="rao">7</a>

</body>
</html>

标签：伪类,标签,字体,样式表,background,选择器,css
来源： https://www.cnblogs.com/raoxin/p/16107586.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9