1  css引入方式

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <!--内嵌式引入-->

    <!--<style>-->

        <!--a{-->

            <!--color:rebeccapurple;-->

            <!--font-size:30px;-->

            <!--font-weight:;-->

        <!--}-->

        <!--p{-->

            <!--ackground-color:gold;-->

        <!--}-->

    <!--</style>-->

    <!--连接式-->

    <!--<link rel="stylesheet" href="index.css"-->

    <!--导入式-->

    <!--<style>-->

        <!--@import "index.css";-->

    <!--</style>-->

</head>

<body>

<p>I am P!</p>

<a href="">click</a>

<div>CIV</div>

<div>DIV2</div>

<!--行内式-->

<!--<div style="color: red;background-color:darkgreen">DIV3</div>-->

</body>

</html>
    a{

        color:rebeccapurple;

        font-size:30px;

        font-weight:;

    }

    p{

        background-color:gold;

    }

2  基本选择器

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        <!--标签选择器-->

        <!--p{-->

        <!--background-color:rebeccapurple;-->

        <!--}-->

        <!--id选择器-->

        <!--#p2{-->

            <!--background-color:rebeccapurple;-->

        <!--}-->

        <!--class选择器-->

        <!--.fang{-->

            <!--background:rebeccapurple;-->

        <!--}-->

        <!--通用选择器-->

        <!--*{-->

            <!--background:rebeccapurple;-->

        <!--}-->

    </style>

</head>

<body>

    <p class="fang">ppp1</p>

    <p id="p2">ppp2</p>

    <p class="fang">ppp3</p>

    <div>DIV</div>

    <span>SPAN</span>

</body>

</html>

3  组合选择器

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        <!--后代选择器-->

        <!--.he p{-->

            <!--color:red;-->

        <!--}-->

<!---->

        <!--.yi p{-->

            <!--color:red;-->

        <!--}-->

        <!--子代选择器-->

        <!--.yi > p{-->

            <!--color:red;-->

        <!--}-->

        <!--多元素选择器-->

        <!--.he p,.p4{-->

            <!--color:red;-->

        <!--}-->

        <!--毗邻选择器-->

        <!--.yi + a{-->

            <!--color:red;-->

        <!--}-->

        <!--兄弟选择器-->

        <!--.yi ~ p{-->

            <!--color:red;-->

        <!--}-->

        <!--多个选择器组合到一起使用-->

        <!--ul.yan li{-->

            <!--color:red;-->

        <!--}-->

        <!--div.jie{-->

            <!--color:red;-->

        <!--}-->

    </style>

</head>

<body>

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

    <div class="yi">

        <p>p1</p>

        <div class="he">

            <p>p3</p>

        </div>

        <p>p2</p>

        <a href="">click</a>

    </div>

    <a href="">aaa</a>

    <p>p5</p>

    <p class="p4">p4</p>

    <ul class="yan">

        <li>111</li>

        <li>111</li>

        <li>111</li>

        <li>111</li>

    </ul>

    <ol class="yan">

        <li>222</li>

        <li>222</li>

        <li>222</li>

        <li>222</li>

    </ol>

    <ul>

        <li>333</li>

        <li>333</li>

        <li>333</li>

        <li>333</li>

    </ul>

</body>

</html>

前端之css笔记1的更多相关文章

  1. 前端之css笔记3

    一 display属性 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&qu ...

  2. 前端之css笔记2

    1 属性选择器 <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...

  3. 每天成长一点---WEB前端学习入门笔记

    WEB前端学习入门笔记 从今天开始,本人就要学习WEB前端了. 经过老师的建议,说到他每天都会记录下来新的知识点,每天都是在围绕着这些问题来度过,很有必要每天抽出半个小时来写一个知识总结,及时对一天工 ...

  4. 前端：jQuery笔记

    前端:jQuery笔记 此系列文章乃是学习jQuery的学习笔记. Asp.net MVC Comet推送 摘要: 一.简介 在Asp.net MVC实现的Comet推送的原理很简单. 服务器端:接收 ...

  5. CSS笔记--选择器

    CSS笔记--选择器 mate的使用 <meta charset="UTF-8"> <title>Document</title> <me ...

  6. 前端学习:学习笔记(JS部分）

    前端学习:学习笔记(JS部分) 前端学习:JS学习总结(图解)    JS的简介 JS基本语法 JS内置对象 JS的函数 JS的事件 JS的BOM JS的DOM JS的简介 新建步骤 <body ...

  7. 前端开发css实战：使用css制作网页中的多级菜单

    前端开发css实战:使用css制作网页中的多级菜单 在日常工作中,大家都会遇到一些显示隐藏类菜单,比如页头导航.二维码显示隐藏.文本提示等等......而这些效果都是可以使用纯css实现的(而且非常简 ...

  8. 前端之css

    前端之css 本节内容 css概述及引入 css选择器 css常用属性 1.css概述及引入 CSS概述 CSS是Cascading Style Sheets的简称,中文称为层叠样式表,用来控制网页数 ...

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

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

随机推荐

  1. Python selenium的js扩展实现

    python写的数据采集,对一般有规律的页面用 urllib2 + BeautifulSoup + 正则就可以搞定. 但是有些页面的内容是通过js生成,或者通过js跳转的,甚至js中还加入几道混淆机制 ...

  2. leetcode108

    /** * Definition for a binary tree node. * public class TreeNode { * public int val; * public TreeNo ...

  3. Spring DevTools 介绍

    Spring DevTools 介绍 Spring Boot包括一组额外的工具,可以使应用程序开发体验更加愉快. spring-boot-devtools模块可以包含在任何项目中,它可以节省大量的时间 ...

  4. Activity服务类-7 RepositoryService服务类

    Activity服务类-1 RepositoryService服务类一共47个接口1.创建部署//开始创建一个新的部署.DeploymentBuilder createDeployment(); 2. ...

  5. Yii2 基础学习

    <?php //url创建 echo Url::to(''); // same controller, different action // /index.php?r=management/d ...

  6. 下载的chm文件打不开问题

    下载的chm文件无法打开,是因为此文件是在其它电脑上编辑的,上面留有原电脑的信息,当下载打开时,发现电脑信息不一致,因此会将应用锁定. 操作:文件  -->  属性  -->常规 --&g ...

  7. hibernate 异常

    1.异常:org.hibernate.AnnotationException: No identifier specified for entity异常. entity类是必须要主键的,否则就会报出这 ...

  8. JSP复习

    3.2.2 JSP指令元素: JSP指令 (1) page指令:定义整个页面的全局属性 (2)include指令:用于包含一个文件或代码的文件 (3)taglib指令:用来引用自定义的标签或第三方标签 ...

  9. for循环语句个人小结

    重新看了一下光盘上的用for循环写一个菱形的答案,发现了其实有几点是可以灵活运用的: 1,当定义行数的时候,也可以用相等的间断的数字隔开,比如 for(int a = 5; a >= 1; a- ...

  10. javascript基础代码

    1.点击改变HTML内容 <html> <head> <meta charset="UTF-8"> <script> functio ...