css基础概述

css :cascading Style sheets 层叠样式表

  是用于控制页面布局和样式的

css好处:功能强大,将html页面和样式进行分离

  降低耦合度,开发效率更高

css和htnl使用

  1内联样式<div  style = "color="red"></div> //不推荐

  2内部样式 --较为常用

    <style>

        div{

    color:red;

          }

    </style>

    <div><div>

  外部样式

  在head标签定义link属性

    <link rel="stylesheet" href="css/a.css">

  css选择器 语法

       选择器 {

        属性名1:属性值1

        属性名2:属性值2  

      }

    什么是选择器:是筛选具有相同特征的元素

  选择器分类

      基础选择器

        1类选择器

          .类名 {}

        2id选择器

          #选择器名{}

        3元素选择器器

          元素名{}

        4并集选择器

        选择器1,选择器2....{}

    扩展选择器

      选择所有元素

        *{}

      后代选择器

        选择器1 选择器2{}

      子选择器

        选择器1>选择器2{

        }

      属性选择器

        元素名称[属性名=属性值]{}

      伪类选择器

        元素:元素状态 {}

        a:link{}

    属性:

      字体文本

        font-size

        color:文本

        algin:对齐方式

        line-height 行高

      背景

      background

      边框

        boder

      尺寸

        width 宽度

        height 高度

      盒子模型:

        mangin 外边距

        padding 内边距

        box-sizing: border-box;  设置盒子的属性,让width和height就是最终盒子的大小

        float 浮动

          left 左浮动

          right:右浮动

原文地址:https://www.cnblogs.com/qmk-716/p/11875600.html

时间: 2024-10-08 10:41:56

css基础概述的相关文章

HTML和CSS基础概述,第一周总结

2.标签 每一个标签都有开头和结尾 每一个标签都是用<>括起来的 每一个标签的结尾都必须用"/"结尾 3.网页的标签结构 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <body></body> <

前端知识学习一 :CSS基础

一.CSS概述 css指的是层叠样式表,样式定义如何显示HTML元素,样式通常存储在样式表中, 把样式添加到HTML4.0中,是为了解决内容和表现分离的问题.外部样式表通常存储在css文件     中.多个样式定义可层叠为一. 二.层叠次序 一般而言,所有的样式都会根据下面的规则层叠于一个新的虚拟样式表中,其中4拥有最高的优先权. 1.浏览器的缺省设置 2.外部样式表(通过引入的外部.css文件) 3.内部样式表(位于<head>标签内部) 4.内联样式表(在HTML元素内部) 因此属性的优先

CSS基础知识---浮动,定位和盒模型

转载请注明出处! 需要掌握的三个最重要的CSS概念是浮动,定位和盒模型. 盒模型概述: 页面上的每个元素都被看做一个矩形框(元素框or盒模型),这个框由元素内容,内边距,边框和外边距组成. 内边距出现在内容区域的周围,如果为元素添加背景,那么背景就会应用于由内容和内边距组成的区域.添加边框会在内边距的区域外边加一条线.在边框外边是外边距,外边距是透明的,一般用它来控制元素之间的间隔. 内边距,边框,和外边距是可选的,默认值为零.但是许多元素由用户代理样式表设置了外边距和内边距,我们可以将元素的m

蓝鸥零基础学习HTML5—html+css基础

蓝鸥零基础学习HTML5-html+css基础 一.课程目标 1.了解前端开发职位:2.掌握常用标签以及语义及用法:3.掌握常用css的特性,掌握基础布局技巧:4.掌握整站规划概念. 二.适用人群 零基础积极学习html5者 三.课程简介 本课程主要讲解了 html+css的基础知识,包括html模板.标签.css基础样式.布局.表格表单.整站等等,是进行前端开发的基础.Html+css是前端开发的基础,大部分前端开发工程都需要从html+css布局开始,html+css的基础非常重要,是前端开

HTML&CSS基础学习笔记8-预格式文本

<pre>标签的主要作用是预格式化文本.被包围在 pre 标签中的文本通常会保留空格和换行符.而文本也会呈现为等宽字体. <pre>标签的一个常见应用就是用来表示计算机的源代码.当然你也可以在你需要在网页中预显示格式时使用它. 会使你的文本换行的标签(例如<h>.<p>)绝不能包含在 <pre> 所定义的块里.尽管有些浏览器会把段落结束标签解释为简单地换行,但是这种行为在所有浏览器上并不都是一样的. 更多学习内容,就在码芽网http://www.

Css3之高级-7 Css动画(概述、关键帧、动画属性)

一.动画概述 动画概念 - 过渡属性只能模拟动画效果 - animation 属性可以制作类似 Flash 动画 - 通过关键帧控制动画的每一步 - 使元素从一种样式逐渐变化为另一种样式 - 实现复杂的动画效果 - 浏览器兼容性 - 最新版本支持良好 - Chrome 和 Safari 需要前缀 -webkit- - FireFox 需要前缀 -moz- - Opera 需要前缀 -o- 动画示例 - 声明动画 - 创建一个已命名的动画 - 使用 @keyframes 声明动画的关键帧 - 为元

Form标签+Css基础

一.Form表单标签 <form action="" method=""></form> 表单就是用来将用户的信息提交到服务器,服务器会将信息存储或者根据信息查询数据(增删改查). 表单中所有的内容都要写在form标签中. <input type="text" value="哈哈哈哈" placeholder="请输入用户名"> Input文本输入框,type类型为tex

HTML&CSS基础学习笔记13—无序列表

无序列表 有时我们的工作繁忙,杂事很多,怕忘记,就会把事情一件件列出来,防止忘记. 它们的排列顺序对于我们来说并不重要,可以随意调换,我们将它称为无序列表,HTML里用<ul>标签来表示无序列表,列表里的项目则用<li>标签来表示: 1 2 3 4 5 <ul>     <li></li>     <li></li>     ... </ul> 看一段实例代码: 对于的浏览器显示结果是这样的: 更多内容学习,请

前端开发:css基础知识之盒模型以及浮动布局。

前端开发:css基础知识之盒模型以及浮动布局 前言 楼主的蛮多朋友最近都在学习html5,他们都会问到同一个问题 浮动是什么东西?  为什么这个浮动没有效果?  这个问题楼主已经回答了n遍.今天则是把它写到我的博客中,想知道自己过来翻就好啦 ^_^  下面楼主把当前的自己对css的基础认知一一给大家道来...... 盒模型 谈到盒模型,有经验的小伙伴一定滚瓜烂熟,无非就是 内容(content).填充(padding).边框(border).边界(margin): 这些属性我们可以把它转移到我们