正文 

当前位置： 首页 > java > java框架

css基础

如果。。。      2022-02-13     425

关键词：

[目录]

目录

一、CSS基础介绍

  1. CSS层叠样式表（Cascading Style Sheet）：用于定义HTML内容在浏览器内的显示样式
  2. 特点：
    • CSS简化HTML相关标签，网页体积小，下载快
    • 解决内容与表现分离的问题
    • 更好的维护网页，提高工作效率

二、CSS基础语法

  1. CSS样式规则：CSS规则由两部分构成：选择器，声明
  2. CSS引用
<style type="text/css"><!--写在<<head></head>标签内-->
    css样式
</style>
  1. CSS注释：/注释语句/

三、CSS的使用方法

  1. 引用CSS样式的方法
    • 行内样式（内联样式）：在开始标签内添加style样式属性，如：<p style="color:res;">内容</p>
    • 内部样式表（嵌入样式）：把CSS样式代码写在style样式中，如：<style type="text/css">样式</style>
    • 外部样式表：把CSS样式代码写在独立的一个文件中，扩展名.css，引入外部文件，<link href="xx.css" rel="stylesheet" type="text/css"/>，要放到标签内
    • 导入式：@import“外部CSS样式”
  2. CSS使用方法区别
属性
值
位置
加载
行内样式 开始标签style html文件内 同时
内部样式 <head>中<style>内 html文件内 同时
链入外部样式 <head>中<link>引用 .css样式文件.html文件分离 页面加载时，同时加载CSS样式
导入式@import 在样式代码最开始处 .css样式文件与.html文件分离 在读取完html文件之后加载
  1. 使用链入外部样式的好处
    • CSS和html分离
    • 多个文件可以使用同一个样式文件
    • 多文件引用同一个CSS文件，CSS只需要下载一次
  2. CSS使用方法优先级


    行内样式 > 内部样式 > 外部样式
  • 链入外部样式表与内部样式表之间的优先级取决于所处位置的先后
  • 最后定义的优先级最高（就近原则）
  1. CSS优先级规则
  • 同一样式表中：
    • 权值相同：就近原则（离被设置元素越近优先级越高）
    • 权值不同：根据权值来判断CSS样式，哪种CSS样式权值高就使用哪种样式
  1. 选择器权值
    • 标签选择器：权值为1
    • 类选择器和伪类：权值为10
    • ID选择器：权值为100
    • 通配符选择器：权值为0
    • 行内样式：权值为1000
  2. 权值规则
    • 统计不同选择器的个数
    • 每类选择器的个数乘以相应权值
    • 把所有的值相加得出选择器的权值
  3. !import规则


    可调整样式规则的优先级，添加在样式规则之后，中间用空格隔开

四、CSS选择器

  1. 标签选择器：以HTML标签作为选择器
  2. 类选择器：为HTML标签添加class属性，通过类选择器来为具有此class属性的元素设置CSS样式，可对不同类型元素的同一个名称的类选择器设置不同的样式规则，同一个元素可以设置多个类，之间有空格隔开
  3. ID选择器：为HTML标签添加ID属性，通过ID选择器来为具有此ID的元素设置CSS规则
  4. 群组选择器：集体统一设置样式
  5. 全局选择器：所有标签设置样式
  6. 后代选择器：使用后代选择器设置，之间用空格隔开
  7. 伪类：伪类伪类选择器定义特殊状态下的样式，无法用标签id,class及其它属性
伪类
值
:link 未访问的链接
:visited 已访问链接
:hover 鼠标悬停状态
:active 激活的链接
  • 伪类:hover和:active兼容
    • IE6及更早版本支持<a>元素的4种状态
    • IE6浏览器不支持其他元素的:hover和:acitve
  • 链接伪类的顺序


    :link > :visited > :hover > :active
    • a:hover必须置于a:link和a:visited之后才有效
    • a:active必须置于a:hover之后，才有效
    • 伪类名称对大小写不敏感

五、CSS继承和层叠

  1. CSS继承：从父元素那继承部分CSS属性
  2. 继承的好处：父元素设置样式，子元素可以继承部分属性，减少CSS代码
  3. CSS层叠
    • 可以定义多个样式
    • 不冲突时，多个样式可层叠为一个
    • 冲突时，按不同样式规则优先级来应用样式

六、CSS样式命名规则

  • 采用英文字母、数字以及“-”和“_”命名
  • 以小写字母开头，不能以数字和“-”、“_”开头
  • 命名形式：单字，连字符，下划线和驼峰
  • 使用有意义命名

常用的CSS样式命名

  • 页面结构
页头：header    导航：nav   页面主体：main  侧栏：sidebar   页尾：footer
栏目：column    内容：content/container     页面外围控制：wrapper
容器：container 左中右：left、right、center
  • 导航
导航：nav   左导航：leftsidebar 主导航：mainnav 右导航：rightsidebar
子导航：subnav  菜单：menu  订导航：topnav  子菜单：submenu
边导航：sidebar 标题：title 摘要：summary
  • 功能
标志：logo  注册：register  广告：banner    搜索：search
登录：login 功能区：shop    登录条：loginbar    标题：title









css基础

CSS基础目录CSS基础1.什么是CSS2.发展史3.快速入门基本入门CSS的优势4.CSS的三种导入方式1.什么是CSSCascadingStyleSheet层叠级联样式表CSS：表现层（美化网页）字体，颜色，边距，高度，宽度，背景图片，网页定位，网页浮动...2.发展... 查看详情

css基础入门

目录CSS基础入门一、CSS介绍和引用1、CSS概述2、CSS的基础语法3、CSS引入方法：二、CSS背景样式1、设置背景色2、设置背景图像3、背景定位4、背景关联5、通过background属性一次将背景三、CSS文本样式1、常用的文本样式四、CSS选择... 查看详情

css基础入门

目录CSS基础入门一、CSS介绍和引用1、CSS概述2、CSS的基础语法3、CSS引入方法：二、CSS背景样式1、设置背景色2、设置背景图像3、背景定位4、背景关联5、通过background属性一次将背景三、CSS文本样式1、常用的文本样式四、CSS选择... 查看详情

前端基础html基础之css

一、id选择器、class选择器、标签选择器、属性选择器、组合选择器　　设置css样式有三种，第一种是通过在head中style定义选择器，写css样式　　第二种通过在标签中添加属性的方式定义css样式style=“background-color：black”　　第... 查看详情

css基础学习

    查看详情

css基础css(代码片段)

查看详情

css基础

css基础1、 Css新建格式Css语法：选择符{属性名称：属性值；} 1、内部样式表（嵌套到页面中）     语法：<styletype="text/css">     css语句</style>注：使用style标记创建样式时，最好... 查看详情

移动端----css基础设置

<html><head><metacharset="utf-8"><title>移动端----CSS基础设置</title><metaname="keyword"content="移动端----CSS基础设置"><metaname="discription"content="移动端----CSS基础设置">< 查看详情

css基础

　　　　　　　　　　　　　　　　　　　　CSS介绍CSS（CascadingStyleSheet，层叠样式表）定义如何显示HTML元素。当浏览器读到一个样式表，它就会按照这个样式表来对文档进行格式化（渲染）渲染）。　　　　　　　　　　　　... 查看详情

css基础

链接：http://www.cnblogs.com/yuanchenqi/articles/6856399.html知识预览CSS语法css的四种引入方式 css选择器css属性操作Caution！后台管理布局css响应式布局课下作业回到顶部CSS语法CSS规则由两个主要的部分构成：选择器，以及一条或多条声... 查看详情

css入门课程css基础

...网页内容与外观分离利于维护，提供工作效率 css语法基础css语法：选择符+申明，其中申明是指属性-值形式，注意css样式区分大小写css使用方式1）行内样式 查看详情

css入门基础基础语法规则

基础语法规则CSS规则由两个主要的部分构成：1.选择器:通常是需要改变样式的HTML元素2.一条或多条声明：由一个属性和一个值组成。每个属性有一个值。属性和值被冒号分开。选择器：分组：用逗号可以将需要分组的选择器分开... 查看详情

css基础

二、css基础1、css层叠样式表　　(1)、行内样式表(style属性)　　<pstyle="">　　(2)、内部嵌入样式表(style元素)　　<styletype="text/ess">　　　　body{background-color#FF0000;}　　　　.boss{}　　　　#id{}　　</style> (3)、外部引... 查看详情

css基础

1、css与html结合方式1、style属性<divstyle="">2、style标签<styletype="text/css">div{}</style>3、文件导入<styletype="text/css">@importurl(css.html)</style>选择器：1、标签选择器<styletype="text/css 查看详情

css基础

内容主要来源：https://www.runoob.com/css/css-syntax.html CSS  指层叠样式表(CascadingStyleSheets)语法：CSS规则由两个主要的部分构成：选择器，以及一条或多条声明；   CSS注释以"/*"开始,以"*/"结束；id选择器如果你要在... 查看详情

css基础学习16.css过渡

    查看详情

css基础

 １.1 CSS作用?设置网页样式或者进行网页布局１.2 CSS概念?CascadingStyleSheets（层叠样式表或者级联样式表）?层叠：指的是CSS中的一个特性。总结： ◆通过css控制标签的样式（文字大小，颜色，背景颜色，过渡，动画... 查看详情

css基础语法

CSS样式规则CSS规则由两部分构成：选择器，声明例如：h1{color:red;font-size:14px;}CSS引用：写在<head></head>标签内：<styletype="text/css">　　CSS样式...</style>CSS注释：html注释：<!--注释语句-->CSS注释：/*注释语句*/ 查看详情