`
chenhua_1984
  • 浏览: 1251023 次
  • 性别: Icon_minigender_1
  • 来自: 杭州
文章分类
社区版块
存档分类
最新评论

CSS样式学习笔记之一:基础知识

阅读更多

1 XHTML:指的是Extensible Hypertext Markup Language;

  (X)HTML: 这的是XHTML和HTML的结合

 

2 浏览器根据区分DOCTYPE来区分要使用哪个DTD,进而进行网页的解析。

 

3常用的样式选择器

--------------------------------------------------------------------------------------------

  A类型选择器

    body {
         font-family: Arial, Helvetica, sans-serif;
       }

    h3{
      font-weight:bold;
     }

 

    <h3>Zeldmain.com turns 10</h3>

--------------------------------------------------------------------------------------------

  B后代选择器

   li a {text-decoration:none}

 <ul id="mainNav">
        <li><a href="##">Home</a></li>
        <li><a href="##">About Us</a></li>
        <li><a href="##">Contact</a></li>
        <li><a href="##">XXXX</a></li>
    </ul>

--------------------------------------------------------------------------------------------

  C ID选择器,用#号表示

  #mainContext h5{font-size:10px;}

  <div id="mainContext">
        <li><h1>This is the H5 Test</h1></li>
  </div>

-----------------------------------------------------------------------------------------------

  D  类选择器用.表示

  .datePosted{color:green;}

  <p class="datePosted">Another for Jeffrey as zeldmain.com</p>

-----------------------------------------------------------------------------------------------

  E通用选择器*

   *{
     padding:50;/*填充*/
     margin:50 /*页边的空白,边缘*/
    }

<link href="&#36873;&#25321;&#22120;.css" rel="stylesheet" type="text/css"/>

-----------------------------------------------------------------------------------------------

     F子选择器和相邻同胞选择器

 #nval li *{background-image:url(aa.gif)no-repeat left top;}
 #nval li *{background:background-repeat;}

  <ul id="navl">
        <li>Home</li>
        <li>Services
            <ul>
                <li>Design</li>
                <li>Design</li>
                <li>Design</li>
            </ul>

        </li>
        <li>
               Contact Us
           </li>

    </ul>

***相邻同胞选择器*****

h1 + p{font-weight:bold;}

    <h1>main Heading</h1>
    <p>First Paragraph</p>
    <P>Second Paragraph</p>

-----------------------------------------------------------------------------------------------

 

4对样式表进行注释

 

   body{

 

             font-size :67.5%    /*字体的大小*/

        }

 

5在页面中引入样式表

 <link href="样式表路径.css" rel="stylesheet" type="text/css"/>

 

6对CSS文件进行引用会影响性能,因此,一般最好使用一个CSS文件,也可以分成多个,在需要使用的时候在去加载它。尽量减少对服务器的开销。

 

 

0
0
分享到:
评论

相关推荐

    CSS样式学习笔记之四:创建导航条

    在CSS(层叠样式表)的学习中,创建一个吸引人的、功能完善的导航条是至关重要的。这不仅可以提升网站的用户体验,还能为网站增加专业感。本文将深入探讨如何利用CSS来构建一个有效的导航条,主要关注以下几个方面:...

    CSS基础知识学习笔记

    ### CSS基础知识学习笔记 #### 一、CSS简介与基本概念 **CSS**(Cascading Style Sheets)即层叠样式表,是一种用来表现HTML或XML等文件样式的计算机语言。CSS的作用在于控制网页的布局和样式,使网页内容的展现更加...

    个人css学习笔记 精华版

    个人css学习笔记 精华版 CSS学习笔记中涵盖了CSS的基本概念、分类、基本语法、常用属性...本篇笔记涵盖了CSS的基础知识,包括CSS的基本概念、分类、基本语法、常用属性等。这些知识点对于学习CSS和前端开发非常重要。

    html和css学习笔记

    ### HTML与CSS学习笔记 #### 一、基础知识概述 HTML(HyperText Markup Language)与CSS(Cascading Style Sheets)是构建网页的基础技术。通过学习HTML与CSS,我们可以创建结构化且美观的网页。 - **WWW (World ...

    学习CSS基础过程笔记

    学习 CSS 基础过程笔记是前端开发者的必备技能之一,本笔记总结了 CSS 的基础知识点,涵盖选择器、常见样式、布局案例等多方面的内容。 选择器 选择器是 CSS 中最基本也是最重要的概念之一。选择器用于选择 HTML ...

    Vue一站式学习笔记加源码:基础+进阶+完整Demo+生态圈+项目.zip

    在这个"Vue一站式学习笔记加源码"压缩包中,包含了从基础到进阶,以及完整的Demo和生态圈的相关资料,非常适合初学者和有一定经验的开发者进行深入学习。 1. **Vue基础知识**: - **Vue实例**:Vue实例是Vue应用的...

    Html\CSS+DIV学习笔记(史上最实用的CSS笔记)

    9. **检测CSS样式**:可以通过尝试更改文字大小来检查网页是否依赖CSS样式。 10. **CSS语法**:基本语法是`选择符{属性:属性值}`,例如`body{font-size:12px;}`。 11. **CSS编写技巧**: - 结束每个声明后加分号...

    HTML、CSS、HTML5、CSS3学习笔记.zip

    内容覆盖从基础知识到高级技巧,包括标签使用、样式设计、响应式布局、动画效果等,适合不同水平的开发者深入学习。通过实际案例和项目练习,帮助学习者快速提升技能,打造精美高效的网页。无论是初学者还是希望深化...

    css学习笔记

    在CSS学习中,基础是非常关键的。以下是一些关于CSS简写、缩写和命名规范的重要知识点: 1. **简写和缩写**: - **颜色**:16进制颜色值可以进行缩写,例如`#ffffff`缩写为`#fff`,`#33dd66`缩写为`#3d6`。 - **...

    学习笔记之CSS

    本学习笔记将深入探讨CSS的基础概念、语法以及在创建响应式和优雅网页设计中的应用。 **一、CSS基础** 1. **选择器**:CSS通过选择器来定位需要样式的HTML元素。基本选择器包括标签选择器(如`p`)、类选择器(如`...

    韩顺平《轻松搞定网页设计HTML+CSS+JAVASCRIPT》之DIV+CSS学习笔记

    "韩顺平《轻松搞定网页设计HTML+CSS+JAVASCRIPT》之DIV+CSS学习笔记" 本资源主要讲解了 DIV+CSS 的概念和应用, DIV 是 HTML 文档中用来提供结构和背景的元素,而 CSS 是一种用来表现 HTML 或 XML 等文件式样的...

    XHTML+CSS页面布局学习笔记

    XHTML+CSS 页面布局学习笔记 ...这篇学习笔记为我们提供了一个系统的 XHTML 和 CSS 学习指南,涵盖了基础知识、CSS 控制页面样式、选择器、盒子模型和块状元素等内容,对于页面布局设计和开发非常有价值。

    CSS基础学习的笔记

    ### CSS基础学习知识点 #### 一、HTML应用CSS的三种方法 在网页设计中,CSS (Cascading Style Sheets) 是一种用来描述 HTML 或 XML (包括各种 XML 语言如 SVG、XHTML 等) 文档样式的语言。它允许我们将样式与结构...

    CSS学习笔记.docx

    CSS学习笔记 CSS(Cascading Style Sheets)是一种用于描述网页样式的语言,由W3C组织制定。CSS主要用于美化网页,提高用户体验,实现网页布局、样式、颜色、字体、背景等的控制。 CSS基础知识 CSS基础知识是学习...

    HTML_CSS学习笔记.docx

    HTML 和 CSS 是构建网页内容和样式的两大...以上就是HTML和CSS的基础知识概览,它们共同构成了网页设计的基础框架,帮助开发者构建美观、功能丰富的网页。通过不断学习和实践,你可以创建出更加复杂和交互性强的网页。

    我的学习笔记 ,涵盖:C#,java,SqlServer,MySql,Oracle,HTML,CSS.zip

    这些学习笔记包含了一系列重要的编程语言和技术,对于想要深入理解或者初学者来说是非常宝贵的资源。下面,我将分别介绍这些主题中的关键知识点。 1. **C#**:C#是微软开发的一种面向对象的编程语言,广泛应用于...

    html5和css笔记.docx

    "HTML5和CSS笔记" ... ... ...它的主要特点是对多媒体、图形和动画的支持,提高了浏览器的兼容性和可读性。... ...CSS部分: ...基础选择器 ...这只是一个基本的HTML5和CSS笔记,当然还有很多其他的知识点需要学习和掌握。

    《韩顺平轻松搞定网页设计》DIV+CSS学习笔记

    ### DIV+CSS基础概念 #### 一、DIV与CSS简介 - **DIV**:在HTML中,`&lt;div&gt;`是一个容器标签,它被用来组合文档中的其他元素,并对其应用...在实际开发中,熟练掌握这些基础知识对于创建美观且功能强大的网站至关重要。

Global site tag (gtag.js) - Google Analytics