css的概念以及初体验

概念：

CSS（cascading style sheet）也就是层叠样式表；它是一种网页设计的新技术，现在已经被大多数浏览器所支持，层位网页设计必不可少的工具之一。
优点：
    使得网页代码更少，网页下载速度更快
    实现了内容和样式的分离，使得网站维护更加便捷
    使得网站和浏览器兼容更好

css的编写方式

  • css的语法结构

CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明:

在css的三个组成部分中，对象是很重要的，他指定了对那些网页元素进行设置，因此他有一个专门的名称---选择器

  • 行内样式
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

    <div style="color: red;font-size: 30px">这是css的初体验</div>

</body>

</html>
  • 内部样式
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style type="text/css">

        div{

            font-size: 29px;

            color: green;

        }

    </style>

</head>

<body>

    <div>css的初体验2</div>

</body>

</html>
    • 各种选择器
      • id选择器：ID选择器的id一定要唯一，千万别重复
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style type="text/css">

        /*标签选择器*/

        div{

            font-size: 29px;

            color: green;

        }

        /*id选择器*/

        #two{

            font-size: 50px;

            color:red;

        }

        span{

            color: yellow;

        }

        .three{

            /*类选择器*/

            color: deeppink;

        }

        .four span{

            /*包含选择器*/

            color: aquamarine;

            font-size: large;

        }

        div,span,h2{

            /*分组选择器*/

            color: #3300cc;

        }

        *{

            /*通用选择器*/

            background-color: green;

            color: #000;

        }

    </style>

</head>

<body>

    <div>css的初体验2</div>

    <div id="two">css的初体验2</div>

    <div class="three">css的初体验2</div>

    <div class="three">css的初体验3</div>

    <span>spawn标签</span>

`   <div class="four">

        <span>这是css里的spawn标签</span>

    </div>

    <h2>h2元素</h2>

    <input type="text">

</body>

</html>
    • 选择器的优先级：行内选择器>id选择器>类选择器>标签选择器>通用选择器

测试代码如下：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        #show1{color:yellow}

        .show{color:pink}

        h1{color: red}

        *{color:green}

    </style>

</head>

<body>

    <h1 id="show1" class="show" >这是选择器优先级设置</h1>

</body>

</html>
    • 外部样式
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

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

    <style type="text/css">

    </style>

</head>

<body>

    <div>css的初体验2</div>

        <div id="two">css的初体验3</div>

        <div class="three">css的初体验3</div>

        <div class="three">css的初体验3</div>

        <span>spawn标签</span>

    `   <div class="four">

        <span>这是css里的spawn标签</span>

    </div>

    <h2>h2元素</h2>

    <input type="text">

</body>

</html>

css样式文件如下：

#show1{color:yellow}

.show{color:pink}

h1{color: red}

css的基本属性

  • 文字、段落、背景属性

css的布局属性

浏览器兼容性问题

day15 web前端之css的更多相关文章

  1. WEB前端开发CSS基础样式全面总结

    Web前端开发css基础样式全面总结 颜色和单位的使用 颜色 用颜色的名字表示颜色,比如:red 用16进制表示演示 比如:#FF0000 用rgb数值表示颜色,rgb(红,绿,蓝),每个值都在0-2 ...

  2. 好程序员web前端分享css常用属性缩写

    好程序员web前端分享css常用属性缩写,使用缩写可以帮助减少你CSS文件的大小,更加容易阅读.css缩写的主要规则如下: 颜色 16进制的色彩值,如果每两位的值相同,可以缩写一半,例如: #0000 ...

  3. Python web前端 02 CSS

    Python web前端 02 CSS 一.选择器 1.CSS的几种样式(CSS用来修饰.美化网页的) #建立模板 复制内容--->SETTING---> Editor -----> ...

  4. Python web前端 03 CSS属性

    Python web前端 03 CSS属性 一.文字.文本属性 1.文字属性 font-family #字体类型浏览器默认的字体是微软雅黑,字体中有多个字体的时候,如果前面的字体没有就使用后面的字体 ...

  5. 好程序员web前端分享CSS元素类型

    好程序员web前端分享CSS元素类型 目标 1.元素类型分类依据和元素类型分类 2.元素类型的转换 3.inline-block元素类型的应用 4.置换和非置换元素的概念和应用案例 一.元素类型分类依 ...

  6. 1+x 证书 Web 前端开发 css 专项练习

    官方QQ群 1+x 证书 Web 前端开发 css 专项练习 http://blog.zh66.club/index.php/archives/192/

  7. Web前端温故知新-CSS基础

    一.CSS定义与编写CSS 1.1 CSS的定义 全名:Cascading Style Sheets -> 层叠样式表 定义:CSS成为层叠样式表,它主要用于设置HTML页面中的文本内容(字体. ...

  8. web前端开发CSS命名规范参考

    做为一个web前端工程师,每天接触HTML.css就像吃饭一样,但是作为一名合作.优秀的web前端工程师,对DIV+CSS命名还是有一定的规范的,本文整理了一份web前端开发中DIV+CSS各种命名规 ...

  9. web@前端--html,css,javascript简介、第一个页面(常用标签简介)

    1.什么是标签#1.在HTML中规定标签使用英文的的尖括号即`<`和`>`包起来,如`<html>`.`<head>`.`<body>`都是标签,#2. ...

随机推荐

  1. webstorm格式化代码快捷键

    ctrl+alt+L 把网易云音乐的快捷键关了就可以了

  2. CodeChef--Cards, bags and coins

    题目链接 Yet another game from chef. Chef gives you N cards and M bags. Each of the N cards has an integ ...

  3. zoj 1001 python起步

    /*赶角还是挺好的....*/ import sys for line in sys.stdin: a=line.split() print int(a[0])+int(a[1])

  4. php+js实现百度地图多点标注的方法

    本文实例讲述了php+js实现百度地图多点标注的方法.分享给大家供大家参考,具体如下: 1.php创建json数据 ? 1 2 $products = $this->product_db-> ...

  5. 读书笔记--Struts 2 in Action 目录

    1.Struts 2:现代Web框架 1.1 web应用程序:快速学习 21.1.1 构建web应用程序 21.1.2 基础技术简介 31.1.3 深入研究 61.2 web应用程序框架 71.2.1 ...

  6. CesiumLab V1.4 分类3dtiles生成（倾斜单体化、楼层房间交互）我记得我是写过一篇关于倾斜单体化的简书文章的，但是现在找不到了。不过找不到也好，就让他随风逝去吧，因为当时我写那篇文章的时候，就发现了cesium实际是有另一种更高效的单体化。就下面这个示例https://cesiumjs.org/Cesium/Build/Apps/Sandcastle/index.html?src=

    我记得我是写过一篇关于倾斜单体化的简书文章的,但是现在找不到了.不过找不到也好,就让他随风逝去吧,因为当时我写那篇文章的时候,就发现了cesium实际是有另一种更高效的单体化.就下面这个示例 http ...

  7. hibernate分页功能

    设置开始位置无效 设置终止位置是可以的 设置完之后,并没有分页 问题解决 https://blog.csdn.net/qq_39859824/article/details/77902488 http ...

  8. spring springmvc 展示图片,静态资源的处理

    jsp中显示一张照片 <img alt="静态图片" src="static/目录.png"> 然后在springmvc的配置中加上 <!-- ...

  9. 核K-均值聚类（Kernel K-means Clustering）

    版权声明:本文为博主原创文章,未经博主同意不得转载. https://blog.csdn.net/wxcdzhangping/article/details/31366143 问题:        设 ...

  10. Javaweb项目中出现java.sql.SQLException: The server time zone value '�й���׼ʱ��' is unrecognized or represents more than one time zone.异常

    javaweb项目中java.sql.SQLException: The server time zone value '�й���׼ʱ��' is unrecognized or represent ...