css如何清除默认样式并设置公共样式

css如何清除默认样式并设置公共样式

通常的清除默认样式

*{    margin:0;    padding:0}li{    list-style:none}img{    vertical-align:top;    border:none}

(推荐教程:CSS教程)

设置默认字体

body,button, input, select, textarea /* for ie */ {    font: 14px/1.5 tahoma, 5b8b4f53, sans-serif;}h1, h2, h3, h4, h5, h6 { font-size: 100%; font-weight: normal;}address, cite, dfn, em, var { font-style: normal; } /* 将斜体扶正 */code, kbd, pre, samp { font-family: courier new, courier, monospace; } /* 统一等宽字体 */small { font-size: 12px; } /* 小于 12px 的中文很难阅读, 让 small 正常化 *//** 重置列表元素 **/ul, ol { list-style: none; }/** 重置文本格式元素 **/a { text-decoration: none; }a:hover { text-decoration: underline; }sup { vertical-align: text-top; } /* 重置, 减少对行高的影响 */sub { vertical-align: text-bottom; }/** 重置表单元素 **/legend { color: #000; } /* for ie6 */fieldset, img { border: 0; } /* img 搭车:让链接里的 img 无边框 */button, input, select, textarea { font-size: 100%; } /* 使得表单元素在 ie 下能继承字体大小 *//* 注:optgroup 无法扶正 *//* 重置 HTML5 元素 */article, aside, details, figcaption, figure, footer,header, hgroup, menu, nav, section,summary, time, mark, audio, video {    display: block;    margin: 0;    padding: 0;}mark { background: #ff0; }/* 设置placeholder的默认样式 */:-moz-placeholder {    color: #ddd;    opacity: 1;}::-moz-placeholder {    color: #ddd;    opacity: 1;}input:-ms-input-placeholder {    color: #ddd;    opacity: 1;}input::-webkit-input-placeholder {    color: #ddd;    opacity: 1;}

select标签

select {    border: none;    appearance:none;    -moz-appearance:none;    -webkit-appearance:none;    /*在选择框的最右侧中间显示小箭头图片*/    background: url("http://ourjs.github.io/static/2015/arrow.png") no-repeat scroll right center transparent;    padding-right: 14px;}

重置表格元素

立即学习“前端免费学习笔记(深入)”;

table {border-collapse: collapse;border-spacing: 0;}

重置hr

hr {    border: none;    height: 1px;}

清除 的默认样式

ul, ol, {   margin: 0;  padding: 0;  list-style: n;}

.button按钮

.button{    border:0;    background-color:none    outline:none;    -webkit-appearance: none;//用于IOS下移除原生样式}

.标签

a{    text-decoration:none;    color:#333;}

标签

input{    border: none;    appearance:none;    -moz-appearance:none;    outline:none;//input标签聚焦不出现默认边框:    -webkit-appearance: none;//用于IOS下移除原生样式}//or:input:focus{ outline:none; }//input标签聚焦不出现默认边框:border: none; appearance:none; -moz-appearance:none; outline:none;//input标签聚焦不出现默认边框: -webkit-appearance: no

更多编程相关内容,请关注创想鸟编程入门栏目!

以上就是css如何清除默认样式并设置公共样式的详细内容,更多请关注创想鸟其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 chuangxiangniao@163.com 举报,一经查实,本站将立刻删除。
发布者:程序猿,转转请注明出处:https://www.chuangxiangniao.com/p/1614877.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2025年12月24日 04:37:01
下一篇 2025年12月24日 04:37:20

相关推荐

  • 关于CSS中display:flex与inline-flex属性的详细介绍

    flex介绍 Flex是Flexible Box的缩写,意为”弹性布局”,用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为Flex布局。 flex: 将对象作为弹性伸缩盒显示 inline-flex:将对象作为内联块级弹性伸缩盒显示 (推荐学习教程:CSS教程) 立即…

    好文分享 2025年12月24日
    000
  • css如何实现流程导航效果?有哪几种方法?

    方法一:利用裁剪(该方法ie下不支持) 利用裁剪 clip-path: polygon(),直接画出一个三角 唯一一点需要算出大致百分比就可以画出来   .nav-box { display: flex; list-style: none; font-size: 14px; } .nav-box l…

    2025年12月24日
    000
  • css如何实现图片抽屉式效果

    首先,我们来看一下效果: 这个效果实现原理很简单:只要你掌握css3动画和过渡相关知识就行,不用js代码; (推荐教程:CSS入门教程) HTML代码: 立即学习“前端免费学习笔记(深入)”; 国际美妆抢先看 @@##@@ 女神标准大讨论 @@##@@ 吃货也能越吃越瘦 @@##@@ 连衣裙抢头条 …

    2025年12月24日
    000
  • css如何进行空格处理

    white-space 属性 CSS 提供了一个white-space属性,可以提供更精确一点的空格处理方式。该属性共有六个值,除了一个通用的inherit(继承父元素),下面依次介绍剩下的五个值。 1、white-space: normal white-space属性的默认值为normal,表示浏…

    2025年12月24日
    000
  • css如何实现始终将footer固定在底部

    目标: 把 footer 区固定在底部,无论页面高度多宽,它始终在底部不会变,就像移动端的菜单一样。 (推荐教程:CSS入门教程) 实例: document #demo{ position: fixed; left: 0px; bottom: 0px; width: 100%; height: 50…

    2025年12月24日
    000
  • CSS定位怎么理解?

    CSS 定位 (Positioning) 属性允许你对元素进行定位。 CSS 定位和浮动 CSS 为定位和浮动提供了一些属性,利用这些属性,可以建立列式布局,将布局的一部分与另一部分重叠,还可以完成多年来通常需要使用多个表格才能完成的任务。      ( 推荐学习:CSS入门教程 ) 定位的基本思想…

    2025年12月24日
    000
  • CSS外边距如何定义

    围绕在元素边框的空白区域是外边距。设置外边距会在元素外创建额外的“空白”。 设置外边距的最简单的方法就是使用 margin 属性,这个属性接受任何长度单位、百分数值甚至负值。 CSS margin 属性                                         ( 推荐学习:C…

    2025年12月24日
    000
  • CSS怎么设置链接样式

    我们能够以不同的方法为链接设置样式。 设置链接的样式                          ( 推荐学习:CSS入门教程 ) 能够设置链接样式的 CSS 属性有很多种(例如 color, font-family, background 等等)。 链接的特殊性在于能够根据它们所处的状态来设…

    2025年12月24日
    000
  • CSS绝对定位详解

    设置为绝对定位的元素框从文档流完全删除,并相对于其包含块定位,包含块可能是文档中的另一个元素或者是初始包含块。 元素原先在正常文档流中所占的空间会关闭,就好像该元素原来不存在一样。元素定位后生成一个块级框,而不论原来它在正常流中生成何种类型的框。 CSS 绝对定位                  …

    2025年12月24日
    000
  • CSS浮动怎么做

    浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止。 由于浮动框不在文档的普通流中,所以文档的普通流中的块框表现得就像浮动框不存在一样。 CSS 浮动,在 CSS 中,我们通过 float 属性实现元素的浮动。                      ( 推荐学习:CSS…

    2025年12月24日 好文分享
    000
  • CSS轮廓(outline)是什么

    轮廓(outline)是绘制于元素周围的一条线,位于边框边缘的外围,可起到突出元素的作用。 轮廓(outline)属性指定元素轮廓的样式、颜色和宽度。                           ( 推荐学习:CSS教程 ) CSS 轮廓(outline) 轮廓(outline)是绘制于元素…

    2025年12月24日
    000
  • 13个加速开发效率的现代CSS框架

    本文将向你介绍一系列顶级css框架。有些人可能听说过,也可能对有些人是全新的。但它们都提供了各种有用的先进功能,可以改善你的工作流程。开始吧! 专注于 CSS 的框架 让我们先从一些专注于 CSS 的框架开始。你将找到所有类型的布局和UI元素来自己构建项目的基础。有些甚至可能包含一些 JavaScr…

    2025年12月24日 好文分享
    000
  • CSS的相邻兄弟选择器何时用

    相邻兄弟选择器(Adjacent sibling selector)可选择紧接在另一元素后的元素,且二者有相同父元素。 选择相邻兄弟                  ( 推荐学习:CSS教程 ) 如果需要选择紧接在另一个元素后的元素,而且二者有相同的父元素,可以使用相邻兄弟选择器(Adjacent…

    2025年12月24日 好文分享
    000
  • CSS 绝对定位是什么

    设置为绝对定位的元素框从文档流完全删除,并相对于其包含块定位,包含块可能是文档中的另一个元素或者是初始包含块。 元素原先在正常文档流中所占的空间会关闭,就好像该元素原来不存在一样。元素定位后生成一个块级框,而不论原来它在正常流中生成何种类型的框。             ( 推荐学习:CSS教程 )…

    2025年12月24日
    000
  • 怎么使用CSS做图像透明

    通过 CSS 创建透明图像是很容易的。                              ( 推荐学习:CSS教程 ) 注:CSS opacity 属性是 W3C CSS 推荐标准的一部分。 实例 1 – 创建透明图像 定义透明效果的 CSS3 属性是 opacity。 立即学习…

    2025年12月24日
    000
  • css hover的用法

    css hover的用法 CSS :hover 选择器定义和用法 :hover 选择器用于选择鼠标指针浮动在上面的元素。 提示::hover 选择器可用于所有元素,不只是链接。 提示::link 选择器设置指向未被访问页面的链接的样式,:visited 选择器用于设置指向已被访问的页面的链接,:ac…

    2025年12月24日
    000
  • 如何使用CSS隐藏滚动条?

    本篇文章将介绍如何使用css隐藏页面的滚动条,具有一定的参考价值,希望对学习css的同学有帮助! 如何使用css隐藏滚动条? 如何隐藏滚动条,同时仍然可以在任何元素上滚动? 首先,如果需要隐藏滚动条并在内容溢出时显示滚动条,只需要设置overflow:auto样式即可。 想要完全隐藏滚动条只需设置o…

    2025年12月24日
    000
  • dw如何新建css规则

    1、在菜单中单击“文件”选择“新建” 2、在新建文档窗口,选择“空白页”—“HTML”,文档类型选择“XHTML1.0 transitional”,单击“创建”按钮 3、将插入点放在文档中,然后在菜单栏单击“格式”,在弹出的下拉菜单中选择“CSS样式”—“新建” 立即学习“前端免费学习笔记(深入)”…

    2025年12月24日 好文分享
    000
  • CSS 派生选择器通过什么来定义

    CSS 派生选择器 通过依据元素在其位置的上下文关系来定义样式,你可以使标记更加简洁。(推荐学习:CSS视频教程) 在 CSS1 中,通过这种方式来应用规则的选择器被称为上下文选择器 (contextual selectors),这是由于它们依赖于上下文关系来应用或者避免某项规则。在 CSS2 中,…

    2025年12月24日
    000
  • CSS的id选择器怎么定义

    CSS id 选择器 id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。 id 选择器以 “#” 来定义。   ( 推荐学习:CSS入门教程 ) 下面的两个 id 选择器,第一个可以定义元素的颜色为红色,第二个定义元素的颜色为绿色: 立即学习“前端免费学习笔…

    2025年12月24日
    000

发表回复

登录后才能评论
关注微信