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

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


引言

论如何逼疯一个转行程序员,那就让他去学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] 匹配属性值中包含指定值的每个元素
*/
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值