css 前端1

最新推荐文章于 2022-11-06 23:46:23 发布

苗苗大佬

最新推荐文章于 2022-11-06 23:46:23 发布

阅读量111

点赞数

分类专栏：前端 qhtml 文章标签：定位 css html

本文链接：https://blog.csdn.net/weixin_39349045/article/details/119297251

版权

前端同时被 2 个专栏收录

5 篇文章 0 订阅

订阅专栏

qhtml

1 篇文章 0 订阅

订阅专栏

css样式
1、怎么样去写样式？
    <link>
    <style>
    <p style=""> </p>



2、样式如何生效
    最近原则，离标签最近的样式生效

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Document</title>
 
</head>
<!-- <style>
  /* p{color: aqua} */
</style> -->

<body>
  <link rel="stylesheet" href="./Untitled-1.css">
  <p>你好 世界</p>
  <p>你好</p>
  
</body>
</html>
#命名一个css样式Untitled-1.css文件
p{color: blueviolet}

在这里插入图片描述

选择器：selenium如何去定位元素？？面试题目

1 、 id选择器
精准的指向到某一个id的属性，同时只能生效一个id
2、class选择器
每个标签可以同时配置多个class属性，也就意味着可以同时生效多个样式信息

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
<style>
#p1{color: blue}
#p2{color: brown}
.size{font-size: 20px}
</style>
</head>

<body>
    <p id="p1" class="size">p1标签</p>
    <p id="p2">p2标签</p>

</body>
</html>

3、标签选择器
html的标签作为选择器，生效的都是那些没有被修改过的样式；

  div{
    /* height: 1000px; */
    /* width: 200px; */
    /* border: 2px  solid red; */
  }
  p{
    font-size: 1px
  }
  input[type="text"]{
    border: 2px  solid  firebrick;
  }

4、属性选择器
input[type=“text”]{
border: 2px solid firebrick;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
<style>
#p1{color: blue}
#p2{color: brown}
.size{font-size: 20px}
input[type="text"]{border: 2px solid rebeccapurple}
</style>
</head>

<body>
    <p id="p1" class="size">p1标签</p>
    <p id="p2">p2标签</p>
<input type="text" name="请输入" id="1">
</body>
</html>

在这里插入图片描述

苗苗大佬

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css 前端1

css样式1、怎么样去写样式？ <link> <style> <p style=""> </p>2、样式如何生效最近原则，离标签最近的样式生效<!DOCTYPE html><html lang="en"><head> <title>Document</title> </head><!-- <style> /
复制链接

扫一扫

专栏目录