Foryouos

CSS基础教学

HTML本章所用属性补充

属性作用
<b> </b>内容加粗
<i> </i>斜体文本
<u> </u>文本加下划线
html属性
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <p>
        <font face="隶书" size="5px" color="red">欢迎来到css</font>
    <br/>
        借助<b><i>CSS</i></b>,<u>你的网站更精彩</u>
    </p>

</body>
</html>
呈现效果

传统HTML格式修饰的缺点

  • 书写繁琐，结构臃肿，这行效率较低
  • 无法做到“一改全改”
  • 过多的关注内容的显示和表现形式

引入CSS

  • 引入CSS后，在html中只需给相关内容指定选择器，不必书写大量格式代码，代码更简洁，执行效率更高；
  • 修改时，只需在CSS文件中改动少量代码，即可实现对所有此文件的网页的更改，即批量更改
  • CSS的引用，使网页中内容与形式的“紧耦合”变成“松耦合”，html只需观念朱web的内容，对于内容的表现及呈现形式，交给CSS

CSS(Cascading Style Sheets) ,层叠样式表，用于控制页面样式并允许允许样式信息与内容分离的一种标记性语言

页面构成

  • 外观，布局-CSS
  • 内容-HTML
  • 内容与表示分离是非常重要的web原则
  • HTML不包含样式，整个页面通过CSS文件来改变

CSS优势

  • 内容与变现相分离
  • 提高页面浏览数读
  • 易于维护与改版

CSS基本语法

简单的单选题器的语法模板：

selector{
    property : value;
    property : value;
    ...
    property : value;
}
<!--举例-->
h1{
    font-family:"宋体";
    color:red;
}

多选择器的语法模板

selector1,selector2{
    property : value;
    property : value;
    ...
    property : value;
}
<!--举例-->
h1,h2{
    color:green;
}

CSS引入方式

  • 行内引入
  • 内嵌式引入
  • 链接式引入

行内引入（尽量避免）

<h1 style="color: blue;">
        This heading will be blue now.
    </h1>
行内引入

内嵌式引用（尽量避免）

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        h1 {
            color: red;
        }
    </style>
</head>
<body>
    <h1>
        This heading will be blue now.
    </h1>

</body>
</html>
内嵌式引入

链接式引用

<!--html代码-->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="style.css" type="text/css" rel="stylesheet"/>
</head>
<body>
    <h1>
        This heading will be blue now.
    </h1>

</body>
</html>
/*style.css  css代码 ，此代码为css的注释*/
h1{
    color: green;
}
链接式引用

三种情况注意：

如果同时使用，运行效果依据：

行内>内嵌>链接

CSS属性

CSS属性描述值
color(文本）前景色颜色（颜色名称，RGB，或HEX）
background-color元素的背景色颜色（颜色名称，RGB，或HEX）
CSS属性

CSS属性–Font

属性描述值
font-family所用字体字体名称，如“宋体”，“黑体”
font-size字体大小单元值，百分比，命名值
font-style是否倾斜normal , italic(斜体） , oblique（倾斜）
font-weight是否加粗normal,bold,bolder,lighter,inherit,100-900
font-variant设定小型大写字母normal，small-caps,inherit
font设置所有字体属性style，weight，size，family
css属性-font
/*css文件*/
h2{
    font-family: 华文宋体;
}
p{
    font-family: Courier;
    font-size: 14pt;
}
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="style.css" type="text/css" rel="stylesheet"/>
</head>
<body>
    <h2>
        This heading will be blue now.
    </h2>
    <p>
        this a 字体测试
    </p>

</body>
</html>
呈现效果

CSS属性-text

属性描述值
text-align行内容对齐left，center，right，justify
text-decoration增加下划线underline,overline,line-thrugh
blink,none
text-indent首行缩进px,pt,%,em
text-overflow如何处理太长文本clip,ellipsis,ellipsis-word
text-shadow设置文本阴影例：px,px,px,#ff0000
text-shadow设置文本阴影例:px,px,px,#ff0000
text-transfom修改文本大小写capitalize ,uppercase,lowercase
line-height设置行高px,pt,%,em
letter-spacing设置字符间距px,pt,%,em
word-spacing设置字间距px,pt,%,em
css属性–text

CSS属性-background

属性描述值
background-color背景颜色颜色（名称，RGB，HEX）
background-image背景图片url(“图片URL”)
background-repead是否及如何重复背景图片repeat,repeat-x,repeat-y,no-repeat
background-attachment背景图片是否固定或者页面其余部分滚动fixed,scroll
background简写属性，在一个声明中设置所有背景属性#ff0000
url(/i/eg_bg_03.gif) no-repeat fixed center
css属性-backgound
/*css文件*/
h2{
    font-family: 华文宋体;
}
p{
    font-family: Courier;
    font-size: 14pt;
}
body{
    background-image: url("网站修改.png");
    background-repeat: repeat-x;
    background-position: center;
}

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="style.css" type="text/css" rel="stylesheet"/>
</head>
<body>
    <h2>
        This heading will be blue now.
    </h2>
    <p>
        this a 字体测试
    </p>

</body>
</html>
呈现效果

CSS属性—list

/*css文件*/

ol{
    list-style-type: armenian;
}
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="style.css" type="text/css" rel="stylesheet"/>
</head>
<body>
    <h2>
        This heading will be blue now.
    </h2>
    <p>
        this a 字体测试
    </p>
    <ol>
        <li>HTML</li>
        <li>css</li>
        <li>php</li>
    </ol>


</body>
</html>
自定义list呈现效果

注意

样式继承与冲突

多种样式应用到一个元素，这样样式将被继承

更紧的匹配将覆盖一般意义的继承

样式冲突：两种样式发生相同时属性冲突时，后面的样式优先

ID和ID选择器

  • 一页上允许给任何元素一个唯一的ID
  • 每个ID必须唯一，每个页面仅能用一次

对ID格式进行格式化CSS，使用#ID

/*css文件*/

ol{
    list-style-type: armenian;
}
#mission{
    font-style: italic;
}
<p id="mission">Our mission is to provide the most spectacular spatulas and splurge on our specials until
     our customers <q>esplode</q> with splendor!</p>
ID格式化CSS

链接到页面中的某部分—-锚点

  • 一个链接可能包含包括ID，前面要加一个#号
  • 浏览器将载入相关页面，并且滚动到包含该ID的元素
<p id="mission">Our mission is to provide the most spectacular spatulas and splurge on our specials until
     our customers <q>esplode</q> with splendor!</p>
    <p>
        Visit<a href="https://www.foryouos.com">foryouos.com</a> to get
        textPad editor.
    </p>
    <a href="#mission">View our Mission statement</a>
锚点

类与类选择器—-类

  • 类可为一组元素设置相同的样式
  • 不像ID，类可以被多次使用
    <p class="shout">Spatula City! Spatula City!</p>
    <p class="special">See our spectacular spatula specials!</p>
    <p class="special">Today only:satisfaction guaranteed.</p>
类与选择器

类选择器

.special{
    font-weight: bold;
}
p.shout{
    color: red;
    font-family: Courier;
}
/*css文件*/
类选择器
属性描述
:active向被激活的元素增加样式
:hover当鼠标悬浮在元素上方时，向元素增加样式
:link向未被访问的链接增加样式
:visited向已被访问的链接增加样式
:focus向拥有键盘输入焦点的元素增加样式
伪类选择器
/*css*/
a:link{color: #FF0000}
a:visited{color: #00FF00}
a:hover{color: #FF00FF}
a:active{color: #0000FF}
    <p><b><a href="style.css" target="_blank">这是一个链接。</a></b></p>
    <p><b>注释：</b>在CSS定义中，a:hover必须位于a:link和a:visited之后，这样才能生效</p>
    <p><b>注释：</b>在CSS定义中，a:active必须位于a:hover之后，这样才能生效</p>
<!--html-->
伪类选择器

<div> </div> 分割区 对一个页面实现不同的功能显示

span 仅在一定范围内使用样式的行内元素

页面划分(div)

  • 改标签用来指出页面的逻辑区域
  • 缺省情况下，它是不显示的，但是可以在其中应用样式
    <!--HTMl-->
<div class="shout">
        <h2>Spatula City!</h2>
        <p class="special">See our spectacular</p>
        <p>we'll beat any advertised price!</p>
    </div>
/*css文件*/
.special{
    background-color: yellow;
    font-weight: bold;
}
.shout{
    color: red;
    font-family: Courier;
}
页面划分
HTML5关于页面划分的相关标签

span的使用

仅在一定范围内使用样式的行内元素

  <h2>Spatula City!</h2>
        <p>See our <span class="special"> spectacular</span></p>
        <p>we'll beat <span class="shout">any advertised price!</span> </p>
span行内元素

后代选择器

<!--HTML-->
<ul class="newslist">
    <li>html</li>
    <li>CSS</li>
    <li>Javascrip</li>
</ul>
/*css文件*/
.newslist {
    background-color: yellow;
    font-weight: bold;
}
后代选择器
/*css文件*/
.newslist  li {
    background-color: yellow;
    font-weight: bold;
}

子元素选择器


        <ul class="newslist">
            <li>html</li>
            <li>CSS</li>
            <li>Javascrip</li>
            <ul>
                <li>apple</li>
                <li>android</li>
            </ul>
        </ul>
/*css文件*/
li {
    background-color: cyan;
    font-weight: normal;
}
.newslist {
    background-color: yellow;
    font-weight: bold;
}
子元素选择器

扩展阅读

CSS样式优先级

选择器优先级

页面布局及盒模型

块元素布局

块元素布局

行内元素布局

行内元素布局

整页布局

整页布局

盒模型

CSS盒模型主要思想是每个元素的布局由四部分组成

  • 元素的内容显示区(content area);
  • 围绕着元素的边界（border）；
  • 内容和边界的距离（padding）;
  • 边界和其它内容外边界的距离（margin）
盒模型

border

border
<h2>CSS基础知识</h2>
/*css文件*/
h2 {
    border: 5px solid red;
    border-left: thick dotted #cc0088;
    border-bottom-color: rgb(0,128,128);
    border-bottom-style: double;
}
border运行效果

border—-table collapse

    <table>
        <tr><th>学号</th><th>成绩</th></tr>
        <tr><td>2130505052</td><td>89</td></tr>
        <tr><td>2130822535</td><td>58</td></tr>
    </table>
/*css文件*/
table,td,th {
    border:2px solid black;
}
成效效果
    <table>
        <tr><th>学号</th><th>成绩</th></tr>
        <tr><td>2130505052</td><td>89</td></tr>
        <tr><td>2130822535</td><td>58</td></tr>
    </table>
/*css文件*/
table,td,th {
    border:2px solid black;
    border-collapse: collapse;
}
border-collapse呈现效果

box-shadow 

    <h1>Web编程基础</h1>
    <p>学习HTML，CSS</p>
    <p>PHP,哈哈</p>
/*css文件*/
p {
    border: 1px dotted black;
    box-shadow: 10px 10px 5px gray;
}
h1 {
    box-shadow: 20px 20px 10px gray inset;
}
box-shadow

padding

属性含义
padding4边的padding
padding-bottom
padding-left
padding-right
padding-top		1边的padding
padding
h1 { padding:1em 2em 3em 4em ;}

注意: 从top开始，沿顺时针方向，即top,right,bottom,left

h1 { padding : 1em 4em ;}

注意：从第一项指top和bottom，第二项指right，left

padding示例

<h1>Web编程基础</h1>
    <h1>第一讲</h1>
    <h2>第二讲</h2>
    <h3>第三讲</h3>
    <h4>第四讲</h4>
/*css文件*/
h1 {
    padding: 1em;
    background-color: yellow;
    border: 2px solid black;
}
h2 {
    padding: 0em;
    background-color: #BBFFBB;
}
h3 {
    padding-left: 200px;
    padding-top: 30px;
    background-color: green;
}
padding示例

margins

属性含义
margin4边的margin
margin-bootom
margin-left
margin-right
margin-top		1边的margin
margins
h1 { margin:1em 2em 3em 4em ;}

注意: 从top开始，沿顺时针方向，即top,right,bottom,left

h1 { margin : 1em 4em ;}

注意：从第一项指top和bottom，第二项指right，left

    <h1>Web编程基础</h1>
    <h1>第一讲</h1>
    <h2>第二讲</h2>
    <h3>第三讲</h3>
    <h4>第四讲</h4>
/*css文件*/
h1 {
    margin: 1em;
    background-color: yellow;
    border: 2px solid black;
}
h2 {
    margin: 0em;
    background-color: #BBFFBB;
}
h3 {
    margin-left: 200px;
    padding-top: 30px;
    background-color: green;
}
margin示例
默认样式

floating元素

属性含义值
width设置元素内容显示区的宽度一种尺寸（px,pt,%,em）
float浮动，即从正常内容流中提升元素left,right,none(default)
width和float

注意：width属性仅对块元素和img元素有效

<div>
        <h1>学习web</h1>
        <p>第一个块元素</p>
        <span>第一个行内元素</span>
 </div>
/*css文件*/
h1,p,span {
    border:2px solid black;
    width: 50%;
}
p{
    text-align: center;
}
span {
    background-color: red;
    color: white;
}
width
 <div>
        <p><img src="https://i2.kknews.cc/SIG=k2clg6/ctp-vzntr/1534508967149q7o61qp7op.jpg" alt="koala" class="headericon"  />树袋熊</p>
    </div>
/*css文件*/
p{
    width: 800px;border: 2px solid black;
}
img.headericon{
    float: right;
    width: 202px;
    border: 1px dotted black;
}
border

浮动元素经常会设置一个width值

如果没有指定width值，其他内容将不能环绕着浮动元素

属性含义值
clear规定元素的哪一侧不允许其他浮动元素left,right,both,none(default)
overflow属性规定当内容溢出元素框时发生的事情visible(default),hidden,scroll ,auto
css属性描述值
column-count规定元素应该被分隔的列数一个整数
column-gap规定列之间的间隔尺寸（px，pt，em，%）
column-rule设置列之间的竖线宽度，样式和颜色规则2px solid green
column-span规定元素应横跨多少列1或者all
column-width规定列的宽度尺寸（px，pt，em，%）
多列属性
属性含义
width，height设置元素内容显示区的宽度和高度
max-width
max-height
min-width
min-height		设置元素的最大，最小高度和宽度
width和height

注意：以上 属性仅对块元素和img元素有效，如果出现在其它元素中国，将被忽略

属性描述值
vertical-align设置元素的垂直对齐方式baseline(默认),与安娜苏放置在父元素的基线上，
top,元素的顶部与行中最高元素的顶端对齐
middle元素放置在父元素的中部
sub垂直对齐文本的下标
super，垂直对齐文本的上标
text-top元素顶端与父元素字体的低昂段对齐
text-bottom元素的订单与父元素字体的低端对齐
a size or %
垂直对齐

定位及元素可见性

属性含义值
position对页面元素进行定位static:默认值，没有定位
relative:相对于其正常位置的偏移量
absolute：绝对定位的元素，相对于static定位以外的第一个父元素进行定位
fixed:绝对定位的元素，相对于浏览器窗口进行定位
top,bottom,left，right元素边界的偏移量尺寸（px，pt，em，%）
定位
属性含义值
z-index设置元素的3维折叠顺序auto:堆叠顺序与父元素相等
an interger:设置元素的堆叠顺序
z-index
    <h1>这是一个标签</h1>
    <img class="x" src="psc.png"/>
    <p>默认的z-index是0.z-index -1拥有最低的优先级1拥有最高的等级</p>
/*css文件*/
img.x {
    position: absolute;left: 0px;
    top: 0px;z-index: -1;
}
-1图片最低优先级
属性含义值
display设置元素应该生成的框的类型block:元素将显示为块元素，元素前后带有换行符
visibility设置元素能否可见visible:默认值，元素是可见的
hidden：元素是不可见的
opacity设置 元素的透明度从0.0(完全透明)到1.0(完全不透明）
元素可见性
<h2>这是一个标题</h2>
    <h2>这是另一个标题</h2>
/*css文件*/
h2 {
    background-color: yellow;
    border: 1px solid black;
    display: inline;
}

将列表显示为行内元素

<ul id="menubar">
       <li>新闻</li>
       <li>友情链接</li>
       <li>会员</li>
       <li>注册</li>
   </ul>
/*css文件*/
li{
    padding: 0.5em;
    border: 2px solid gray;
    display: inline;
}
列表显示为行内元素

visibility属性

display和visibility的主要区别

-display：none ;元素不会占用页面上的空间

-visibility:hidden;虽然它的内容用户看不到，但元素仍然占用页面空间

作者

由 yuheshui 
[email protected]
青春无负西东，岁月自成芳华

相关文章

发表评论

邮箱地址不会被公开。 必填项已用*标注

HTML 基础

2020-08-09

JavaScipt基础

2020-09-09