CSS基础篇之了解CSS和它的基本属性

时间：2022-09-02 21:29:26

CSS是什么？

CSS英文全名是Cascading Style Sheets翻译过来就是层叠样式表，它主是把网页表现与内容分离的一种样式设计语言。这种语言能优化我们编程，把东西简化和优化写法，而且不同的浏览器有不同的CSS前缀

如果你用的是charome和safari，前缀就是-webkit

如果你用的是firefox，前缀是-moz

如果你用的是IE，前缀是-ms

如果你用的是opera，前缀是-o

CSS能做什么？

CSS简化了以前要使用很多图片和脚本实现的效果，只需几行代码就能搞定。方便了程序员的设计过程，更灵活的页面布局和更快的页面加载速度。可以用一个CSS文件控制多个页面属性，只要修改CSS文件中相应的代码，那么页面的效果也会发生改变。设备上也多方面支持手机、打印机、电视机、游戏机等..总的一个目的来说就是为了实现html标签和属性、属性值分开，把HTML属性、属性值用CSS语言来编程使其更简单方便。

CSS语法构成

Selector  { Property : Value; }

↓             ↓                 ↓

选择符    属性             值

选择符就相当于我们HTML的标签。属性和值都差不多，只不过属性与属性值之间用：号隔开结束用；号。

CSS的引入方式

有三种引入方式

1.行内引用在：在标签内进行CSS样式编码，这种方法是不需要写选择器。CSS语言属性style。

<body style=”background-color:#ccccc;”>
<p  style=”font-size:16px;background-color:#ccc;”></p>

2.页内引用：页内引用作为页面中的一个单独部分，由<style></style>标签定位在<head></head>之中。

例1：

<html>

<head>

<title></title>

<style type=”text/css”>

    body{

        background-color:#ff0000;

}

</style>

</head>

<body>

<p>变红</p>

</body>

</html>

例2：

<html>

<head>

<title></title>

<style type=”text/css”>

    h1{

        background-color:#ff0000;

        font-size:30px;

font-family;“微软雅黑；

}

</style>

</head>

<body>

     h1{标题}*100

</body>

</html>

3.外部样式表：外部样式表是CSS应用中最好的一种形式，它将CSS样式代码单独 放在一个外部文件中，再由网页进行调用。需要在同一个目录下创建一个xxx.css文件名。在里面编辑。

例1：

CSS文件里面写

h1{

        background-color:#ff0000;

        font-size:30px;

font-family;“微软雅黑；

}

在html文件里面写

<html>

<head>

<title></title>

<link rel="stylesheet" type="text/css" href="文件名.css" />

</head>

<body>

         h1{标题}*100

</body>

</html>

例2：

CSS文件里面写

body{

        background-color:#ff0000;

}

HTML里面写

<html>

<head>

<title></title>

<link rel="stylesheet" type="text/css" href="文件名.css" />

</head>

<body>

<p>变红</p>

</body>

</html>

上面三中引入方式有分先后级别，三种引用方式里标签越近就优先使用该属性。简称就近原则。行内引用> 页内引用> 页外引用 。不推荐行内引用，最好用页外引用。

如果我同时在CSS文件里编辑也在HTML编辑看效果使用哪个

在HTML里面写

<html>

<head>

<title></title>

<style type=”text/css”>

    p{

        background-color:red;

}

</style>

</head>

<body>

<p style=“background-color:green;”>变红</p>

</body>

</html>

在CSS里面写

p{

        background-color:blue;

}

P标签里面有编辑了背景颜色绿色会变成绿色。因为就近原则，把P标签里面的style=“background-color:green;”删除，重新刷新网页你会发现这次背景变回红色了。

把

<style type=”text/css”>

       p{

              ackground-color:red;

}

</style>

删除这段，这次是页外引用这次背景变成蓝色了。一定要记住它们的优先级别。

css 代码注释

/* 开始 */ 结束

/* 公共样式*/

body { margin:0px; padding:0px;}

/*导航样式开始*/

#nav {

……

}

/*导航样式结束*/

1.通配选择符 *

把页面内的所有对象进行选择来指定样式。

 <style type="text/css">

            * {

                color: #000;

            }

        </style>
   
<style type="text/css">

            * {

                font-family: "微软雅黑";

                color: #000;

            }

        </style>

这里设置全部可用此属性的标签的字体样式和颜色。

2.元素选择符

指定单个标签进行指定样式，相同的标签都会受到影响

<style type=”text/css”>

    h1{

        background-color:#ff0000;

        font-size:30px;

font-family;“微软雅黑；

}

</style>
<style type=”text/css”>

    p{

        background-color:#ff0000;

        font-size:30px;

font-family;“微软雅黑；

}

</style>

这里就是设置了p和h1标签里面的背景颜色、字体大小、字体样式。

3.群组选择符

将所要设计相同属性的标签一起进行改变。

<style type="text/css">

            h1,p {

                font-family: "微软雅黑";

                font-size: 30px;

                color: #333;

            }

    </style>
<style type="text/css">

            h1，p，b，big {

                font-family: "微软雅黑";

                font-size: 30px;

                color: #333;

            }

    </style>

可以对指定的标签同时编辑这三种属性记住标签与标签之间间隔用 ,号。

现在开始学CSS基础希望能学好吧。大家也要加油！

CSS基础篇之了解CSS和它的基本属性的更多相关文章

  1. 前端面试题——html与css基础篇

    整理一波html和css的面试题,侧重基础,希望明天面试能用到~(╥╯^╰╥) 一.HTML部分 1.浏览器页面有哪三层构成,分别是什么,作用是什么? 构成:结构层.表示层.行为层分别是:HTML.C ...

  2. CSS 基础篇、绝对有你想要

    本章内容: 简介 CSS 定义 四种引入方式 样式应用的顺序 选择器(Selector) * 通用元素选择器 标签选择器 class 类选择器 # ID选择器 , 多元素选择器 后代元素选择器 &gt ...

  3. html&sol;css基础篇——link和&commat;inport详解以及脚本执行顺序探讨

    先说一说两者之间的异同 两者都可以引用外部CSS的方式,现在主流浏览器两者都支持(ps:@import是CSS2.1提出的),但是存在一定的区别: 1.link是XHTML标签,除了加载CSS外,还可 ...

  4. 前端之CSS基础篇

    CSS介绍 什么是CSS? CSS(Cascading Style Sheet,层叠样式表)定义如何显示HTML元素. 当浏览器读到一个样式表,它就会按照这个样式表来对文档进行格式化(渲染). CSS ...

  5. html&sol;css基础篇——iframe和frame的区别【转】

    转自共享圈的使用iframe的优缺点,为什么少用iframe以及iframe和frame的区别.其中本人不认同的地方有做小修改 注:HTML5不再支持使用frame,iframe只有src 属性 一. ...

  6. html&sol;css基础篇——DOM中关于脱离文档流的几种情况分析

    所谓的文档流,指的是元素排版布局过程中,元素会自动从左往右,从上往下的流式排列.并最终窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素.脱离文档流即是元素打乱了这个排列,或是从排版中拿走. ...

  7. html&plus;css基础篇

    2016年11月19号,计划把基础在看一下,听大神说好的东西就要多看几遍,知识是学来用的解决问题的,加油 接下来的是我在自学中的小笔记吧,每天都在保持几个小时的学习思考状态,由于要升本所以学前端的时间 ...

  8. CSS基础篇之背景、过渡动画

    background-origin(背景原点) 设置元素背景图片的原始起始位置.必须保证背景是background-repeat为no-repeat属性才能生效. background-origin: ...

  9. CSS基础篇之选择符3

    border(边框) 如何用CSS调出边框 我们给p标签加一个边框试一下 p{ border:1px solid #ccc:/*这是缩写*/ } 第一个值是为边框的宽度 第二个值是为边框线样式为直线 ...

随机推荐

  1. 利用PHPMailer 来完成PHP的邮件发送

    翻起之前的代码看了一下,还是发表到这里,以后容易查找. 以下的两个文件在这里下载 http://download.csdn.net/detail/u013085496/9673828 也可以直接上gi ...

  2. Java基础&lpar;55&rpar;&colon;Exception类详解（转）

    Java中的异常 Exception java.lang.Exception类是Java中所有异常的直接或间接父类.即Exception类是所有异常的根类. 比如程序: public class Ex ...

  3. Spring 静态资源配置

    ShineJaie 原创整理,转载请注明出处. 一.为何要配置静态资源 1.在配置 Spring 的时候,我们配置的拦截是"/",即任何文件都会经 Spring 拦截处理. 2.实 ...

  4. XibDemo

    ////  MyviewViewController.h//  XibDemo////  Created by hehe on 15/9/21.//  Copyright (c) 2015年 wang ...

  5. 从零单排Linux – 1 – 简单命令

    从零单排Linux – 1 – 简单命令 Posted in: Linux 从零单排Linux – 1 一.Linux的简单命令: 1.忘记root密码: 读秒时按任意键进入 – e – ↓选择第二个 ...

  6. 返回到上一页的html代码的几种写法

    关键词:返回上一页 html代码超链接返回上一页代码: <a href=”#” onClick=”javascript :history.back(-1);”>返回上一页</a&gt ...

  7. python安装依赖

    yum install zlib zlib-devel openssl openssl-devel bzip2 bzip2-devel ncurses ncurses-devel readline r ...

  8. 面向Unity程序员的Android快速上手教程

    作者:Poan,腾讯移动客户端开发 工程师 商业转载请联系腾讯WeTest获得授权,非商业转载请注明出处. WeTest 导读 随着Unity.cocos2dx等优秀跨平台游戏引擎的出现,开发者可以把 ...

  9. 安装JDK详细步骤，以及环境变量配置

    1.JDK 1)下载:http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html 点击同意, ...

  10. Hi&comma;腾讯WeTest联合Unity官方打造的性能分析工具UPA，今日全新发布！

    早在2016年ChinaJoy开始,WeTest曾受邀出席过Unity中国的线下性能场的活动,介绍我们的自动化框架和王者荣耀的故事.当时的活动很成功,期间我们收到了不少Unity开发者的好评,也为我们 ...

相关文章