css基础知识讲解 -1

css基础知识

概括了解

CSS-层叠样式表

​ (Cascading Style Sheets)层叠样式表

用途

样式定义如何显示 HTML 元素

样式通常存储在样式表中

把样式添加到 HTML 中,是为了解决内容与表现分离的问题

外部样式表可以极大提高工作效率

外部样式表通常存储在 CSS 文件中

分类

  • 内部样式-head区域style标签里面

  • 外部样式-link调用

    格式:
    	"main.css" rel="stylesheet" type="text/css">
    
  • 内联样式-标签元素里面(style=“属性:属性值;属性:属性值”)

相同权值情况下,CSS样式的优先级总结来说,就是——就近原则(离被设置元素越近优先级别越高):

内联样式表(标签内部) > 嵌入样式表(当前文件中)> 外部样式表(外部文件中)

格式

样式规则格式: 选择符{属性:值}

单一选择符的复合样式声明应该用分号分割: 选择符{属性1:值1; 属性2:值2}、

a{
     
    font-size:36px;
    color:#FF0004;
}

常用属性

css基础知识讲解 -1_第1张图片

css基础知识讲解 -1_第2张图片

css基础知识讲解 -1_第3张图片

基础语法

CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明。

css基础知识讲解 -1_第4张图片

/*值的不同写法和单位
除了英文单词 red,我们还可以使用颜色值 #ff0000:*/
p {
      color: #ff0000; }

/*为了节约字节,我们可以使用 CSS 的缩写形式:*/
p {
      color: #f00; }

/*我们还可以通过两种方法使用 RGB 值:*/
p {
      color: rgb(255,0,0); }
p {
      color: rgba(0,0,0,0.9); }

选择器的运用

  1. id:定义元素在页面中独一无二的名称 #id

  2. class:引用类选择器时使用(CSS中) .class, class命名不能以数字开头

选择器的分组

可以对选择器进行分组,这样,被分组的选择器就可以分享相同的声明。

用逗号将需要分组的选择器分开。

 h1,h2,h3,h4,h5,h6 {
     color: green;} 

派生选择器

分3种情况:后代选择器,子元素选择器,相邻兄弟选择器

  • 后代选择器
如:h1 em {color:red;}

表示在h1标签内部的所有em标签
如:
<h1>
	<em>111em>
h1>

或者:
<h1>
    <h2>
        <em>222em>
    h2>
h1>
  • 子选择器

    子选择器只会选择某个元素的子元素,而不会扩大到任意的后代元素。

h1 > strong {color:red;}
h1标签的内部第一个标签是strong时, 该strong标签起作用
如:
<h1>
    <strong>111111strong>
h1>

不包括下面这种情况:
<h1>
    <h2>
        <strong>222222strong>
    h2>
h1>
  • 相邻兄弟选择器
h2 + strong {
     color:red;} 
h2标签的下一个strong标签起作用

<h1>
    <h2>This is a heading<h2>
    <strong>This will be styled</strong>  <!--起作用-->
    <strong>This will not be styled</strong> <!--不起作用-->
<h1>

li + li {color:red;}

<div> 
    <ul>     
        <li>List item 1li>  
        <li>List item 2li>  
        <li>List item 3li>  
    ul> 
     <ol> 
         <li>List item 1li> 
         <li>List item 2li> 
         <li>List item 3li> 
    ol> 
div>

    这个例子中li+li是选择紧挨着li后面的第一个<li>,所以第一个<li>不会被选择;
    而第二个<li>是紧挨着第一个li的,所有会被选择;
    第三个<li>是紧挨着第二个<li>的,也会被选择。

CSS链接样式

 a:link {
     color:#FF0000;} 	/* 未被访问的链接 */
 a:visited {
     color:#00FF00;} /* 已被访问的链接 */
 a:hover {
     color:#FF00FF;} 	/* 鼠标指针移动到链接上 */
 a:active {
     color:#0000FF;} 	/* 正在被点击的链接 */

你可能感兴趣的:(html基础,css,html)