CSS基本使用

简介: CSS基本使用

CSS基本概念

层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)

等文件样式的计算机语言。CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。

1.什么是CSS

      CSS(cascading style sheet)层叠样式表,主要用于布局和美化网页  

如下图:


 

2.CSS分类

                内部样式表和外部样式表

  内部样式表又分为嵌入样式和行内样式


                嵌入样式:


           主要包含:<head></head>


                    <head>


                                <style  type="text /css">

    bady{font-size:12px;}


                      </style>


                 </head>


  行内样式


      <a style="tont-size:12px:">


外部样式包含在<head></head>中


                        CSS作为一个独立文件被调用


<link       hred="style.css"   rel=“stylesheet”  type=“text/css”/>


3.CSS的语法结构

<style   type ="text/css">

               选择器:[对象属性:属性值:]

</style>

4.CSS选择器的分类

    标签选择器   p    a        body        span        stab/e

p\    p{属性:属性值:}

类选择器,类名

类名[属性:属性值:]

     <p class="类名">

  id选择器

        #id1名字{属性:属性值:}

       <p    id ="id名字">

5.css样式的优先级

     id选择器>类选择器>标签选择器.

选择器相同,按代码的应用顺序,后应用的覆盖前应用

     行内样式>嵌入样式>外部样式

     内层标签应用样式优先于外层样式标签


6.选择器的申明

             集体申明

body,p,hl,span,#abc,classl{color:red:}


嵌套申明                


         p      a         {color:red:}


         p      a         span{color  :red:}

7.css       常见的文本段落属性

font-family                        设置文本字体

font-sis                             设置字体大小

line-height                             文本的行高


texr-indent                         首行缩进


text-align                      文本的水平对齐方式


vertical-align                    垂直对齐方式


color                          字体颜色


border                                设置边框属性


border-width                               边框宽度


border-style                            边框样式


border-color                              边框的颜色


backlground-image                            设置背景图片




相关文章
|
前端开发
css中定位和背景的基本使用方式
通过本章认识css中定位和背景的基本使用方式。
113 0
html+css实战162-圆角边框-基本使用
html+css实战162-圆角边框-基本使用
80 0
html+css实战162-圆角边框-基本使用
html+css实战32-input基本使用
html+css实战32-input基本使用
91 0
html+css实战32-input基本使用
html+css实战13-图片基本使用
html+css实战13-图片基本使用
73 0
html+css实战13-图片基本使用
|
前端开发
CSS伪元素的基本使用
CSS伪元素的基本使用
95 0
|
前端开发
前端基础:CSS伪类的作用和基本使用
前端基础:CSS伪类的作用和基本使用
173 0
|
Web App开发 前端开发
HTML/CSS的基本使用
  本篇博客主要介绍一下HTML/CSS的基本使用,关于它们的介绍便不在赘述,读者可自行google或百度。 一、HTML   先来简单介绍一下HTML标签:     HTML 标签是由尖括号包围的关键词,比如     HTML 标签通常是成对出现的,比如 和     标签对中的第一个标签是开始标签,第二个标签是结束标签     开始和结束标签也被称为开放标签和闭合标签   首先在写每个HTML的文档之前需要一个基本模板,一般的HTML编辑器都会自动生成。
1235 0
|
3天前
|
编解码 前端开发
编写代码中常见问题汇总(html和css)
编写代码中常见问题汇总(html和css)
13 0
|
4天前
|
存储 JavaScript 前端开发
笔.COOL,一个功能完备、使用便捷的在线HTML/CSS/JS以及Vue编辑器和作品分享平台
笔.COOL是一个新兴的在线 HTML/CSS/JS 及 Vue 编辑器,提供实时预览和云端存储功能。用户可以随时随地编写和保存代码,同时分享作品给他人预览和学习。它也是一个实用的 BUG 复现工具,支持嵌入编辑器到博客,促进代码交流。社区活跃,适合开发者展示作品、获取灵感和学习。
|
4天前
|
存储 移动开发 前端开发
使用HTML5和CSS3构建现代网页:技术详解与实践
【5月更文挑战第28天】本文详细介绍了使用HTML5和CSS3构建现代网页的技术与实践。HTML5新增语义化标签、多媒体支持、本地存储和表单验证等功能,提升了网页开发效率和用户体验。CSS3则带来了更多选择器、盒模型改进、背景与边框样式以及动画过渡效果,使网页设计更具视觉冲击力。通过实例展示了如何结合两者创建结构清晰、交互丰富、响应式的现代网页。