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. 【洛谷3295】[SCOI2016]萌萌哒

    传送门 倍增并查集. //Twenty #include<algorithm> #include<iostream> #include<cstdlib> #incl ...

  2. TZ_11_Spring-Boot的属性注入方式（jdbc为例）

    1.以上一篇文档为基础 2.创建jdbc外部属性文件 application.properties此名字为默认文件名在使用是不需要使用 @Propertysource("classpath: ...

  3. mac mamp host 配置

    <VirtualHost *:80> DocumentRoot "/Users/xuxu/www" ServerName localhost <Directory ...

  4. JavaScript模板引擎实例应用（转）

    本文将举实例向大家讲解几个常用模板引擎的简单使用. 演示地址:模板引擎示例http://demo.52fhy.com/jstemp/ 准备工作 演示数据:blog.json结构: { "li ...

  5. jeecms9自定义标签以及使用新创建的数据库表

    转载 https://blog.csdn.net/nice_meng/article/details/89179089 本系统使用的是jeecmsv9版本,收集网上知识后,进行个人汇总 首先,自己创建 ...

  6. Git同账号多平台配置

    最近工作中使用到了Git,虽然以前学习过,但是已经忘的差不多了,遂将本次配置过程整理成笔记以备忘 生成公钥 ssh-keygen -t rsa -C "gana10007@163.com&q ...

  7. 使用Docker 安装Elasticsearch、Elasticsearch-head、IK分词器 和使用

    原文:使用Docker 安装Elasticsearch.Elasticsearch-head.IK分词器 和使用 Elasticsearch的安装 一.elasticsearch的安装 1.镜像拉取 ...

  8. jenkins自动部署

    最近在使用公司的jenkins进行自动部署项目,由于之前没有用过,一直半生不熟,因此特意写个随机记录. 1.登录jenkins服务 jenkins安装好后,我们通过浏览器访问它的主页(如下),输入用户 ...

  9. Linux巨好用的

    受不了了windows下配置烦死人.linux一站式搞定,无敌 安装python3 机子上py2 py3共存没问题 安装virtualenv (py3)分割实验环境非常稳 安装mysql 先安装了一 ...

  10. oracle之FUNCTION拙见

    一.介绍 函数(Function)为一命名的存储程序,可带参数(有无均可),有返回值 函数和过程的结构类似,但必须有一个RETURN子句,用于返回函数值. 函数说明要指定函数名.返回值的类型,以及参数 ...