前端基础之CSS

摘要

CSS（层叠样式表）的三种设置方法
基本选择器
组合选择器
属性选择器
分组与嵌套
伪类选择器
伪元素选择器
选择器的优先级
一些样式的设置（字体、文本、背景、边框）
display属性设置

01.CSS（层叠样式表）的三种设置方法

CSS又名层叠样式表，它的作用就是给HTML网页进一步装饰，前面我们学习HTML结构的时候其实就是学习了HTML的一个大的骨架结构，后面学习的表form表单展现的形式是很low的，需要进一步对齐修饰设置，让它变得更高大上起来，这就离不开CSS的知识。
- 层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。
- CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。
语法结构：选择器 {属性：属性值；属性：属性值}
注释形式：/*这是注释内容*/
/*多行注释内容1
多行注释内容2
*/
三种设置方法：

head里面style中写css：<style>p {color: red}</style>
head里面link引入css文件：<link rel="stylesheet" href="my_scc_02.css">
在标签内直接指定style：<p style="color: red">hello world!</p>

我们在设置不同种类标签内容的样式的时候，需要知道我们修改的标签的位置，接下来看看如何精确定位设置样式的位置，才能设置其样式。

02.基本选择器

标签通常同的属性有：id和class类

标签选择器：根据标签种类来设置该类标签样式
id选择器：每个标签都可以设置一个id在唯一标识它，所以我们可以通过这个id来定位到该标签位置，从而进行修改样式操作，id前面注意要加上#
类选择器：在标签里面设置class="c1"，c1是一个类的设置样式，在style里定义的时候前面需要加点（.c1 {color：red}）

通用选择器：类似这种* {color： blue}，*代表所有标签，意思就是所有都全部设置

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>CSS学习测试</title>

    <style>

        p {color: gold}

        .c1 {color: mediumturquoise}

        #p1 {color: blue}

        * {color: red}

    </style>

</head>

<body>

<p>我要记住你的样子</p>

<div>像鱼记住水的拥抱</div>

<span>像云在天空中停靠</span>

<h3 class="c1">夜晚的来到</h3>

<p id="p1">也不会忘了阳光的温暖</p>
</body>
（涉及查找优先级的问题，在后面会谈及。）

03.组合选择器（span套span，不符合html5规则）

后代选择器==>div span：div里面所有的span

<div>

    01我要忘了你的样子

    <br>

    <span>

        02像鱼忘了海的味道

        <br>

        <span>

            03放下所有梦和烦恼

        </span>

    </span>

</div>

儿子选择器==>div>span：div里面儿子一层（第一层）所有的span

<style>

        div>span {color: deeppink}

    </style>

<div>主div

    <div>主div的儿子1

        <span>主div的孙子1</span>

    </div>

    <p>主div的儿子2

        <span>主div的孙子2</span>

    </p>

</div>

毗邻选择器==>div+span：div下面挨着的span

<style>

        div+span {color: deeppink}

</style>

<div>主div

    <p>主div的儿子2

        <span>主div的孙子2</span>

    </p>

</div>

<span>div下面的第一个span</span>

<span>div下面的第二个span</span>

弟弟选择器==>div~span：与div同一级且下面所有的标签

    <style>

        div~span {color: deeppink}

    </style>

<div>主div

    <p>主div的儿子2

        <span>主div的孙子2</span>

    </p>

</div>

<span>div下面的第一个span</span>

<span>div下面的第二个span</span>

04.属性选择器

在标签内自定义一个属性，用于找到该标签的作用。

    <style>

        [xxx] {color: deeppink}

    </style>

<p xxx>自定义属性xxx</p>

<p xxx="1">自定义属性+值1</p>

<p xxx="2">自定义属性+值2</p>

<p id="xxx">我是打酱油的！</p>

    <style>

        [xxx='1'] {color: deeppink}

    </style>

<p xxx>自定义属性xxx</p>

<p xxx="1">自定义属性+值1</p>

<p xxx="2">自定义属性+值2</p>

<p id="xxx">我是打酱油的！</p>

    <style>

        [xxx='2'] {color: deeppink}

    </style>

<span xxx="2">我是span,我的属性里有xxx</span>

<p xxx>自定义属性xxx</p>

<p xxx="1">自定义属性+值1</p>

<p xxx="2">自定义属性+值2</p>

<p id="xxx">我是打酱油的！</p>

05.分组与嵌套

分组：

<style>

    div,p,span {color: red}

</style>

<div>我是div</div>

<p>我是一个p</p>

<span>我是span</span>

嵌套：

<style>

    div p,span {color: red}

</style>

<div>我是div

    <p>我是div里面的一个p</p>

    <span>我是div里面的span</span>

</div>

<p>我是一个p</p>

<span>我是span</span>

div p嵌套关系，然后div和span是组合关系，所以：

06.伪类选择器

a标签的四种状态：

    <style>

        a {text-decoration: none}   /*去掉下划线*/

        a:link {color: green}       /*链接什么都不干的时候颜色*/

        a:hover {color: red}        /*鼠标放在链接上面不做任何动作时候变的颜色*/

        a:active {color: blue}      /*鼠标点击链接时候，链接的颜色*/

        a:visited {color: gray}     /*当这个链接已经点击过，将变成的颜色*/

    </style>

<p><a href="#我是下面" id="我是上面">点我跳到下面</a></p>

<p><a href="http://www.t66y.com" target="_blank">点我开启新的人生篇章(爬梯吧）</a></p>

<p><a href="http://www.baidu.com" target="_blank">百度一下</a></p>

<p><a href="#我是上面" id="我是下面">点我跳到上面</a></p>

获取焦点：让输入框在选中时候，背景颜色变成自定义颜色

    <style>

        input:focus {background-color: yellow}

    </style>

<form action="">

    <label for="a1">用户: <input type="text" id="a1" name="username"></label>

    <label for="a2">用户: <input type="password" id="a2" name="password"></label>

    <input type="submit">

</form>

07.伪元素选择器

伪元素选择器：将某一标签的第一个，开头、结尾处设置样式。

first-letter

    <style>

        p:first-letter {color: red;

                        font-size: 24px}

    </style>

<p>我闻西方大士，</p>

<p>为人了却凡心。</p>

<p>秋来明月照蓬门，</p>

<p>香满禅房幽径。</p>

<p>屈指灵山会后，</p>

<p>居然紫竹成林。</p>

<p>童男童女拜观音，</p>

<p>仆仆何嫌荣顿？</p>

before：

   <style>

        p:before {content: '△';

                  color: red;

                  font-size: 24px}

    </style>

<p>万物由道而生，循着道成长，而后又回归于道。</p>

<p>人可以毁灭，但不可以屈服。</p>

<p>你要克服的是你的虚荣心，是你的炫耀 欲，你要对付的是时时刻刻想出风头的小聪明。</p>

after:

    <style>

        p:after {content: '☆';

                  color: red;

                  font-size: 24px}

    </style>

<p>包租婆，怎么就没有水了呢</p>

<p>维护世界和平就靠你了,我这里有本秘籍,见与你有缘,就十块钱卖给你了.</p>

08.选择器的优先级

相同选择器，不同的引入方式：就近原则（从上往下生效），看哪个style里标签更近。
不同选择器，不同引入方式：行内样式>id选择器>类选择器>标签选择器

09.一些样式的设置（字体、文本、背景、边框）

块儿级标签的宽度和长度：

     <style>

        div {width: 800px; height: 100px;background-color: mediumspringgreen}

    </style>

<div>樊登读书，改变你我</div>

字体相关设置（大小、自重、颜色）：

    <style>

        p {font-size: 24px;

           font-weight: lighter;

           color: #FF6700;

        /*color: rgb(0,0,255);*/

        /*color: rgba(0,0,255,0.2)}   最后的0.2是透明度（0-1之间）*/

    </style>

<p>面朝大海，春暖花开</p>

文本属性：（通常给a标签用）

    <style>

        p {text-align: center;

        text-decoration: line-through}

    </style>

<p>浪花一朵朵</p>

<p>桃花朵朵开</p>

去掉跳转文字的下划线：

    <style>

        a {text-decoration: none}

    </style>

<a href="http://www.baidu.com">百度一下</a>

<a href="http://www.google.com">谷歌一下</a>

背景属性：

    <style>

        .c1 {

        height: 200px;

        background: url("20190529[21-04].png") blue no-repeat center;

        }

        .c2 {height: 200px;background-color: tomato}

        .c3 {height: 200px;background-color: yellow}

        .c4 {height: 200px;background-color: greenyellow}

    </style>

</head>

<body>

<div class="c1"></div>

<div class="c2"></div>

<div class="c3"></div>

<div class="c4"></div>

边框：

    <style>

        div {border: 1px dashed red}

    </style>

<div>我是一条鱼</div>

画圆：

    <style>

        div {

            width: 400px;

            height: 400px;

            background-color: red;

            border: 2px dashed black;

            border-radius: 50%;

        }

    </style>

<div></div>

10.display属性设置（设置不显示，不会继续占用位置）

display：none

    <style>

        [xxx] {display: none}    /*设为none代表含xxx属性标签的内容都不显示，且不再占用原位置

    </style>

<div>开头1</div>

<div xxx>看我显示没有1</div>

<div xxx>看我显示没有1</div>

<div>结尾2</div>

display:inline 将块级标签变成行内标签

    <style>

        div {

            height: 300px;

            width: 200px;

            background-color: aquamarine;

            display: inline;

        }

    </style>

<div>天天</div>

<div>年年</div>

display:block 将行内标签变成块级标签

    <style>

        span {display: block}

    </style>

<span>美好的事情</span>

<span>即将到来</span>

display ：inline-block 让span标签具有独占一行且可以设置长宽

    <style>

        span {

            width: 120px;

            height: 400px;

            background-color: bisque;

            border: 2px solid red;

            display: inline-block;

        }

    </style>

<span>第一个span</span>

<span>第二个span</span>

前端基础之CSS_1的更多相关文章

web前端基础知识及快速入门指南
web前端基础知识及快速入门指南做前端开发有几个月了,虽然说是几个月,但是中间断断续续的上课.考试以及其它杂七杂八的事情,到现在居然一直感觉自己虽然很多前端的知识很眼熟,却也感觉自己貌似也知识在门口 ...
html css 前端基础学习方法及经验分享
前言: 入园第一天,想分享一点儿前端基础html css 的学习方法和一些经验给热爱前端,但是不知道从哪儿开始,依旧有些迷茫的新手朋友们.当然,适合每个人的学习方式不同,以下所讲的仅供参考. 一.关于 ...
HTML+DIV+CSS+JSweb前端基础
HTML+DIV+CSS+JSweb前端基础 1.<html>和</html> 标签限定了文档的开始和结束点. 属性: (1) dir: 文本的显示方向,默认是从左向右 (2 ...
前端基础面试题(JS部分)
1.几种基本数据类型?复杂数据类型?值类型和引用数据类型?堆栈数据结构? 基本数据类型:Undefined.Null.Boolean.Number.String 值类型:数值.布尔值.null.und ...
前端基础之DOM和BOM
前端基础之DOM和BOM JavaScript分为 ECMAScript,DOM,BOM. BOM(Browser Object Model)是指浏览器对象模型,它使 JavaScript 有能力与浏 ...
tableview前端基础设计（初级版）
tableView前端基础设计实现的最终效果操作目的:熟悉纯代码编辑TableView和常用的相关控件SearchBar.NavigationBar.TabBar等,以及布局和基本功能的实现. 一 ...
web前端基础学习路线
1.HTML和CSS的基础知识,完成网页的初步设计 2.JavaScript基础知识和DOM.BOM的学习 3.前端基础框架:CSS框架Bootstrap.JavaScript框架jquery的熟悉使 ...
JS BOM DOM对象 select联动计时器时间 css操作节点(标签 ) 查找标签 {前端基础之BOM和DOM}
前端基础之BOM和DOM 前戏到目前为止,我们已经学过了JavaScript的一些简单的语法.但是这些简单的语法,并没有和浏览器有任何交互. 也就是我们还不能制作一些我们经常看到的网页的一些交互,我 ...
前端基础进阶（五）：全方位解读this
https://segmentfault.com/a/1190000012646488 https://yangbo5207.github.io/wutongluo/ 说明:此处只是记录阅读前端基础 ...

随机推荐

安装elasticsearch-rtf出错
出错信息: elasticsearch-rtf Caused by: java.lang.IllegalStateException: No match found 解决方法: 参考:https: ...
51Nod 1021 石子归并（动态规划）
#include <iostream> #include <algorithm> #include <string> #include <iostream&g ...
Subsequence HDU - 3530
Subsequence HDU - 3530 方法:单调队列区间最大最小错误记录(本地写错)的原因:写成每次试着扩展右端点,却难以正确地处理"在多扩展右端点之后减去多扩展的部分" ...
CentOS 6.9:MySQL Daemon failed to start.
[root@Server_1 12:02:58 ~ 25]#service mysqld start MySQL Daemon failed to start.Starting mysqld: [ro ...
Windows下降权MYSQL和apche的运行级别(普通用户权限运行)
1.MYSQL的降权运行新建立一个用户比如mysql net user mysql microsoft /add net localgroup users mysql /del 不属于任何组 ...
.net服务端生成二维码
mvc4 net4.0 1.引用附件的DLL文件 2.两个函数即可 #region 生成二维码 public ActionResult getQrCode() { using (var ms = ...
XCode调试器LLDB
与调试器共舞 - LLDB 的华尔兹你是否曾经苦恼于理解你的代码,而去尝试打印一个变量的值? NSLog(@"%@", whatIsInsideThisThing); 或者跳过一 ...
SQL的top 100 percent用法
sql="select top 30 * from data where title='"&title1&"' order by id desc" ...
SQLite-Like语句
SQLite – LIKE子句使用SQLite LIKE运算符用于匹配文本.如果搜索表达式可以匹配模式表达式,如操作符将返回true,这是1.有两个通配符与Like操作符一起使用: The per ...
Oracle的Central Inventory和Local inventory详解
很多朋友对Oracle的inventory信息不太了解以至遇到相关的问题不知道如何处理,这篇文章我们将详细讲解Oracle的Central Inventory (oraInventory)和Local ...

前端基础之CSS_1

前端基础之CSS_1的更多相关文章

随机推荐

热门专题