CSS基础__1

最新推荐文章于 2024-10-10 19:30:00 发布
最新推荐文章于 2024-10-10 19:30:00 发布
阅读量193 收藏
点赞数
分类专栏： CSS基础 文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/slom_fxt/article/details/120307647
版权

一、CSS是什么？

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

二、CSS的作用? 

CSS是用来为网页html元素设置/添加样式，使得html网页好看。

三、 在HTML网页中如何使用CSS?

1.内联定义 (Inline Styles)

将样式属性设置，通过style属性设置在html标记的开始标记中。

格式:<html标记  style=”样式名称1:样式值1;样式名称2:样式值2”>显示的内容</html标记>

2.内部样式块

将样式设置，放在head的style标记中。

格式:  css选择器{

          css样式名称:样式值;

                  css样式名称:样式值;

      css样式名称:样式值;

}

3.链入外部样式表文件 Linking to a Style Sheet

通过在head标记中的link标记将外部样式文件【.css】导入至当前的html文件中

         3.1创建外部样式文件【.css】

                css选择器{

                        css样式名称:样式值;

                        css样式名称:样式值;

                        css样式名称:样式值;

                }    注意后缀名是.css结尾

        2.head标记中的link标记将外部样式文件【.css】导入

                <link rel=stylesheet  href="样式文件的路径"  type="text/css">

例如：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>css如何在HTML中使用</title>
        <style>
            #p1{
                font-size: 30px;
                color: brown;
            }
        </style>
        <link rel="stylesheet" href="test.css">
    </head>
    <body>
        <h4>1.内联定义 (Inline Styles)</h4>
        <h5>将样式属性设置，通过style属性设置在html标记的开始标记中。</h5>
        <p style="color: red;font-size: 30px;">测试内联定义</p>
        <h4>2.内部样式块</h4>
        <h5>将样式设置，放在head的style标记中。</h5>
        <p id="p1">内部样式块</p>
        <h4>3.链入外部样式表文件</h4>
        <h5>通过在head标记中的link标记将外部样式文件【.css】导入至当前的html文件中</h5>
        <p class="p1">链入外部样式表文件</p>
    </body>
</html>

 四、CSS语法
 

 我们发现在内部样式块,链入外部样式表的方式中，编写css样式的操作格式是相同

格式:    css选择器{

                        css样式名称:样式值;

                        css样式名称:样式值;

                        css样式名称:样式值;

                }

上面编写css样式的操作格式有2部分组成

        1.css选择器具体样式设置--->键值对

        2.【css样式名称:取值】

例如：

#p1-------css选择器  

{font-size: 30px;color: blue; }-----具体样式设置，多个样式属性设置之间使用”;”分割。

 #p1{
                font-size: 30px;
                color: blue;
            }

 五、CSS选择器

css选择器就是选中需要设置样式的html元素。

css中提供的选择器很多。我们学习几个常用的选择器。

1.元素选择器

例如：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>元素选择器</title>
        <style>
            p{
                font-size: 30px;
                color:springgreen;
            }
        </style>
    </head>
    <body>
        <h4>1.元素选择器---根据html元素名称得到需要设置样式的html元素</h4>
        <p>测试元素选择器</p>
        <p>如果有多个名称相同的元素，全部被选中，作用同一种样式</p>
    </body>
</html>

 2.id选择器

例如：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>id选择器</title>
        <style>
            #p1{
                font-size: 30px;
                color: springgreen;
            }
        </style>
    </head>
    <body>
        <h4>id选择器---根据html元素的id属性值得到需要设置样式的html元素</h4>
        <p id="p1">测试id选择器</p>
        <p>如果有多个名称相同的元素，全部被选中，作用同一种样式</p>
    </body>
</html>

3.class（类）选择器

例如：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>class选择器</title>
        <style>
            .p1{
                font-size: 30px;
                color: springgreen;
            }
        </style>
    </head>
    <body>
        <h4>class选择器---根据html元素的class属性值得到需要设置样式的html元素</h4>
        <p class="p1">测试class选择器</p>
        <p>如果有多个名称相同的元素，全部被选中，作用同一种样式</p>
    </body>
</html>

 注意:选择器优先级: id  >  class   >  元素

 4.包含选择器

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>包含选择器</title>
        <style>
            #div1{
                width: 300px;
                height: 250px;
                background-color: springgreen;
            }
            #div2{
                width: 300px;
                height: 100px;
                background-color: red;
            }
            #div1 p{
                font-size: 30px;
                color: royalblue;
            }
           
        </style>
    </head>
    <body>
        <h4>包含选择器--得到父元素中所有子元素,包括子子元素.</h4>
        <div id="div1">
            <div id="div2">
                <p>测试包含选择器</p>
                </div>
        </div>
            <p>非div中的p元素</p>
    </body>
</html>

 5.子元素选择器

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>子元素选择器</title>
        <style>
            #div1{
                width: 300px;
                height: 100px;
                background-color: springgreen;
            }
            #div2{
                width: 300px;
                height: 50px;
                background-color: red;
            }
           #div2 > p{
                font-size: 30px;
                color: royalblue;
           }
           
        </style>
    </head>
    <body>
        <h4>子元素选择器--选中当前父元素的直接子元素，不包括子子元素</h4>
        <div id="div1">
            <div id="div2">
                <p>测试子元素选择器</p>
                </div>
        </div>
            <p>非div中的p元素</p>
    </body>
</html>

 6.属性选择器

例如：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>属性选择器</title>
        <style>
            /* 选择a标签中的target属性 */
            a[target]{
                font-size: 30px;
                color: seagreen;
            }
            /* 选择a标签中href属性是test2.html属性的 */
            a[href='test2.html']{
                font-size: 40px;
                color: red;
            }
            /* 得到a标签汇总href属性是test3.htnl和target属性是_self的 */
            a[href='test3.html'][target='_self']{
                font-size: 30px;
                color: saddlebrown;
            }
        </style>
    </head>
    <body>
        <h4>属性选择器--根据html元素的属性，得到需要设置css的html元素</h4>
        <a href="test1.html">打开test1.html文件</a><br>
        <a href="test2.html" target="_blank">打开test2.html文件</test></a><br>
        <a href="test3.html" target="_self">打开test3.html文件</a>
    </body>
</html>

 7.选择器分组

例如：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>选择器分组</title>
        <style>
           div{
               width: 350px;
               height: 200px;
               background-color: yellow;
           }
           #p1,#d1 h3,.p1>span{
                font-size: 30px;
                color: turquoise;
           }
        </style>
    </head>
    <body>
        <h4>选择器分组--得到同一个html文件中不同位置的元素，作用同一种样式</h4>
        <p id="p1">开始p元素</p>
        <div id="d1">
            <h3>包含在div中的标题标记</h3>
        </div>
        <p class="p1">div元素后面的<span>p元素</span></p>
    </body>
</html>

 注意：选择器在使用时候都是混合使用，可以让我们很快得到自己需要控制的元素。

六、CSS伪类

:link

a:link

选择所有未访问链接

:visited

a:visited

选择所有访问过的链接

:active

a:active

选择正在活动链接

:hover

a:hover

把鼠标放在链接上的状态

:focus

input:focus

选择元素输入后具有焦点

例如：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>css伪类</title>
        <style> 
          a:link{
              color: black;
              font-size: 20px;
          }
        a[href="test2.html"]:active{
             color: red;
             font-size: 30px;
         }
        a[href="test3.html"]:hover{
            color: yellow;
            font-size: 35px;
        }
        a[href="test4.html"]:visited{
            color: green;
            font-size: 40px;
        }
        </style>
    </head>
    <body>
        <h4>CSS伪类是用来添加一些选择器的特殊效果</h4>
        <h5>:link   a:link  选择所有未访问链接</h5>
        <a href="test1.html" target="_blank">测试CSS 伪类</a>
        <h5>:active  a:active    选择正在活动链接</h5>
        <a href="test2.html" target="_blank">测试CSS 伪类</a>
        <h5>:hover  a:hover 把鼠标放在链接上的状态</h5>
        <a href="test3.html">测试CSS 伪类</a>
        <h5>:visited  a:visited 选择过后的链接状态</h5>
        <a href="test4.html">测试CSS 伪类</a>
        <h5>:focus  input:focus 选择元素输入后具有焦点</h5>
    </body>
</html>

 

 七、具体样式设置

 1.css背景设置

background-color：颜色单词/颜色码 定义了元素的背景颜色

background-image：url('图片路径')描述了元素的背景图像，默认水平垂直方向平铺       

background-repeat：设置背景图像水平或垂直平铺

        repeat-x:水平平铺

        repeat-y:垂直平铺

        repeat:水平垂直平铺

        no-repeat:不平铺

background-attachment: 设置背景图像是否固定或者随着页面的其余部分滚动。

        scroll  背景图片随着页面的滚动而滚动，这是默认的。

        fixed   背景图片不会随着页面的滚动而滚动。

        local   背景图片会随着元素内容的滚动而滚动。

例如：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>背景设置</title>
        <style>
            body{
                /*background-color: hotpink;*/
                background-image: url("imgs/avatar04.png");
                background-repeat: no-repeat;
                background-attachment: local;
                background-position: center center;
            }
        </style>
    </head>
    <body>
        <h1>background-color:颜色单词/颜色码 定义了元素的颜色</h1>
        <h1>background-image:url("图片路径") 描述了元素的背景图片，默认水平垂直方向平铺</h1>
            <h2>background-repeat:设置背景图像水平或者垂直平铺</h2>
            <h2>repeat-x:水平平铺</h2>
            <h2>repeat-y:垂直平铺</h2>
            <h2>norepeat:不平铺</h2>
        <h1>background-attachment：设置背景图像是否固定或者随着其余网页滚动</h1>
            <h2>scroll 背景图像随着页面的滚动而滚动</h2>
            <h2>fixed 背景图像不会随着页面的滚动而滚动</h2>
            <h2>local 背景图像会随着元素内容滚动</h2>
        <h1>background-position:属性设置背景图像的起始位置</h1>
            <h2>left top/left center/ left bottom/right top/right center/ right bottom/center top/ center center/center bottom</h2>
        
    </body>
</html>

 2.css文本属性设置

color:颜色单词/颜色码---设置文字的颜色

text-align:left/center/right ---设置文本的水平对齐方式[居中或右对齐或左对齐]

text-decoration:overline/line-through/underline/none---设置或删除文本的装饰

text-transform:uppercase/lowercase/capitalize---用来指定在一个文本中的大写和小写字母,可设置大写或小写字母，或每个单词的首字母大写。

text-indent:数字px----指定文本的第一行的缩进

letter-spacing:数字px----设置字符间距

line-height:数字px----设置行高

vertical-align:top/middle/bottom----设置一个元素的垂直对齐方式

word-spacing:数字px----增加或减少字与字之间的空白

text-shadow:水平 垂直 模糊 颜色----设置文字阴影

 例如：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>文本属性设置</title>
        <style>
            #p1{
                color: lawngreen;
            }
            #p2{
               text-align: center; 
            }
            #p3{
                text-decoration:underline;
            }
            #p4{
                text-transform: capitalize;
            }
            .p2{
                text-indent: 20px;
                letter-spacing: 5px;
                line-height: 30px;
                word-spacing: 30px;
            }
            tr > td{
                vertical-align: bottom;
            }
            #p5{
                text-shadow: 3px 2px 2px blue;
            }
        </style>
    </head>
    <body>
        <p id="p1">color:颜色单词/颜色码 设置文字的颜色</p>
        <p id="p2">text-align:center/left/right 设置文本的水平对齐方式【居中或右对齐或左对齐】</p>
        <p id="p3">text-decoration:overline/line-through/underline/none 设置或删除文本的修饰</p>
        <p id="p4">text-transform:uppercase(大写)/lowercase(小写)/capitalize(首字母大写) 用来指定在一个文本中的大写和小写字母，可设置大写或小写字母，或每个单词的手字母大写</p>

        <p class="p2">
            text-indent:指定文本的第一行的缩进<br>
            letter-spacing:设置字符间距<br>
            line-height:设置字体行距<br>
            word-spacing:增加或减少字与字之间的空白<br>
            hello wangxing
        </p>
        <table border="1px">
            <tr style="height: 80px;">
                <td>vertical-align:top/middle/bottom----设置一个元素的垂直对齐方式</td>
            </tr>
        </table>
        <p id="p5">text-shadow:水平 垂直 模糊 颜色----设置文字阴影</p>
    </body>
</html>

 

slom_fxt
关注
专栏目录
HTML学习笔记（三）css选择器
qq_45288211的博客
08-23 309
一、css的引入方式 内联样式： 内联样式表就是把css代码直接写在现有的HTML标签中 缺点：样式与结构冗余 优点：优先级较高 <div style="color:red">设置文字的颜色为红色</div> 样式的内容写在元素的开始标签里，并且css样式代码要写在style=""双引号中，如果有多条css样式代码设置可以写在一起，中间用分号隔开。 这种样式只会对当前标签起作用，在测试的时候可以使用，不能对样式进行复用，不方便后期维护，不推荐使用 内部样式表 缺点：样式的复
css.rar_css_css a_css api_cssapi
09-22
1. **CSS基础知识**：CSS的基本语法包括选择器、属性和值。选择器定位到HTML中的特定元素，属性定义了元素的样式属性，而值则指定了该属性应如何呈现。例如，`color:red;`将文本颜色设置为红色。 2. **CSS a 标签**...
html应用样式p1,css在html中应用
weixin_42347873的博客
06-16 441
HTML文档中应用css样式大致有三种方法：1.link标签链接外部样式表；2.使用style元素包含样式表；3.使用style属性，即内联样式一.link标签链接外部样式表先看一条较为标准的link标记语句：link标记必须放在head元素中，且不能放在其他元素(如title)内部。至于其属性，rel 代表“关系“(relation)，在这里，关系为stylesheet，即文档的外部样式表，至于...
JavaWeb——css基础知识与它的三种使用方法和三种选择器
qq_44025396的博客
05-06 1800
什么是css css，全称Cascading Style Sheets，中文名：层叠样式表。它是一种用来表现（表现，指的是这些内容在页面上的展示形式。比如说。布局，颜色，大小等等）HTML或XML等文件样式的计算机语言，是用于增强控制网样式并允许将样式信息与网页内容分离的一种标记性语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。 css的语法规则 css通常...
link标签的用法及link属性大全
热门推荐
杨春建的博客
09-20 2万+
原文地址：http://blog.sina.com.cn/s/blog_161005e400102w5aj.html   link标签是网页头部head中的元素，在html语言中，link标签是单独出现的，并且可以被多次使用，该元素的用途是与外部文件建立链接，例如我们打开“搜狐门户网”的首页查看源代码：  在一个html文件中，link标签还包含许多其它属性，其中最常见的是使用link
网页设计HTML和css（5）
weixin_44795592的博客
10-16 207
CSS 补充： 智能表单样式的扩展 max-width： 表示最大宽度 text-align： 字体居中 某些属性样式直接写到form里面不行 需要写在 style = " " 里面 css的入门 1.css简介：         CSS指的是Cascading Style Sheets，即层叠样式表， 是一种设计网页样式及布局的技术。所谓“层叠”...
css-template.rar_asp CSS_css template_css模板_div template
09-22
总的来说，这个"css-template.rar"提供了一个基于ASP的网页设计基础，利用CSS和div元素进行布局，同时包含了必要的样式文件和可能的图像资源。对于ASP开发者来说，这是一个方便的起点，可以帮助他们快速搭建具有专业...
css.rar_CSS matlab_CSS matlab_css算法
09-19
对于初学者来说，理解并实现这个MATLAB代码可以加深对CSS算法的理解，并为学习其他图像处理算法打下基础。通过调整参数和阈值，可以观察到算法对图像边缘检测效果的影响，从而更好地掌握边缘检测的核心概念。 总之...
Div_CSS.rar_DIV css布局_css大全_css布局
09-23
2. **CSS基础** - CSS是用于描述HTML或XML（包括SVG、MathML等各种XML方言）文档样式的语言，它可以控制元素的字体、颜色、大小、位置等视觉效果。 - CSS选择器用于匹配HTML元素，如类选择器（`.class`）、ID选择...
DIV+CSS.rar_DIV_aspnet div css _css_css div_css div asp p
09-19
1. “DIV+CSS的网站设计教程下载.doc”可能是一个Word文档，详细介绍了使用DIV+CSS进行网站设计的基本步骤和技巧。 2. “DIV+CSS布局大全.pdf”可能是一本全面的PDF电子书，涵盖了从基础到高级的DIV+CSS布局策略。 3...
HTML5 之 Link 标签
无
06-16 1万+
概述   link 元素用于链接外部css样式表等其他相关外部资源。 link   其中link中包括如下属性。 href：指明外部资源文件的路径，即告诉浏览器外部资源的位置 hreflang：说明外部资源使用的语言 media：说明外部资源用于哪种设备 rel：必填，表明当前文档和外部资源的关系 sizes：指定图标的大小，只对属性rel="icon"生效 type：说明外部资源的 MIME 类型，如text/css、image/x-icon rel   rel核心属性的参数值如下，也可参考 MDN.
html中link标签的属性
weixin_48182934的博客
07-17 816
标签的作用：使当前文档和外部文档之间建立连接 标签包含的属性： href：设置或获取目标的URL rel：定义当前文档与被链接文档之间的关系，stylesheet即代表css样式表 type：定义当前文本内容以层叠样式表（CSS）来解析 media：设置或获取媒体类型 ...
CSS常用的选择器学习
GalenGao
04-25 561
简介 最近工作中常常会与前端页面交互，掌握一定的前端知识还是必要的，而入门需要了解一下CSS选择器非常有必要。 基本CSS选择器 元素选择器 元素选择器就是标签选择器，作用是选中页面中所有相同的标签元素 html <div> <p> <span>我是p标签中的span</span> </p> ...
第四章CSS层叠样式表
chuanggui5310的博客
05-17 133
叠样式表”。实用CSS可以改变HTML的基本特性，从而控 制传统网页上的元素，诸如精确的空白、段落缩进、文本 的外观和链接的状态等等。这样，你就可以实现对网页元 素的格式控制。 CSS不仅允许你指定单个网页的外观， 还可以被用来为网...
第4章编辑css样式,第4章 使用CSS样式.ppt
weixin_39606638的博客
08-03 268
第4章 使用CSS样式 4.1 学习任务：认识CSS样式表 4.2 学习任务：CSS规则的定义和创建 4.3 学习任务：在网页文档中使用CSS样式 4.4 上机实训——用CSS美化网页 4.1 学习任务：认识CSS样式表 4.1.1 CSS的基本概念 4.1.2 CSS样式的引用 4.1.1 CSS的基本概念 早期的网页一般是由HTML标签控制的文...
《Web前端技术H5+CSS3》笔记--第四章 初识CSS3[云图智联]
07-20 513
1.1 CSS概述 1.1.1 什么是CSS HTML 标签原本被设计为用于定义文档内容。通过使用 h1、p、table 这样的标签，HTML 的初衷是表达“这是标题”、“这是段落”、“这是表格”之类的信息。同时文档布局由浏览器来完成，而不使用任何的格式化标签。 由于两种主要的浏览器（Netscape 和 Internet Explorer）不断地将新的 HTML 标签和属性（比如字体标签和颜色属性）添加到 HTML 规范中，创建文档内容清晰地独立于文档表现层的站点变得越来越困难。 为了解决这个问题
CSS超链接样式常见四种状态控制
ajh42238的博客
02-15 2146
一、首选设置一下以下4种状态常： 1、a:active是超级链接的初始状态 2、a:hover是把鼠标放上去时的状况 3、a:link 是鼠标点击时 4、a:visited是访问过后的情况。 二、常见的使用情况有以下三种： 1、对父级元素的css类的定义 案例超链接代码<div class="ink_1"><a href="htt...
CSS ID选择器(三)
weixin_30847865的博客
04-08 141
一、ID选择器 ID选择器使用"#"前缀标识符进行标识，后面紧跟指定的元素的ID名称。 如 #box{ width:100px; height:100px;} 元素的ID名称是唯一的，只能对应于文档中一个具体的元素。在HTML中，用来构建整体框架的标签应该定义ID属性，因为这此对象一般在页面中都是比较唯一的，固定的，不会重复，如Logo包含框，导航条，主体包含框，版权区域等。 ...
使用纯CSS和JavaScript来实现一个转盘抽奖效果
最新发布
weixin_46328739的博客
10-10 741
使用纯CSS和JavaScript来实现一个转盘抽奖效果,抽到机率相同。
DIV与CSS网站编辑基础教程
1. css.css - 这是一个CSS样式文件，其中可能包含了各种CSS规则和样式声明。这些样式将定义网页元素的外观和格式，如字体、颜色、边距、定位等。学习者可以通过分析和修改这个文件来理解CSS是如何工作的。 2. CSS+...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值