day48

参考：https://www.cnblogs.com/liwenzhou/p/7999532.html

CSS的几种引入方式

行内样式

行内式是在标记的style属性中设定CSS样式，不推荐大规模使用，作用范围小，优先级最高。

<p style="color: red">Hello world.</p>

内部样式

嵌入式是将CSS样式集中写在网页的<head></head>标签对的<style></style>标签对中。格式如下：

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        p{

            background-color: #2b99ff;

        }

    </style>

</head>

整个h3的颜色都被更改。

外部样式

外部样式就是将css写在一个单独的文件中，然后在页面进行引入即可。推荐使用此方式。

<link href="mystyle.css" rel="stylesheet">

CSS选择器

基本选择器

1.元素选择器

2.ID选择器

3.类选择器

p(元素)

#p2(ID)    尽量不要使用  需要保证id的属性值具有唯一性 JavaScript: 对象document,方法getElementById("one")，标签变成了对象，只要找到就不找了。

.c1(类)     标签中的class属性如果有多个，要用空格分隔。

￥￥￥￥￥￥￥￥￥￥￥￥￥￥￥￥￥￥￥￥￥￥￥￥￥￥￥￥￥￥￥￥￥￥￥￥￥￥￥￥￥￥￥￥￥￥￥￥￥￥￥￥￥￥￥￥￥￥￥￥￥￥￥￥￥￥￥￥￥￥￥￥￥￥￥￥￥￥￥￥4

组合选择器

1.后代选择器

2.儿子选择器

3.毗邻选择器

4.弟弟选择器

后代选择器 #d1 p{color: red;}  从id为d1的标签中找到所有p标签,全部后代

d1内所有的p都被设定。

儿子选择器 #d1>p{color:green;} 只对d1的下一级有效。  所以第一行颜色为绿色

毗邻选择器 div+p{color: orangered;} 设置的是div下面的一个p    222本应该是orangered

弟弟选择器 div~p{color: magenta;} 与div同级，且在之后的所有p标签   222,333本覆盖为粉色

毗邻选择器举例

<!--相邻选择器选择每个div紧邻后的一个元素p-->

<style>

   div+p{

     color: red;

   }

</style>

<div>

   <p>not red text</p>

   <p>not red text</p>

</div>

<p>red text</p>

<p>not red text</p>

运行结果：

not red text

not red text

red text

not red text

属性选择器

只将输入的用户名改变颜色。

分组和嵌套

分组

当多个元素的样式相同的时候，我们没有必要重复地为每个元素都设置样式，我们可以通过在多个选择器之间使用逗号分隔的分组选择器来统一设置元素样式。

例如：
div, p {

  color: red;

}

上面的代码为div标签和p标签统一设置字体为红色。

通常，我们会分两行来写，更清晰:
div,

p {

  color: red;

}

嵌套

多种选择器可以混合起来使用，比如：.c1类内部所有p标签设置字体颜色为红色。

.c1 p {

  color: red;

}

优先级查看参考链接，或者看day48。

伪类选择器

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>伪类选择器示例</title>

    <style>

        a:link{

            color: red;

        }

        /*如果已经访问改变颜色*/

        a:visited{

            color: green;

        }

        /*鼠标移动到链接上改变颜色*/

        a:hover{

            color: hotpink;

        }

        /*点击瞬间改变颜色*/

        a:active{

            color: black;

        }

        /*input获取光标时,背景变色*/

        input:focus{

            outline: 0;

            background-color: deeppink;

        }

    </style>

</head>

<body>

<a href = "https://www.douban.com">豆瓣</a>

<div id = "d1">我是div标签</div>

<input type="text">

</body>

</html>

伪元素选择器

first-letter

常用的给首字母设置特殊样式：

p:first-letter {

  font-size: 48px;

  color: red;

}

before

/*在每个<p>元素之前插入内容*/

p:before {

  content:"*";

  color:red;

}

after

/*在每个<p>元素之后插入内容*/

p:after {

  content:"[?]";

  color:blue;

}

before和after多用于清除浮动。

举例：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>伪元素选择器示例</title>

    <style>

        p:first-letter{

            font-size: 48px;

            color: red;

        }

        .c1:before{

            content: "*";

            color: red;

        }

        .c1:after{

            content: "[?]";

            color: blue;

        }

    </style>

</head>

<body>

<p>

    在苍茫的大海上,狂风卷积着乌云

    在苍茫的大海上,狂风卷积着乌云

    在苍茫的大海上,狂风卷积着乌云

    在苍茫的大海上,狂风卷积着乌云

</p>

<p class="c1">在苍茫的大海上,狂风卷积着乌云.</p>

<p class="c1">在苍茫的大海上,狂风卷积着乌云.</p>

<p class="c1">在苍茫的大海上,狂风卷积着乌云.</p>

</body>

</html>

字体属性

文字字体

font-family可以把多个字体名称作为一个“回退”系统来保存。如果浏览器不支持第一个字体，则会尝试下一个。浏览器会使用它可识别的第一个值。
 
简单实例：
body {

  font-family: "Microsoft Yahei", "微软雅黑", "Arial", sans-serif

}

字体大小

p {

  font-size: 14px;

}

如果设置成inherit表示继承父元素的字体大小值。

字重（粗细）

font-weight用来设置字体的字重（粗细）。

值 描述
normal 默认值，标准粗细
bold 粗体
bolder 更粗
lighter 更细
100~900 设置具体粗细，400等同于normal，而700等同于bold
inherit 继承父元素字体的粗细值

文本颜色

颜色属性被用来设置文字的颜色。

颜色是通过CSS最经常的指定：

  • 十六进制值 - 如: ＃FF0000
  • 一个RGB值 - 如: RGB(255,0,0)
  • 颜色的名称 - 如:  red

还有rgba(255,0,0,0.3)，第四个值为alpha, 指定了色彩的透明度/不透明度，它的范围为0.0到1.0之间。

文字属性

文字对齐

text-align 属性规定元素中的文本的水平对齐方式。

值 描述
left 左边对齐 默认值
right 右对齐
center 居中对齐
justify 两端对齐

文字装饰

text-decoration 属性用来给文字添加特殊效果。

值 描述
none 默认。定义标准的文本。
underline 定义文本下的一条线。
overline 定义文本上的一条线。
line-through 定义穿过文本下的一条线。
inherit 继承父元素的text-decoration属性的值。

常用的为去掉a标签默认的自划线：

a {

  text-decoration: none;

}

首行缩进

将段落的第一行缩进 32像素：

p {

  text-indent: 32px;

}

举例：

HTML

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>字体属性测试</title>

    <link rel="stylesheet" href="test.css">

</head>

<body>

<h1>海燕</h1>

<p>在苍茫的大海上</p>

<p class="c0">默认的p</p>

<!--字体粗细-->

<p class="c1">100 c1</p>

<p class="c2">900 c2</p>

<p class="c3">《我的名字叫红》是土耳其作家奥尔罕·帕穆克创作的长篇小说，首次出版于1998年。该小说讲述16世纪末，离家12年的青年黑终于回到他的故乡——伊斯坦布尔，迎接他归来的除了爱情，还有接踵而来的谋杀案。一位细密的画家失踪了，奉命为苏丹绘制抄本的长者也惨遭杀害。</p>

<div class="c3">《我的名字叫红》</div>

<a href="https://www.douban.com">豆瓣</a>

</body>

</html>

CSS:

/* *全局 */
* {

    /*字体*/

    font-family: ".PingFang SC", "微软雅黑", "Microsoft YaHei", "Arial";

    /*字体大小*/

    font-size: 14px;

    /*字重*/

    font-weight:;

}

.c1{

    font-weight:;

}

.c2 {

    /*粗细设置 */

    font-weight:;

    /*颜色*/

    color: rgb(255,0,0);

}

.c3{

    /*居中*/

    text-align: left;

    /*右对其*/

    /*text-align: justify;*/

    /*下划线*/

    text-decoration: underline;

    /*缩进*/

    text-indent: 28px;

}

/*将超链接的下划线去掉*/

a {

    text-decoration: none;

}

前端入门CSS(1)的更多相关文章

  1. 前端入门CSS(2)

    参考: https://www.cnblogs.com/liwenzhou/p/7999532.html 背景属性 /*背景颜色*/background-color: red; /*背景图片*/ ba ...

  2. 前端入门CSS(3)

    day60 不透明度 opacity()\ opacity (不透明度)             1. 取值0~1             2. 和rgba()的区别:                ...

  3. 结合个人经历总结的前端入门方法 (转自https://github.com/qiu-deqing/FE-learning)

    结合个人经历总结的前端入门方法 (https://github.com/qiu-deqing/FE-learning),里面有很详细的介绍. 之前一直想学习前端的,都不知道怎么下手都一年了啥也没学到, ...

  4. web前端入门：一小时学会写页面

    一小时学会写页面 作为一个懒癌晚期患者,总是习惯找各种简单的解决问题的方法,也习惯性把问题简单化,所以今天想分享给大家简单的web前端入门方法.既然题目已经定了一个小时那么废话就不多说了,计时开始 1 ...

  5. 前端入门3-CSS基础

    本篇文章已授权微信公众号 dasu_Android(大苏)独家发布 声明 本系列文章内容全部梳理自以下四个来源: <HTML5权威指南> <JavaScript权威指南> MD ...

  6. 2019年Web前端入门的自学路线

    本文最初发表于博客园,并在GitHub上持续更新前端的系列文章.欢迎在GitHub上关注我,一起入门和进阶前端. 以下是正文.本文内容不定期更新. 我前几天写过一篇文章:<裸辞两个月,海投一个月 ...

  7. webpack快速入门——CSS进阶：自动处理CSS3前缀

    为了浏览器的兼容性,有时候我们必须加入-webkit,-ms,-o,-moz这些前缀.目的就是让我们写的页面在每个浏览器中都可以顺利运行. 1.安装 cnpm i postcss-loader aut ...

  8. webpack快速入门——CSS文件打包

    1.在src下新建css文件,在css文件下新建index.css文件,输入以下代码 body{ background:pink; color:yellowgreen; } 2.css建立好后,需要引 ...

  9. webpack快速入门——CSS中的图片处理

    1.首先在网上随便找一张图片,在src下新建images文件夹,将图片放在文件夹内 2.在index.html中写入代码:<div id="pic"></div& ...

随机推荐

  1. Redis的复制特性

    对于有扩展平台以适应更高负载经验的工程师和管理员来说,复制(replication)是不可或缺的.复制可以让其他服务器拥有一个不断更新的数据副本,从而使得拥有数据副本的服务器可以用于处理客户端发送的读 ...

  2. 构建openssl debug版

    一.简介 作为一种安全协议,openssl囊括了主要的密码算法.常用的密钥和证书封装管理功能以及SSL协议,并提供了丰富的应用程序供测试或其它目的使用. 参考: http://www.linuxidc ...

  3. 关于前一篇innodb自增列自己的一点补充

    上篇文章是我转载的,忘记注明了出处,在这里深感歉意.但是上篇文章中关于自增列预留ID的计算我当时怎么弄明白,后来自己想了想终于想通了,在这里详细解释一下. 我们以一次性插入10行为例,表格如下:  插 ...

  4. 白盒静态自动化测试工具：PMD使用指南

    参考文献:http://www.oschina.net/p/pmd/http://www.cnblogs.com/flyme/archive/2011/09/09/2172548.htmlhttp:/ ...

  5. MySQL 组合查询 concat

      concat( pms_user.f_pu_name, '(' , pms_user.f_pu_realName,')') as userIds

  6. NSNotificationCenter 注意

    成对出现 意思很简单,NSNotificationCenter消息的接受线程是基于发送消息的线程的.也就是同步的,因此,有时候,你发送的消息可能不在主线程,而大家都知道操作UI必须在主线程,不然会出现 ...

  7. 2018.09.19 atcoder Card Game for Three（组合数学）

    传送门 简单组合数学想优化想了半天啊233. 我们只需考虑翻开n张A,b张B,c张C且最后一张为A的选法数. 显然还剩下m+k−b−cm+k-b-cm+k−b−c张牌没有选. 这样的话无论前n+b+c ...

  8. Exception: java.io.FileNotFoundException: D:\Users\liuyangOS2237\Workspaces\MyEclipse%2010\Zhuce\WebRoot\WEB-INF\classes\users.xml (系统找不到指定的路径。解决

    com.exception.DaoException: java.io.FileNotFoundException: D:\Users\liuyangOS2237\Workspaces\MyEclip ...

  9. python与JavaScript中正则表达式如何转换

    使用python爬取网站数据的时候,总会遇到各种各样的反爬虫策略,有很大一部分都和JavaScript(以下简称为JS) 有关.在破解这些JS代码的过程中,经常会遇到模拟JS正则表达式的情况,因此,今 ...

  10. 20155209 2016-2017-2 《Java程序设计》第八周学习总结

    20155209 2016-2017-2 <Java程序设计>第八周学习总结 教材学习内容总结 Java NIO(New IO)是一个可以替代标准Java IO API的IO API(从J ...