css使用1

一、引入css的三种方式

一、CSS（Cascading Style Sheet）：层叠样式表

二、CSS样式由两个组成部分：选择器和声明。声明又包括属性和属性值。每个声明之后用分号结束

    语法结构

        选择器 {属性:属性值;属性:属性值;属性:属性值;}


三、注释：

        /*单行注释*/

        /*

        多行注释

        多行注释

        */

四、三种引入css样式的方式

        内部样式：

                head内style标签内部直接书写css代码

        外部样式：

                link标签引入外部css文件

        行内样式：

                直接在标签内通过style属性书写css样式

        ps:注意页面css样式通常都应该写在单独的css文件中

五、学习CSS的流程：

    、先查找标签：

            ①基本选择器

                标签选择器

                id选择器

                类选择器

                通用选择器

            ②组合选择器

                后代选择器

                儿子选择器

                毗邻选择器

                弟弟选择器

            ③属性选择器

            ④伪类选择器

            ⑤伪元素选择器

    、再修改标签样式

            字体大小

            文本颜色

            背景属性

            边框

            画圆

            display属性

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    ①head内style标签内部直接书写css代码

    <style>

        p {color: red;}

    </style>

    ②link标签引入外部css文件

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

</head>

<body>

③直接在标签内通过style属性书写css样式

<p style="color: yellow">我是一个p标签</p>

</body>

</html>

二、基本选择器

基本选择器：

        ①标签选择器：所有的span都是红色

            span {color: red}

        ②id选择器：指定的id

            <span id="s1">span</span>

            #s1 {font-size: 24px;}

        ③类选择器:div以及div里面的标签

            <div class="y1">div

            .y1 {color: yellow;}

        ④通用选择器：所有的标签

            * {color: blue;}<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        span {color: red;}

        #x1 {font-size: 24px;}

        .y1 {color: yellow;}

        * {color: blue;}

    </style>

</head>

<body>

<span id="x1">span</span>

<div class="y1">div

    <p>p

        <span>span</span>

    </p>

</div>
<div>div</div>

</body>
</html>

三、组合选择器

组合选择器：

        ①后代选择器:div中所有的标签

            div {color: blue;}

        ②儿子选择器：div的下一代的span

            div>span {color: yellow;}

        ③毗邻选择器：与div最近的那个同级span

            div+span {color: green;}

        ④弟弟选择器：div下面所有的同级span，对下不对上

            div~span {color: red;}

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        div {color: blue;}

        div>span {color: yellow;}

        div+span {color: green;}

        div~span {color: red;}

    </style>

</head>

<body>

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

<div>

    <span>我是div里面的第一个span</span>

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

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

    </p>

    <span>我是div里面的第二个span</span>

</div>

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

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

</body>

</html>

四、属性选择器

属性选择器：

    ①所有属性为xxx的标签

        [xxx] {color: red}

    ②xxx=''的标签

        [xxx=''] {color: green}

    ③p里面的xxx=''的标签

        p[xxx=''] {color: yellow}

　　④以xxx='2'开头的标签
　　　　[xxx^='2'] 

　　⑤以xxx='2'结尾的标签
　　　　[xxx$='2']

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        [xxx] {color: red;}

        [xxx=''] {color: green;}

        p[xxx=''] {color: yellow;}

    </style>

</head>

<body>

<span xxx="">span</span>

<p xxx>我只有属性名</p>

<p xxx="">我有属性名和属性值并且值为1</p>

<p xxx="">我有属性名和属性值并且值为2</p>

</body>

</html>

五、分组与嵌套选择器

①分组：当多个元素的样式相同的时候，我们没有必要重复地为每个元素都设置样式，

      我们可以通过在多个选择器之间使用逗号分隔的分组选择器来统一设置元素样式

      div,p,span {color: yellow}

②嵌套：不同的选择器可以共用一个样式

    div p,span {color: blue}

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        div {color: yellow;}

        p {color: yellow;}

        span {color: yellow;}

        div,p,span {color: yellow}   # 分组

        div p,span {color: blue}     # 嵌套

    </style>

</head>

<body>

<div>div</div>

<p>p</p>

<span>span</span>

</body>

</html>

六、伪类选择器

    ①网页重来没有被点过显示的颜色

        a:link {color: red;}

    ②鼠标放上标签时的颜色

        a:hover {color: yellow}

    ③鼠标点击标签时的颜色

        a:active {color: black}

    ④网页被点过后标签显示的颜色

        a:visited {color: green}

    ⑤聚焦：点击输入框之后显示的输入框背景颜色

        input:focus {background-color: red}

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        a:link {color: red;}

        a:hover {color: yellow}

        a:active {color: black}

        a:visited {color: green}

        input:focus {background-color: red}

    </style>

</head>

<body>

<a href="https://www.baidu.com">百度</a>

<a href="http://www.xiaohuar.com">校花网</a>

<a href="http://www.sogo.com">搜狗</a>

<input type="text">

</body>

</html>

七、伪元素选择器

    ①段落第一个汉字标红和字体变大

        p:first-letter {color: red; font-size: 24px}

    ②段落最前加上￥￥，颜色是绿色

        P:before {color: green; content: '￥￥'}

    ③段落最后加上￥￥， 颜色是黄色

        p:after {color: yellow; content: '￥￥';}

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        p:first-letter {color: red; font-size: 24px;}

        P:before {color: green; content: '￥￥';}

        p:after {color: yellow; content: '￥￥';}

    </style>

</head>

<body>

<p>继承是CSS的一个主要特征</p>

<p>继承是CSS的一个主要特征</p>

<p>继承是CSS的一个主要特征</p>

<p>继承是CSS的一个主要特征</p>

</body>

</html>

八、群组选择器

选择器1.选择器2

九、多条件选择器

选择器1选择器2

十、选择器优先级

选择器优先级：

        ①相同选择器，不同的引入方式：

            就近原则，

        ②不同选择器，相同的引入方式：

            行内样式 > id选择器 > 类选择器 > 标签选择器

上面很多的选择器，在一个HTML页面中有很多种方式找到一个元素并且为其设置样式，浏览器采用样式

是按照不同选择器的权重来决定的，具体的选择器权重计算方式如下图：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        #x1 {color: green;}     # id选择器

        .y1 {color: aqua;}      # 类选择器

        p {color: red;}         # 标签

    </style>

</head>

<body>

<p id="x1" class="y1" style="color: blue">p</p>   # 行内样式

</body>

</html>

九、修改样式：字体大小

    ①width、height设置标签的宽度和高度

        div {width: 400px; height: 100px}

    ②font-size设置标签内字体的大小

        p {font-size: 24px;}

    ③font-weight设置标签内字体的粗细

        normal    默认值，标准粗细

        bold      粗体

        bolder    更粗

        lighter   更细

        p {font-weight: bolder}
　　④font：bold 30ph/30ph 'STSong'   加粗   像素/行高  华文宋体

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        div {width: 400px; height: 100px;}

        p {font-size: 24px; font-weight: bolder}

    </style>

</head>

<body>

<div>div</div>

<div>div</div>

<p>鹅鹅鹅，曲项向天歌，白毛浮绿水，红掌拨清波</p>

</body>

</html>

十、修改样式：文本颜色

    ①红色

        p {color: red;}

    ②一个RGB值：三个颜色选一个

        p {color: rgb(0,0,255)}

    ③颜色的标号：十六进制值

        p {color: #FF6700;}

     ④0.6指的是文本的透明度

        p {color: rgba(0,0,255,0.6);}

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        p {color: red;}

        p {color: rgb(0,0,255)}

        p {color: #FF6700;}

        p {color: rgba(0,0,255,0.6);}

    </style>

</head>

<body>

<p>鹅鹅鹅，曲项向天歌，白毛浮绿水，红掌拨清波</p>

</body>

</html>

十一、修改样式：文本属性

    ①文字对齐：text-align 属性规定元素中的文本的水平对齐方式
　　　　　　　　line-height 垂直居中

            left            左边对齐 默认值

            right           右对齐

            center          居中对齐

            justify         两端对齐

    ②文字装饰：text-decoration 属性用来给文字添加特殊效果

            none            默认,定义标准的文本。

            underline       定义文本下的一条线。

            overline        定义文本上的一条线。

            line-through    定义穿过文本下的一条线。

            inherit         继承父元素的text-decoration属性的值

    ③首行缩进48像素

            p {text-indent: 48px}

    ④去掉a标签默认的自带的下划线

            a {text-decoration: none;}

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        p {text-align: center;}

        p {text-decoration: underline;}

        p {text-decoration: overline;}

        p {text-decoration: line-through;}

        p {text-indent: 48px;}

        a {text-decoration: none;}

    </style>

</head>

<body>

<p>鹅鹅鹅，曲项向天歌，白毛浮绿水，红掌拨清波</p>

<a href="http://www.xiaohuar.com">校花网</a>

</body>

</html>

十二、修改样式：背景属性

    ①标签宽度和高度

        div {width: 400px; height: 400px;}

    ②背景颜色

        background-color: red;

    ③背景图片

        background-image: url('1.jpg');
　　　　　如果背景图片尺寸小于所在区域尺寸，默认情况下是铺满整个区域
　　　　　可以指定参数来控制是否铺满

    ④背景重复（指定参数）

        repeat(默认):背景图片平铺排满整个网页

        repeat-x：背景图片只在水平方向上平铺

        repeat-y：背景图片只在垂直方向上平铺

        no-repeat：背景图片不平铺

        background-repeat: no-repeat;

    ⑤背景位置

        background-position: left top;

        background-position: 200px 200px;

    简写

        div {background: no-repeat center url("1.png")}

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        div {width: 400px; height: 400px;}

        div {background-color: green;}

        div {background-image: url("1.png")}

        div {background-repeat: no-repeat}

        div {background-position: center}

        div {background: no-repeat center url("1.png")}

    </style>

</head>

<body>

<div></div>

</body>

</html>

背景图片示例：

  使用背景图片的一个常见案例就是很多网站会把很多小图标放在一张图片上，然后根据位置去显示图片。减少频繁的图片请求。

  把上传的图片固定不动

      background-attachment: fixed;

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        .a1 {height: 400px; background-color: yellow;}

        .b1 {height: 400px; background: url("1.png"); background-attachment: fixed;}

        .c1 {height: 400px; background-color: red;}

        .d1 {height: 400px; background-color: blue;}

    </style>

</head>

<body>

<div class="a1"></div>

<div class="b1"></div>

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

<div class="d1"></div>

</body>

</html>

十三、修改样式：边框

    border—style：
　　　　　

        dotted    点状虚线边框。

        dashed    矩形虚线边框。

        solid     实线边框

    红虚线边框

        div {border-size: 3px; border-style: dashed; border-color: red;}

    红实线边框

        div {border: 3px solid red}

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        div {border-size: 3px; border-style: dashed; border-color: red;}

        div {border: 3px solid red}

    </style>

</head>

<body>

<div>div</div>

</body>

</html>

红实线边框：

红虚线边框：

十四、修改样式：画圆

        红色正方形

            width: 100px;

            height: 100px;

            background-color: red;

            border: 3px solid black;

        红色圆形

            width: 100px;

            height: 100px;

            background-color: red;

            border: 3px solid black;

            border-radius:50%;

将border-radius设置为长或高的一半即可得到一个圆形。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        div {

            width: 100px;

            height: 100px;

            background-color: red;

            border: 3px solid black;

            border-radius:50%;

        }

    </style>

</head>

<body>

<div></div>

</body>

</html>

红色正方形：

红色圆形：

十五、修改样式：display属性

    ①display: none

         可以隐藏某个元素，且隐藏的元素不会占用任何空间

    ②display: block

        默认占满整个页面宽度，如果设置了指定宽度，则会用margin填充剩下的部分。

    ③display: inline

        inline将块儿级标签变成行内标签。此时再设置元素的width、height、margin-top、margin-bottom和float属性都不会有什么影响。

    ④display: inline-block

        使元素同时具有行内元素和块级元素的特点。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        div {display: none;}

        div {display: inline;}

        span {display: block;}

        span {display: inline-block;}

    </style>

</head>

<body>

<div>div</div>

<div>div</div>

<span>span</span>

<span>span</span>

</body>

</html>

css使用1的更多相关文章

Matplotlib数据可视化（3）：文本与轴
在一幅图表中,文本.坐标轴和图像的是信息传递的核心,对着三者的设置是作图这最为关心的内容,在上一篇博客中虽然列举了一些设置方法,但没有进行深入介绍,本文以围绕如何对文本和坐标轴进行设置展开(对图像 ...
CSS的未来
仅供参考前言完成<CSS核心技术与实战>这本书,已有一个多月了,而这篇文章原本是打算写在那本书里面的,但本章讲解的内容,毕竟属于CSS未来的范畴,而这一切都还不能够确定下来,所以这一章 ...
前端极易被误导的css选择器权重计算及css内联样式的妙用技巧
记得大学时候,专业课的网页设计书籍里面讲过css选择器权重的计算:id是100,class是10,html标签是5等等,然后全部加起来的和进行比较... 我只想说:真是误人子弟,害人不浅! 最近,在前 ...
前端css兼容性与易混淆的点
一.常用的骨灰级清除浮动 .clearfix:after { content: "."; display: block; height:; clear: both; visibil ...
理解CSS外边距margin
前面的话 margin是盒模型几个属性中一个非常特殊的属性.简单举几个例子:只有margin不显示当前元素背景,只有margin可以设置为负值,margin和宽高支持auto,以及margin具有 ...
理解CSS视觉格式化
前面的话 CSS视觉格式化这个词可能比较陌生,但说起盒模型可能就恍然大悟了.实际上,盒模型只是CSS视觉格式化的一部分.视觉格式化分为块级和行内两种处理方式.理解视觉格式化,可以确定得到的效果是应 ...
谈谈一些有趣的CSS题目（十二）-- 你该知道的字体 font-family
开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...
ASP.NET MVC with Entity Framework and CSS一书翻译系列文章之第二章：利用模型类创建视图、控制器和数据库
在这一章中,我们将直接进入项目,并且为产品和分类添加一些基本的模型类.我们将在Entity Framework的代码优先模式下,利用这些模型类创建一个数据库.我们还将学习如何在代码中创建数据库上下文类 ...
谈谈一些有趣的CSS题目（十一）-- reset.css 知多少？
开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...
梅须逊雪三分白，雪却输梅一段香——CSS动画与JavaScript动画
CSS动画并不是绝对比JavaScript动画性能更优越,开源动画库Velocity.js等就展现了强劲的性能. 一.两者的主要区别先开门见山的说说两者之间的区别. 1)CSS动画: 基于CSS的动 ...

随机推荐

教你用 Netty 实现一个简单的 RPC！
众所周知,dubbo 底层使用了 Netty 作为网络通讯框架,而 Netty 的高性能我们之前也分析过源码,对他也算还是比较了解了. 今天我们就自己用 Netty 实现一个简单的 RPC 框架. 1 ...
C++中的类型识别
1,为什么会提出类型识别概念呢? 1,为什么在 C 语言中没有提出这个概念呢,就是因为在 C++ 中引入了面向对象的特性,面向对象里面有一个非常重要的原则就是赋值兼容性原则: 2,在面向对象中可能出现 ...
java 环境配置及开发工具
1.下载JDK 网址:http://www.oracle.com/technetwork/java/javase/downloads/index.html 2 安装jdk 3.安装好jdk后配置环境变 ...
python3的一些文件操作的脚手架
用python把原来的脚本重构了一下,其中写了文件操作的一些函数,如下: import os import shutil import hashlib import stat #查找文件夹中的某个文件 ...
06.AutoMapper 之内联映射(Inline Mapping)
https://www.jianshu.com/p/623655d7cb34 内联映射(Inline Mapping) AutoMapper在 6.2 以上版本将动态创建类型映射. 当第一次调用Map ...
Homebrew学习（一）之初认识
Homebrew Homebrew是一款Mac OS平台下的软件包管理工具,拥有安装.卸载.更新.查看.搜索等很多实用的功能.简单的一条指令,就可以实现包管理,而不用你关心各种依赖和文件路径的情况,会 ...
机器学习-聚类(clustering)算法：K-means算法
1. 归类: 聚类(clustering):属于非监督学习(unsupervised learning) 无类别标记(class label) 2. 举例: 3. Kmeans算法 3.1 clust ...
PC端QQ协议说明，完美搞定QQ智能助手
一. 实验目的: 在虚拟机下NAT模式下通过Wireshark抓包,分析QQ的传输模式.了解QQ在传输信息过程中用到的协议.分析在Nat模式下,信息传输的穿透性. 二. 实验环境: Win7 专业版3 ...
安卓-去除ActionBar的方法
今天做一个播放器项目,由于要去除ActionBar,纠结好久,原来这么简单记录一下只需要修改AndroidManifest.xml文件中的主题即可 <application android: ...
ARM调试器只能偶尔连接成功问题
这里分析一个ARM板子JTAG调试器经常连接失败,只能偶尔连上目标板问题. 背景这是原先另一个部门的板子,在部门合并之后,最近要对这个板子的代码体系进行转移,在过问开发进度时,工程师反映这个板子调试 ...

css使用1

一、引入css的三种方式

二、基本选择器

三、组合选择器

四、属性选择器

五、分组与嵌套选择器

六、伪类选择器

七、伪元素选择器

八、群组选择器

九、多条件选择器

十、选择器优先级

九、修改样式：字体大小

十、修改样式：文本颜色

十一、修改样式：文本属性

十二、修改样式：背景属性

背景图片示例：

十三、修改样式：边框

十四、修改样式：画圆

十五、修改样式：display属性

css使用1的更多相关文章

随机推荐

热门专题