css导入方式；各种选择器；字体样式；文本样式

最新推荐文章于 2024-04-26 22:14:41 发布

大吖么大白菜

最新推荐文章于 2024-04-26 22:14:41 发布

阅读量94

点赞数

分类专栏： css 文章标签： css

本文链接：https://blog.csdn.net/weixin_45964083/article/details/115960327

版权

css 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

导入方式

1.行内样式：在标签元素中，编写一个style属性，编写样式即可

<h1  style="color: red">标签<h1>

2.内部样式：style标签

<style>
        h1{
            color: red;
           }
</style>

3.外部样式
在css网页内编写，然后导入

<link  rel="stylesheet"  href="目录地址">

优先级：行内样式最大，如果没有行内样式就是谁最后编译就是谁。

选择器

作用：选择页面上的某一个或者某一类元素

基本选择器

标签选择器
会选择到页面上所有的这个标签的元素
类选择器
类选择器的格式：。class的名称{}。
可以多个标签归类，是同一个class，可以跨标签，可以复用。在标签上定义的时候可以用空格给一个标签赋予多个类。如：

<p class="qwe asd zxc">p1</p>  这样的话这个p标签的类既是qwe，也是asd，还是zxc。

id 选择器
id选择器格式：#id名称{}。
id必须保证全局唯一，不可以复用。

他们不遵循就近原则，优先级：id选择器>class选择器>标签选择器

层次选择器

后代选择器：在某个元素的后面的选中的一种标签都改变
如：body p{
background：red；
}
意思为body元素之内的所有P标签都改变背景为红色
子选择器：只改变某个元素的后面的选中的一种标签的第一代
如：body>p{
background:red;
}
意思为body元素之内的第一代P标签改变背景为红色
弟弟选择器（同辈）：只有一个。相邻的下一个元素改变。（只往下找一个）
。active + p{
background:red;
}
意思为自己定义的class后面的第一个同辈的p标签改变背景为红色
通用兄弟选择器（全部弟弟选择器）：当前选中元素的向下的所有兄弟元素
如：。active~p{
background：red；
}
意思为自己定义的class后面的全部同辈的p标签改变背景为红色

结构伪类选择器

伪类选择器就是带：的那些选择器
结构伪类选择器就是定位元素的

<body>
<h1>h1</h1>
<p>p1</p>
<p>p2</p>
<p>p3</p>
<ul>
    <li>li1</li>
    <li>li2</li>
    <li>li3</li>
</ul>
</body>

   /*选中ul里的第一个li*/
   ul li:first-child{
       background: yellow;
   }
    /*选中ul里的最后一个li*/
    ul li:last-child{
        background: red;
    }

    以下选择器知道就好，不要求记

这一个的意思是：选择当前P元素的父级元素，选中父级元素的第二个子元素，且该元素必须为p标签才会让背景变红
如果是p:nth-child(1），对于上述html代码来说则不会生效，因为第一个元素是h标签，但他不是p标签。
    p:nth-child(2){
        background: red;
    }
这一个的意思是：选中父元素下的第一个P元素，将其背景变红
p:nth-of-type(1){
       background:red;
}

属性选择器（建议）

结构为：a[ ]{ }
[ ]里填写属性名 = 属性值，这里的属性值可以是正则表达式

选择存在id属性的元素：

a[id]{
    background:red;
}

选择id=first的元素：

a[id=first]{   //这里因为id是唯一的所以不用带引号
   background:red;
}

选择class中有bai的元素

a[class*="bai"]{           //  = 是绝对等于， *= 是包含这个元素。  
    background:red;     //  因为在这个例子中举得一个元素有多个类，如：<p class="qwe  asd  zxc">p1</p>
}                                 //所以这里用*=   而不用=

选中href中以http开头的元素.找以。。。开头用^=

a[href^=http]{
    background:yellow;
}

选中href中以pdf结尾的元素。找以。。。结尾用$=

a[href$=pdf]{
    background:yellow;
}

美化网页元素

字体样式

font-family:字体
font-size：字体大小
font-weight：字体粗细
color：字体颜色

span标签：重点要突出的子，使用span套起来，其实用其他的也可以，但span是约定俗成的

<style>
  #title{
      font-size: 40px;
  }
</style>

<body>
欢迎学习<span id="title">Java</span>
</body>

文本样式

text-align：排版，靠左，靠右，居中。

text-indent：2em；段落首行缩进，em意思为2个字

line-height：行高；
想要字体上下居中需要让行高和块高一致。（单行文字上下居中）
如：

p{
height:50px;
line-height:50px;
}

text-decoration:underline; 下划线
text-decoration:none；去下划线（a标签默认带有下划线）

大吖么大白菜

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
css导入方式；各种选择器；字体样式；文本样式

导入方式1.行内样式：在标签元素中，编写一个style属性，编写样式即可<h1 style="color: red">标签<h1>2.内部样式：style标签<style> h1{ color: red; }</style>3.外部样式在css网页内编写，然后导入<link rel="stylesheet" href="目录地址">优先级：行内样式最大，如果
复制链接

扫一扫