前端学到残废的入门程序员-01

最新推荐文章于 2024-08-01 21:05:12 发布

慕凡12138

最新推荐文章于 2024-08-01 21:05:12 发布

阅读量279

点赞数

分类专栏：前端学到残废的入门程序员文章标签： web

本文链接：https://blog.csdn.net/MFryudo/article/details/110285962

版权

前端学到残废的入门程序员专栏收录该内容

1 篇文章 0 订阅

订阅专栏

前端学到残废的入门程序员

引言

论如何逼疯一个转行程序员，那就让他去学web前端吧。这真的是太崩溃了吧，很多时候做web都会写着写着就崩溃了，真的是做了一个月，然后全部推到重写。哎，崩溃的我又来学习web前端了，走起走起。

CSS介绍

css(Cascading Style Sheets)层叠样式表，用来定义如何显示HTML元素。也就是说，这个css可以定义html中的各种元素是以什么样式展现在我们眼前，让我们在对网页进行编写的时候可以让html更加简洁易懂，不会是把每一个定义都写在html的元素中，从而再后期维护时出现反复更改的问题。
在同一个html元素被多种样式重复定义是，会按照优先级进行选择。优先级由高到低为：内联样式（HTML元素内部） > 内部样式表（head标签内部） > 外部样式表 > 浏览器缺省样式

举例

内联样式：

<body>
<p style="font-size: 5em">多种样式表</p>
</body>

内部样式表：

<head lang="en">
    <meta charset="utf-8">
    <title>样式表</title>
        <style>
        p{
            font-size: 4em;
        }
        </style>
</head>

外部样式表：

<head lang="en">
    <meta charset="utf-8">
    <title>样式表</title>
    <link rel="stylesheet" href="css/chapter4.css"/>
</head>

p{
    font-size: 3em;
    color: blanchedalmond;
}

##选择器

以内部样式表的演示讲解选择器。

元素选择器

<head lang="en">
    <meta charset="UTF-8">
    <title>选择器</title>
    <style>
        p{
            color:darkcyan;
        }
        h1,h2,h3,h4,h5,h6{
            color:burlywood;
        }
    </style>
</head>
<body>
<p>单个元素选择器</p>
<h1>标题1</h1>
<h2>标题2</h2>
<h3>标题3</h3>
<h4>标题4</h4>
</body>

派生选择器

li strong{
    font-style:italic;
    font-weight:normal;
}

<strong>派生选择器</strong>测试<br>
<li><strong>派生选择器</strong>测试</li><br>

id选择器

#sty{
    font-size:20px;
    color:chocolate;
    font-weight:bold;
}
<div id="sty">id选择器</div>

/* id选择器的派生选择器 */
#sty p{
    font-style:italic; /* 斜体 */
    text-align:right; /* 文本对齐方式，靠右对齐 */
    margin-top:0.5em; /* 距离上一个元素的间距 */
}
<div id="sty">id选择器
<p>id选择器的派生选择器</p>
</div>

类选择器

.center{
    font-size:2em;
    font-family:"宋体";
    text-align:center;
    margin-top:0.5em;
}
<p class="center">类选择器</p>

/* 类选择器的派生选择器 */
table{
    margin: 0 auto;
}
.center{
    font-size:2em;
    font-family:"宋体";
    text-align:center;
    margin-top:0.5em;
}
.center id{
    background-color:burlywood;
    color:darkcyan;
}

基于元素的类选择器

td.tsty{
    background-color:darkcyan;

属性选择器

   <style>
        p{
            font-size: 2em;
        }
        /*元素中设置了title属性*/
        [title]{
            color: darkseagreen;
        }
        /*元素中设置了title属性且title属性值为ti*/
        [title='ti']{
            font-weight: bold;
        }
        /* 包含指定值hello的 title 属性的所有元素设置样式。适用于由空格分隔的属性值 */
        [title~=hello] {
            color:red;
        }
        /*title属性值为hello或由hello通过-连接的字符*/
        [title|=hello]{
            color: blanchedalmond;
        }

        /*属性选择器在为不带有 class 或 id 的表单设置样式,所有type=text的输入框均采用这种如下样式,*/
        input[type="text"] {
            width:150px;
            background-color:yellow;
            font-family: Verdana, Arial;
        }
    </style>
</head>
<body>
<p>1==莫因诗卷愁成 <ruby>谶<rt>chen</rt></ruby>，春鸟秋虫自作声。</p>
<p title="test">2==十有九人堪白眼，百无一用是书生。</p>
<p title="ti">3==风蓬飘尽悲歌气，泥絮沾来薄幸名。</p>
<p title="hello world">4==hello world</p>
<p title="world hello">5==world hello</p>
<p title="world-hello">6==world-hello</p>
<p title="hello">7==hello</p>
<p title="hello-world">8==hello-world</p>

<form action="#" method="get">
    用户名:<input type="text"/><br/>
    地&nbsp;&nbsp;&nbsp;址:<input type="text"/><br/>
</form>

/*
[attribute]       用于选取带有指定属性的元素。
[attribute=value]  用于选取带有指定属性和值的元素。
[attribute~=value] 用于选取属性值中包含指定词汇的元素。
[attribute|=value] 用于选取带有以指定值开头的属性值的元素，该值必须是整个单词
[attribute^value]  匹配属性值以指定值开头的每个元素
[attribute$=value] 匹配属性值以指定值结尾的每个元素
[attribute*=value] 匹配属性值中包含指定值的每个元素
*/