【精选】CSS入门必看知识点大合集

CSS简介

【精选】CSS入门必看知识点大合集_第1张图片

CSS概念

CSS(Cascading Style Sheets)层叠样式表,又叫级联样式表,简称样式表

CSS文件后缀名为.css

CSS用于HTML文档中元素样式的定义

为什么需要CSS

使用css的唯一目的就是让网页具有美观一致的页面

语法

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

选择器通常是您需要改变样式的 HTML 元素

每条声明由一个属性和一个值组成

属性(property)是您希望设置的样式属性(style attribute)。每个属性有一个值。属性和值被冒号分开

DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    <style>
        h3 {
            color: red;
            font-size: 50px;
        }
    style>
head>

<body>

    <h3>标题标签h3>
    
body>

html>

CSS的引入方式

内联样式(行内样式)

要使用内联样式,你需要在相关的标签内使用样式(style)属性。Style 属性可以包含任何 CSS 属性

温馨提示

缺乏整体性和规划性,不利于维护,维护成本高

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
head>
<body>
    <p style="color: red;font-size: 30px;">我是P标签p>
body>
html>

内部样式

当单个文档需要特殊的样式时,就应该使用内部样式表。你可以使用

"box">
"box2">

文本属性

text-align元素文本的水平对齐方式

指定元素文本的水平对齐方式

描述
left 文本居左排列,默认值
right 把文本排列到右边
center 把文本排列到中间
h1 {text-align:center}
h2 {text-align:left}
h3 {text-align:right}

text-decoration下划线、上划线、删除线

text-decoration 属性规定添加到文本的修饰,下划线、上划线、删除线等

描述
underline 定义下划线
overline 定义上划线
line-through 定义删除线
h1 {text-decoration:overline} 
h2 {text-decoration:line-through} 
h3 {text-decoration:underline}

text-transform控制文本的大小写

text-transform 属性控制文本的大小写

描述
captialize 定义每个单词开头大写
uppercase 定义全部大写字母
lowercase 定义全部小写字母
h1 {text-transform:uppercase;}
h2 {text-transform:capitalize;}
p {text-transform:lowercase;}

text-indent首行文本的缩进

text-indent 属性规定文本块中首行文本的缩进

p{
    text-indent:50px;
}

温馨提示

负值是允许的。如果值是负数,将第一行左缩进




    
    
    Document
    


    

"p1">这是一个P标签

"p2">元素的背景是元素的总大小,包括填充和边界(不包括外边距)。 默认情况下background-image属性放置在元素的左上角,如果图像不够大的话会在垂直和水平方向平铺图像, 如果图像大小超过元素大小从图像的左上角显示元素大小的那部分

表格属性

使用 CSS 可以使 HTML 表格更美观

表格边框

指定CSS表格边框,使用border属性

table, td { 
  border: 1px solid black; 
}

折叠边框

border-collapse 属性设置表格的边框是否被折叠成一个单一的边框或隔开

table { border-collapse:collapse; }
table,td { border: 1px solid black; }

表格宽度和高度

width和height属性定义表格的宽度和高度

table { width:100%; } 
td { height:50px; }

表格文字对齐

表格中的文本对齐和垂直对齐属性

text-align属性设置水平对齐方式,向左,右,或中心

td { text-align:right; }

垂直对齐属性设置垂直对齐

td { height:50px; vertical-align:bottom; }

表格填充

如果在表的内容中控制空格之间的边框,应使用td和th元素的填充属性

td { padding:15px; }

表格颜色

下面的例子指定边框的颜色,和th元素的文本和背景颜色

table, td, th { border:1px solid green; }  //边框颜色
td { background-color:green; color:white; } //背景颜色  字体颜色



    
    
    Document
    


   
文本框 文本框 文本框
文本框 文本框 文本框
文本框 文本框 文本框

关系选择器

关系选择器分类

  1. 后代选择器
  2. 子代选择器
  3. 相邻兄弟选择器
  4. 通用兄弟选择器

后代选择器

定义

选择所有被E元素包含的F元素,中间用空格隔开

语法

E F{}
  • 宝马
  • 奔驰
  1. 奥迪
ul li{
  color:green;
}



    
    
    Document
    


    
  • 苹果
  • 香蕉
  • 蔬菜
    1. 黄瓜
    2. 茄子

子代选择器

定义

选择所有作为E元素的直接子元素F,对更深一层的元素不起作用,用>表示

语法

E>F{}


div>a{
  color:red
}




    
    
    Document
    


    
      


相邻兄弟选择器

定义

选择紧跟E元素后的F元素,用加号表示,选择相邻的第一个兄弟元素,只能向下选择

语法

E+F{}

h1元素

第一个元素

第二个元素

h1+p{
  color:red;
}



    
    
    Document
    


    

h1元素

第一个元素

第二个元素

通用兄弟选择器

定义

选择E元素之后的所有兄弟元素F,作用于多个元素,用~隔开,只能向下选择

语法

E~F{}

h1元素

第一个元素

第二个元素

h1~p{
  color:red;
}



    
    
    Document
    


    

h1元素

第一个元素

第二个元素

你可能感兴趣的:(CSS学习,css,tensorflow,前端)