• CSS基础


    CSS 指层叠样式表 (Cascading Style Sheets)

    CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明。 selector {declaration1; declaration2; ... declarationN } 属性(property)是您希望设置的样式属性(style attribute)。每个属性有一个值。属性和值被冒号分开。 selector {property: value} h1 {color:red; font-size:14px;} p { color: #ff0000; } p { color: rgb(255,0,0); } p { color: rgb(100%,0%,0%); } 如果值为若干单词,则要给值加引号 p {font-family: "sans serif";} CSS 对大小写不敏感。不过存在一个例外:如果涉及到与 HTML 文档一起工作的话,class 和 id 名称对大小写是敏感的。

    选择器的分组 你可以对选择器进行分组,这样,被分组的选择器就可以分享相同的声明。用逗号将需要分组的选择器分开。在下面的例子中,我们对所有的标题元素进行了分组。所有的标题元素都是绿色的。 h1,h2,h3,h4,h5,h6 {color: green;}

    继承:子元素从父元素继承属性,打破继承的方法是重复子元素重复定义,与c中的全局变量相似。 body {font-family: Verdana, sans-serif;} p  {font-family: Times, "Times New Roman", serif;}

    派生选择器:通过依据元素在其位置的上下文关系来定义样式,派生选择器允许你根据文档的上下文关系来确定某个标签的样式,如希望列表中的 strong 元素变为斜体字,而不是通常的粗体字: li strong {font-style: italic; font-weight: normal;}

    id 选择器:id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。id 选择器以 "#" 来定义。 id 属性为red 的元素显示为红色,而 id 属性为 green 的元素显示为绿色。 #red {color:red;} #green {color:green;}

    id 选择器和派生选择器 #sidebar p {font-style: italic;text-align: right;margin-top: 0.5em;}

    类选择器:类选择器以一个点号显示,类名的第一个字符不能使用数字! .center {text-align: center}

    class 也可被用作派生选择器 .fancy td {color: #f60;background: #666;} 类名为 fancy 的更大的元素内部的表格单元都会以灰色背景显示橙色文字。(名为 fancy 的更大的元素可能是一个表格或者一个 div)

    属性选择器,下面的例子为带有 title 属性的所有元素设置样式: [title]{color:red;}

    属性和值选择器,下面的例子为 title="W3School" 的所有元素设置样式: [title=W3School]{border:5px solid blue;}

    属性和值选择器 - 多个值,包含指定值的 title 属性的所有元素设置样式。适用于由空格分隔的属性值: [title~=hello] { color:red; } 带有包含指定值的 lang 属性的所有元素设置样式。适用于由连字符分隔的属性值: [lang|=en] { color:red; }

    外部样式表引用:外部样式表可以在任何文本编辑器中进行编辑。文件不能包含任何的 html 标签。样式表应该以 .css 扩展名进行保存,不要在属性值与单位之间留有空格。

    内部样式表,不一定在

    内联样式

    <#p style="color: sienna; margin-left: 20px"> This is a paragraph </p>

    多重样式 外部:h3 {color: red;text-align: left; font-size: 8pt;} 内部:h3 {text-align: right; font-size: 20pt; }

    最终样式:color: red; text-align: right; font-size: 20pt;

  • 相关阅读:
    9、par画图参数
    awk
    Android Studio Gradle下载的包在哪里?
    .net core webapi 在原有基础上修改。
    .net core webapi 部署到 IIS
    原来部署好的WCF(可以调用),因为部署.net core,而安装了DotNetCore.2.0.5-WindowsHosting,导致现在WCF站点不可以。
    sql2008R2新建链接服务器。
    Dynamics CRM 365常用js记录。
    <div>标签输入文字
    dynamics crm 365 附件上传图片并且显示。
  • 原文地址:https://www.cnblogs.com/hongfu/p/4323834.html
Copyright © 2020-2023  润新知