CSS入门学习

最新推荐文章于 2022-01-21 16:44:21 发布

Soda_lw

最新推荐文章于 2022-01-21 16:44:21 发布

阅读量606

点赞数 2

分类专栏：学习笔记文章标签： css 标签

本文链接：https://blog.csdn.net/Soda_lw/article/details/75451640

版权

学习笔记专栏收录该内容

40 篇文章 0 订阅

订阅专栏

一、Css
随着万维网的出现，对html要求越来越多，迫于压力，html出现,,<s>等标签，几年后暴露出严重的问题。1.由于html既写结构性又写样式，导致页面缺乏结构性，既降低了网页的可访问性。2.页面维护越来越困难。

与html相比，Css支持更丰富的文档外观，可以为任何元素的文本和背景设置颜色，允许在任何元素外围设置边框；允许改变文本的大小，装饰（如下划线）间隔，甚至可以确定是否显示文本。

CSS 指层叠样式表（Cascading style Sheets)

Css就是控制页面布局和样式，以Html为基础，提供丰富的功能，如字体、颜色、背景的控制及整体排版等，而且还可以针对不同的浏览器设置不同的样式。

二、CSS的语法结构
选择器{
属性：值；
属性：值；
}
属性和属性值之间用冒号（：）隔开，定义多个属性时，属性之间用应为输入法下的分号隔开。

三、什么是选择器
实现CSS对HTML页面样式的控制，如果要让这些样式对HTML页面中的元素实现一对一，一对多或者多对一的控制，这就需要用到CSS选择器，HTML页面中的元素就是通过CSS选择器进行控制的。

四、选择器的分类
基础选择器
标签选择器
类选择器
ID选择器
复合选择器

五、类选择器
类选择器是对html标签中class属性进行选择，CSS类选择器的选择符是“.”类选择器在css样式编码中是最常用到的。
使用步骤：
1.使用合适的标签把要修饰的内容标记起来，如：web开发
2.使用class=“类选择器名称”为标签设置一个类，如下：web开发
3.设置类选择器css样式，如下：
.one{color:red;}

六、标签选择器其实就是html代码中的标签

<head>
        <meta charset="UTF-8">
        <title></title>
        <style>

            p{
                color:#ededed;
            }
            span{
                font-size:40px;
                font-family:楷体;
                color:rgb(255,145,123);
                }
        </style>
    </head>
    <body>
        <p>锄禾日当午</p>
        <span>汗滴禾下土</span>

    </body>

七、ID选择器
ID选择器和类选择器用法一样，区别是同一个HML页面中不能有相同的ID名称（使用多个相同的ID选择器，浏览器不会报错但是不符合W3C标准，所以ID选择器命名必须要唯一性）

<head>
        <meta charset="UTF-8">
        <title>ID选择器的使用</title>
        <style>
            /*ID选择器通过#来使用*/
            #company_name{
                width:300px;
                height:300px;
                border:2px solid red;
            }



        </style>
    </head>
    <body>
        <!--添加id-->
        <div id="company_name">
        阿里巴巴
        </div>
    </body>

八、css中选择器的命名规范：
1.不要使用汉字、拼音及html的标签去命名一个选择器，反例：zhuce，p，a，daohang；
2.数字不能开头，反例：1name，35age
3.符号置可以使用下划线“_”，反例：my&&name,$money

九、ID选择器与类选择器
（区别、使用场景等）
1：类选择器：好比人的名字刘德华可以多人使用
2：id选择器：好比人的身份证唯一性有且只能使用一次
3：不用于类选择器，ID选择器不能结合使用
写样式的时候，大部分都是用类，极少的使用id，不提倡用id去写样式，因为他的权重太高，id主要是为了js做准备。

十、通配符选择器
通配符选择器用“*”表示，他是所有选择器中作用范围最广的，能匹配页面中所有的元素。

十一、CSS常用属性
width 宽，height 高
color：前景色，一般用于设置文字颜色
background-color：背景颜色
font-size：字体大小，单位通常使用px（像素）
text-align：设置位置，值可以使center，left，right等
font-family：设置字体样式，如宋体等；
font-weight：设置字体加粗，normal 默认，bold加粗
font-style：设置字体风格，normal默认，italic斜体

十二、标签元素分类
html中，根据显示模式不同，将标签分为几类：
块级标签
行内标签
行内块标签

十三、块级标签
在html中div,p,h1-h6,form等是块级标签
特点：独占一个自然段
1.一个块级元素独占一行
2.元素的高度、宽度、行高及边距都可设置
3.在不设置宽度的情况下，为充满父容器（占父级容器的100%，如果父级是浏览器，占浏览器宽度的100%）
行内元素：
行内元素无法设置其上下边距但是行内元素可以转换为块级元素
display ：block
行内元素转换为行内块元素用 display：inline-block

十四、div与span
无语义标签，没有具体的含义和样式
div可以理解为一个容器，如果相对网页中某一些元素组成一个区域整体去设置css样式，可以将这些元素放入一个容器div中

span：文字，如果有一些文字没有任何标签包裹进行说明描述，想要对其设置CSS样式，通过span包裹文字，设置类或id选择器进行设置

十五、CSS语法和写
文字属性和写
语法：
选择器{
font：font-style font-weight font-size/line-weight font-family}
必须按照顺序去书写，必须设置字体大小和字体

<head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            .fontAll{
                /*倾斜，加粗，30像素大小黑体*/
                font:italic  bold 30px/30px 黑体;
            }
        </style>
    </head>
    <body>
        <span class="fontAll">自由的感觉</span>
    </body>

十六、标签指定式选择器
标签制定选择器（即。。。又。。。）
标签制定式选择器又称交际选择器，有两个选择器构成，其中第一个为标记选择器，第二个为class选择器或id选择器，两个选择器之间不能有空格，如h3.special或p#one

十七、后代选择器（使用广泛）
后代选择权（包含选择器）
后代选择器用来选择元素或元素组成的后代，其写法就是把外层标记写在前面，内层标记写在后面，中间用空分离，当标记发生嵌套时，内层标记用称为外层标记的后代，如:

.title input{…}
#content a{…}

十八、并集选择器
使用逗号“，”隔开多个选择器，对多个标签进行统一设置，可以说具体的标签，可以说class，id

十九、专门用于input的选择器
通过type去区分每一个input标签
input 【type=button】{…}

二十、css优先级
内联样式最大，内联样式的优先级最高。
ID选择器的优先级，仅次于内联样式。
类选择器优先级低于ID选择器
标签选择器低于类选择器

二十一、css伪类
a:link{属性：值}链接默认状态
a:visited{属性：值}链接访问之后的状态
a:hover{属性：值}鼠标放到链接上现实的状态
a:active{属性：值}链接激活的状态
：focus{属性：值} 获取焦点

二十二、background
background-color:设置背景颜色
background-image:设置背景图片
background-repeat：设置背景平铺
one-repeat repeat-x repeat-y
background-postion:设置背景位置
left,right,center,top,bottom
background-attachment 设置背景时候固定

<title>背景的使用</title>
        <style>
            body{
                /*使用否文件夹中的图片*/
                background-image:url(img/19196455-F592-44C3-A3C2-2DCDC61B9B8E.png);
                background-repeat:repeat;
            }

        </style>

背景连写的格式

background:red url(“1.png”) no-repeat ；

二十三、行高
浏览器默认的字体大小：16px
浏览器默认的字体行高：18px
行高=上边距+字体大小+下边距

如果行高单位是px，行高与文字大小无关
如果行高单位是em，行高=文字大小*行高值
如果行高单位是%，同上
如果行高没有单位，同上

二十四、盒子模型
就是把HTML页面中的元素看做是一个矩形的盒子，也就是一个盛装内容的容器。每个矩形都由元素的内容、内边距、边框和外边距组成
1.border
语言：
border：宽度边框的样式边框的颜色

<style>
            .box1{
                width:100px;
                height:100px;
                border:2px solid red;
                /*border:宽度，样式，颜色
                 dashed:块状虚线
                 dotted：点状虚线
                 solid：描边*/
            }

        </style>